html图片边框显示不全,css border边框显示不完全

css border边框显示不完全

border边框显示不完全是因为大多数浏览器采用了W3C标准盒子模型，它规定一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

所以，当我们设置了border后，width变成了：100% + margin + padding + border，超过了100%，也就显示不完全了。.

解决方法：div{

width: 100%;

border: solid 5px green;

box-sizing: border-box;

}

使用这样一条css样式 box-sizing: border-box;，就能解决盒子宽度超出100%，而造成边框显示不完全的问题了。

标准模式和怪异模式

CSS中Box model是分为两种: W3C标准和 IE标准盒子模型。

大多数浏览器采用W3C标准模型，而IE中则采用Microsoft自己的标准。

怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏览器。

当不对doctype进行定义时，会触发怪异模式。在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

在怪异模式下，一个块的总宽度= width + margin(左右)(即width已经包含了padding和border值)

更多CSS相关技术文章，请访问CSS3答疑栏目进行学习！

html图片边框显示不全,css border边框显示不完全相关推荐

CSS Border (边框)
CSS 边框 CSS 边框 (border) 可以是围绕元素内容和内边距的一条或多条线,对于这些线条,您可以自定义它们的样式.宽度以及颜色.使用 CSS 边框属性,我们可以创建出比 HTML 中更加优 ...
11.CSS border边框
边框 border:边框的意思,描述盒子的边框边框有三个要素: 粗细线性样式颜色 border: solid 如果颜色不写,默认是黑色.如果粗细不写,不显示边框.如果只写线性样式,默认的有上下左 ...
css ---border边框语法
一.四个边框 border-left 设置左边框,一般单独设置左边框样式使用 border-right 设置右边框,一般单独设置右边框样式使用 border-top 设置上边框,一般单独设置上边框样式 ...
教你玩转CSS border(边框)
目录边框样式 border-style 值边框宽度边框颜色边框-单独设置各边实例边框-简写属性 CSS 边框属性
php表格所有边框实线,css表格怎么添加边框样式？css表格边框样式总结（附完整实例）...
本篇文章主要讲述的就是关于css表格添加边框样式,这里还有关于css表格边框样式的总结,还有css表格边框的完整实例.接下来就让我们一起来看这篇文章吧首先我们先看看如何利用css来给表格添加边框: ...
html svg图片不显示,html/css svg怎么显示不出来？
html/css svg怎么显示不出来?在html中引入svg文件为何不显示?下面给大家介绍一下原因和解决方案.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 当html引入svg文 ...
tablewidget字体显示不全_ios 容器内容显示原理及调整
先发一行文字,看一下奇特之处: 09afgjkpqz汉字这是编辑器自动加的横线 iOS,OS文本容器中都是基线对齐,所谓的基线对齐就是指无论中文字符,数字,英文字符,表情等它们在一行的时候,基线是在 ...
IE11更新导致部分网页显示不全、部分软件显示白屏、黑屏的解决办法
IE更新惹的祸 IE11更新后,出现了一些.首先,发现部分网页显示不全,一些模块一直处于加载状态不能正常显示:然后TX 官方助手的页面也出现了白屏的样子,不能正常显示:坦克世界的登陆界面一直显示& ...
Echarts图表x轴y轴刻度值过长时显示不全(超过一千显示...k)
在使用 Echarts 图表的过程中,有时候数值会很大导致该轴的刻度显示不全,如图: 这个时候就需要将该轴的刻度值除以 1000 或 10000,再加一个单位来缩短它的长度: Echarts官网中为我 ...
android圆形图标显示不全,android 桌面图标显示不全
android 图标显示不全的现象,分析代码和配置文件如下操作可以解决问题 Workspace.java 文件 cellCountX = 1; while (CellLayout.widthInPor ...

html图片边框显示不全,css border边框显示不完全

html图片边框显示不全,css border边框显示不完全相关推荐

最新文章

热门文章