理解box-sizing属性border-box,content-box,其实也是理解正常盒模型与异常盒模型。 正常盒模型 正常盒模型,是指块元素box-sizing属性为content-box的盒模型。一般在现代浏览器中使用的都是正常盒模型content-box,它也是标准 w3c 盒子模型。 下图更方便理解。 正常盒模型是指:盒模型的大小包括content,padding,border,...
2、box-sizing: content-box; .big { width: 200px; height: 200px; padding: 10px; background-color: #000000; border: 1px solid #ff0000; box-sizing: content-box; } div的width或height(222px) = border(上下1px + 1px) + padding(上下10px + 10px) + content(200px)编辑...
box-sizing:content-box;在宽度和高度之外绘制元素的内边距和边框。 box-sizing:border-box;通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度.
元素实际占据的宽度为600,内容区的宽度为 600-margin-padding-border,即 600-20-20-1,内容区的宽度为578。 box-sizing 默认值为 content-box,width 设置的是内容区的宽度;box-sizing 默认值为 border-box,width 设置的是元素占据空间的宽度。
标准盒模型content-box 它的最大特点是,当已经设定了width和height值的时候,padding和border不被包含在你定义的width和height之内,也就是说,你定义的width只负责content区域的宽度,如果想得到整个盒子宽度,需要再加上padding和border的厚度。 这个content-box就是标准模型,诞生最早。content-box顾名思义,就是内容盒子。
标准盒模型content-box 它的最大特点是,当已经设定了width和height值的时候,padding和border不被包含在你定义的width和height之内,也就是说,你定义的width只负责content区域的宽度,如果想得到整个盒子宽度,需要再加上padding和border的厚度。 这个content-box就是标准模型,诞生最早。content-box顾名思义,就是内容盒子。
1、box-sizing:content-box的时候: 这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 2、box-sizing:border-box的时候: 为元素设定的宽度和高度决定了元素的边框盒。 就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制...
border-box:怪异盒模型,低版本IE浏览器中的盒模型 现代浏览器和IE9+默认值是content-box。 语法格式: box-sizing:content-box| border-box 区别: content-box:padding和border不被包含在定义的width和height之内。 盒子的实际宽度=设置的width+padding+border ...
//box-sizing有三种属性 box-sizing:content-box|border-box|inherit; 1. 2. content-box ( 默认值 - 标准盒模型 ) 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px 宽,并且任何边框和内边距的宽度都会被增加到...