登录 用户中心() [退出] 后台管理 注册
   
您的位置: 首页 >> SoftHub关联区 >> 主题: 有 box-sizing:border-box 的情况下才能使用 width:100%     [回主站]     [分站链接]
有 box-sizing:border-box 的情况下才能使用 width:100%
guest
浏览(250) - 2018-06-30 17:57:24 发表 编辑
给本帖添加超大文件下载链接

关键字: css_main

[2018-07-13 10:25:00 最后更新]

有 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 发表 编辑

CSS中添加什么属性,可以使padding不影响整体大小

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低版本不支持,注意兼容性


总数:2 页次:1/1 首页 尾页  
总数:2 页次:1/1 首页 尾页  


所在合集/目录
CSS常用推荐 更多



发表评论:
文本/html模式切换 插入图片 文本/html模式切换


附件:



NEWBT官方QQ群1: 276678893
可求档连环画,漫画;询问文本处理大师等软件使用技巧;求档softhub软件下载及使用技巧.
但不可"开车",严禁国家敏感话题,不可求档涉及版权的文档软件.
验证问题说明申请入群原因即可.

Copyright © 2005-2020 clq, All Rights Reserved
版权所有
桂ICP备15002303号-1