border-box意味着子容器的padding和border的厚度都算在50%之内
这样,你可以随意的修改padding和border的厚度值,根本不用担心父容器被撑爆
border-box兼容性非常好,可支持IE8及以上浏览器
现在最著名的CSS框架几乎都采用了border-box
但假如在全局上加上border-box,是没必要加的
事实上:你只需要在必须使用border-box的元素身上使用border-box,其他所有元素都保持content-box就好了
为什么?
因为:box-sizing属性本来就应该是灵活使用的,全局设定为border-box或者全局设定为content-box都有弊端
【使用场合】
子元素有padding和border,或者至少有其一
并且需要给子元素设定100%宽度(或者50%宽度等等),这时候显然需要border-box
布局属性(Layout properties) border 边框属性 该CSS属性用来设定边框宽度,风格和颜色。 border-bottom 下边框属性 该CSS属性用来设定下边框宽度,风格和颜色。 border-bottom-color 下边框颜色属性 该CSS属性用来设定下边框的颜色。 border-bottom-style 下边框风格属性 该CSS属性用来设定下边框的风格。 border-bottom-width 下边框宽度属性 该CSS属性用来设定下边框的宽度。 border-collapse 边框合并属性 该CSS属性用来设定表格的行和列的边框是合并成单边框,还是分别有各自的边框。 border-color 边框颜色属性 该CSS属性用来设定边框的颜色。 border-left 左边框属性 该CSS属性用来设定左边框宽度,风格和颜色。 border-left-color 左边框颜色属性 该CSS属性用来设定左边框的颜色。 border-left-style 左边框风格属性 该CSS属性用来设定左边框的风格。 border-left-width 左边框宽度属性 该CSS属性用来设定左边框的宽度。 border-right 右边框属性 该CSS属性用来设定右边框宽度,风格和颜色。 border-right-color 右边框颜色属性 该CSS属性用来设定右边框的颜色。 border-right-style 右边框风格属性 该CSS属性用来设定右边框的风格。 border-right-width 右边框宽度属性 该CSS属性用来设定右边框的宽度。 border-style 边框风格属性 该CSS属性用来设定边框的风格。 border-top 上边框属性 该CSS属性用来设定上边框宽度,风格和颜色。 border-top-color 上边框颜色属性 该CSS属性用来设定上边框的颜色。 border-top-style 上边框风格属性 该CSS属性用来设定上边框的风格。 border-top-width 上边框宽度属性 该CSS属性用来设定上边框的宽度。 border-width 边框宽度属性 该CSS属性用来设定边框的宽度。 margin 边距属性 该CSS属性用来设定边距的宽度。 margin-bottom 下边距属性 该CSS属性用来设定下边距的宽度。 margin-left 左边距属性 该CSS属性用来设定左边距的宽度。 margin-right 右边距属性 该CSS属性用来设定右边距的宽度。 margin-top 上边距属性 该CSS属性用来设定下边距的宽度。 padding 间隙属性 该CSS属性用来设定间隙的宽度。 padding-bottom 下间隙属性 该CSS属性用来设定下间隙的宽度。 padding-left 左间隙属性 该CSS属性用来设定左间隙的宽度。 padding-right 右间隙属性 该CSS属性用来设定右间隙的宽度。 padding-top 上间隙属性 该CSS属性用来设定上间隙的宽度。 //除了以上属性外还有很多css布局属性,如: CSS字体属性(font) CSS常用文本属性 CSS背景属性 CSS边框属性(border) CSS边距属性(margin) CSS间隙属性(padding) CSS盒子模式(Box Model) CSS列表属性(list-style) CSS伪类(pseudo-class) 这里就不一一介绍了,请到相关网站学习吧