有 box-sizing:border-box 的情况下才能使用 width:100%
guest
浏览(464) -
2018-06-30 17:57:24 发表
编辑
关键字: css_main
有 box-sizing:border-box 的情况下才能使用 width:100%
参考 https://blog.csdn.net/hepcwl/article/details/44079667
很多时候,不指定宽度又实在是不行.
--------------------------------------------------
第二种情况：
css3里有一个属性box-sizing=content-box|border-box|inherit;
来自http://www.w3school.com.cn的解释：
值 描述
content-box
这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
border-box
为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit 规定应从父元素继承 box-sizing 属性的值。
所以如果浏览器是ie8+ ff chrome等支持css3的浏览器，box-sizing属性也可以改变具体到某一个元素的padding与边框是否包含进宽高。
guest
2018-06-30 18:00:29 发表
编辑
2015年03月05日 10:55:00
阅读数：8511
在网页排版时经常会遇到padding或边框有时会包含在height或width里有时又不包含的情况。那么什么时候会包含，什么时候又不包含呢？
首先，任何情况下margin都不包含在height和width内。而padding与边框是否包含则有两种情况。
第一种情况：
在标准盒子模型中
如图：325x146便是宽高，即内容框的宽高，并不包含padding和border。这是标准盒模型的情况，但还存在另一种ie盒子模型，ie盒子模型便是把padding与border包含在宽高内，即宽高包含了内容框的宽高加上padding与边框。一般情况下，ie浏览器会使用ie盒子模型，其它如ff、chrome则使用标准盒子模型。如果要统一使用标准盒子模型，我们可以在网页中加入doctype申明使用w3c标准，这样所有浏览器都会使用标准盒子模型。
第二种情况：
css3里有一个属性box-sizing=content-box|border-box|inherit;
来自http://www.w3school.com.cn的解释：
值 描述
content-box
这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
border-box
为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit 规定应从父元素继承 box-sizing 属性的值。
所以如果浏览器是ie8+ ff chrome等支持css3的浏览器，box-sizing属性也可以改变具体到某一个元素的padding与边框是否包含进宽高。
clq
2018-07-13 10:25:00 发表
编辑
moz-box-sizing: border-box; /*Firefox3.5+*/
-webkit-box-sizing: border-box; /*Safari3.2+*/
-o-box-sizing: border-box; /*Opera9.6*/
-ms-box-sizing: border-box; /*IE8*/
box-sizing: border-box; /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
注意：box-sizing属性是CSS3的属性，IE低版本不支持，注意兼容性
NEWBT官方QQ群1: 276678893
可求档连环画,漫画;询问文本处理大师等软件使用技巧;求档softhub软件下载及使用技巧.
但不可"开车",严禁国家敏感话题,不可求档涉及版权的文档软件.
验证问题说明申请入群原因即可.
