CSS 盒模型与box-sizing
2018-06-24 02:25:14来源:未知 阅读 ()
一、盒模型
一个web页面由许多html元素组成,而每一个html元素都可以表示为一个矩形的盒子,CSS盒模型正是描述这些矩形盒子的存在。
MDN的描述:
When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes.
Every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge.
CSS盒模型有四条边:外边距边、边框边、内填充边、内容边(Content edge、Padding edge、Border edge和Margin edge),四条边由内到外把它划分为四个区域:内容区域、内边距区域、边框区域、外边距区域(Content area、Padding area、Border area和Margin area)。
- 内容区域(content area )是包含元素真实内容的区域。
- 内边距区域(padding area) 延伸到包围padding的边框。如果content area设置了背景、颜色或者图片,这些样式将会延伸到padding上。
- 边框区域(border area )是包含边框的区域,扩展了内边距区域。
- 外边距区域(margin area)用空白区域扩展边框区域,以分开相邻的元素。
通过CSS属性(width、height、padding、border和margin)来控制它们的尺寸。
二、box-sizing(css3属性)
1.box-sizing的值
1 /* 关键字 值 */ 2 box-sizing: content-box;/*默认值*/ 3 box-sizing: border-box; 4 5 /* 全局 值 */ 6 box-sizing: inherit; 7 box-sizing: initial; 8 box-sizing: unset;
2.box-sizing的作用
box-sizing的作用就是告诉浏览器,使用的盒模型是W3C盒模型,还是IE盒模型。
a.当 box-sizing 的值为 content-box(默认值) 时,其尺寸计算公式为:
width = content-width;
height = content-height;
b.当 box-sizing 的值为 border-box 时,其尺寸计算公式为:
width = content-width + padding-left + padding-right + border-left-width + border-right-width;
height = content-height + padding-top + padding-bottom + border-top-height + border-bottom-height;
无论取何值,盒子尺寸是一样的,改变的是盒子的容量(盒子内部的width和height的计算方式)。
补充:IE6、7为W3C盒模型。
3.对于box-sizing属性值的选择
在项目里,究竟该使用哪种盒模型?我也不知道啊
在MDN上有这样一句话:
Some experts recommend that web developers should consider routinely applying box-sizing: border-box to all elements.
一些专家甚至建议所有的Web开发者们将所有的元素的 box-sizing 都设为 border-box。
Twitter的开源框架Bootstrap3就全局设置了box-sizing: border-box,由此可见IE盒模型的是比较受欢迎的。
补充:
W3C在CSS3中,加入了 calc() 函数。
CSS函数
calc()
可以用在任何一个需要<length>
、<frequency>
,<angle>
、<time>
、<number>
、或<integer>
的地方。有了calc(),
你就可以通过计算来决定一个CSS属性的值了。
/* property: calc(expression) */ width: calc(100% - 80px);
使用 calc() 函数,我们可以在 content-box 里实现 border-box,相对的,在 border-box 里实现 content-box 也是可以的。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:HTML小记
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash