box-sizing border-box 的理解

泡在网上的日子 / 文 发表于2014-12-19 21:31 次阅读 css3

box-sizing: border-box;  则div 设置的宽高将包含边框及padding

语法

box-sizing: content-box|border-box|inherit;
描述
content-box

这是由 CSS2.1 规定的宽度高度行为。

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。

border-box

为元素设定的宽度和高度决定了元素的边框盒。

就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit规定应从父元素继承 box-sizing 属性的值。


 


收藏 赞 (4) 踩 (2)
上一篇:SASS用法指南
摘自 阮一峰SASS用法指南 学过CSS的人都知道,它不是一种编程语言。 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯
下一篇:自定义Bootstrap 样式
自从Twitter推出 Bootstrap 以来,它的推广程度就像火箭发射一样节节攀升。这个广受欢迎的CSS框架为众多网站提供了响应式网格系统,预定义样式的组件与 JavaScript插件 。 Bootstrap 的设计初衷之一就是实用。当你要新建网站时, Bootstrap 绝对是一个节约时