CSS盒子模型以及CSS3中的box-sizing

最新推荐文章于 2024-03-01 11:37:06 发布

barnett_y

最新推荐文章于 2024-03-01 11:37:06 发布

阅读量780

点赞数

分类专栏：【HTML5+CSS3点滴知识】

【HTML5+CSS3点滴知识】专栏收录该内容

135 篇文章 10 订阅

订阅专栏

css中的盒模型一般分为标准W3C盒模型和IE盒模型。

css盒模型定义

css盒模型(Box Model)规定了元素框处理元素内容、内边距、边框、和外边距的方式。
下图说明了盒子模型
这里写图片描述
元素框的最内部分是实际的内容（content），直接包围内容的是内边距（padding），内边距呈现了元素的背景。内边距的边缘是边框（border），边框以外是外边距（margin），外边距默认是透明的，因此不会遮挡其后的任何元素。
注意：背景应用于由内容和内边距、边框组成的区域。
那我们分别来看一下标准的盒模型以及IE盒模型

标准盒模型

这里写图片描述
在标准盒模型中，width 和 height 指的是内容区域的宽度和高度。

IE盒模型

这里写图片描述
IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的width包含了 content 、border 和 pading。即浏览器的width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

来个例子：一个div盒子

div{
    width: 100px;
    height: 150px;
    padding: 10px;
    border: 1px solid red;
    margin: 20px;
    background-color: pink;
}


 
 1
2
3
4
5
6
7
8
9
10
 
 1
2
3
4
5
6
7
8
9
10

盒模型的计算方式：
盒模型占的位置大小
盒子所占宽度为：内容的宽度+内边距（左、右边距）+边框（左、右边框）+外边距（左、右外边距）
盒子所占高度为：内容的高度+内边距（上、下边距）+边框（上、下边框）+外边距（上、下外边距）
如果用w3c盒子模型解释，那么这个盒子占用的
占有的宽度为 100 + 10 * 2 + 1 * 2 + 20 * 2 = 162px
占有的高度为 150 + 10 * 2 + 1 * 2 + 20 * 2 = 212px

这里我要说明一点，这个盒子实际的大小：
盒子实际宽度为：内容的宽度+内边距（左、右边距）+边框（左、右边框）
盒子实际高度为：内容的高度+内边距（上、下边距）+边框（上、下边框）

实际宽度：100 + 10 * 2 + 1 * 2 = 122px
实际高度：150 + 10 * 2 + 1 * 2 = 172px

用ie的盒子模型解释，这个盒子占用的
盒子占有的宽度为 width+margin
占有的高度为 height+margin

占有的宽度为 100 + 20 * 2 = 140px
占有的高度为 150 + 20 * 2 = 190px
重点：
这个盒子实际的大小为：宽度100px 高度150px
我们一般理解的是标准下的盒子模型。
注意：
宽度和真实占有宽度，不是一个概念！！
在标准模式下，改变外边距、内边距和边框的大小，仅仅导致盒子模型占有的宽度和高度发生改变，并不会影响内容区域的高度和宽度。
如果我将div的width、height保持不变，padding、border改变，如下：

div{
    width: 100px;
    height: 150px;
    padding: 15px;
    border: 1px solid red;
    margin: 20px;
    background-color: pink;
}

 
 1
2
3
4
5
6
7
8
9
 
 1
2
3
4
5
6
7
8
9

在标准盒模型中，
内容区域的宽度仍为100px，高度仍为150px。但是盒子模型占有的宽度、高度分别为：
div盒子的宽度100 + 15 * 2 + 1 * 2 + 20 * 2 = 172px
div盒子的高度150 + 15 * 2 + 1 * 2 + 20 * 2 = 222px
这个盒子实际的大小为
宽度：100 + 10 * 2 + 1 * 2 = 122px
高度：150 + 10 * 2 + 1 * 2 = 172px

我们会发现盒子变大了。
IE盒模型中，盒子的实际宽度仍为100px 高度仍为150px。
我们要知道：
IE盒模型下，一旦设置了width和height，无论改变padding和border为多少，只要在总宽度和高度的承受范围内，都不会改变整体的大小，当然太大了会溢出。而在标准盒模型中，改变padding和border都会使整个box的宽高改变。
如果我们想动态改变border的大小，但是又不想让box的大小发生改变，该如何去做呢？
CSS3有一个非常有用的属性：
css3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

CSS3中的box-sizing

语法：box-sizing: content-box|border-box|inherit;
content-box:这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
Border-box:为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit规定应从父元素继承 box-sizing 属性的值。

**简单理解为content-box 为外加模式，用户设置的宽度和高度是相对稳定的，增加border、padding会使整个盒子变大。
border-box：为内减模式，盒子的实际宽度和高度是固定不变的，用户已经设置好的width和height。增加border和padding的值，不会改变盒子的大小，只改变内容区域的大小。
Border-box 改变border padding不会影响到其他的盒子，在移动端用的比较多。**
看例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 100px;
                height: 100px;
                margin: 20px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </body>
</html>


 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

看到了吧，我给3个div设置了统一的样式，结果如下：
这里写图片描述
我给.div2,.div3增加样式，会发生如下改变

.div2,.div3{
            border: 25px solid red;
            padding: 20px;
        }
 
 1
2
3
4
 
 1
2
3
4

这里写图片描述
再来，

.div2{
        box-sizing: border-box;
    }
.div3{
        box-sizing: content-box;
    }

 
 1
2
3
4
5
6
7
 
 1
2
3
4
5
6
7

这里写图片描述

以上是个人的见解，有不对的地方还请大家多多指教！转载http://blog.csdn.net/diligentkong/article/details/61617761

barnett_y

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS盒子模型以及CSS3中的box-sizing

css中的盒模型一般分为标准W3C盒模型和IE盒模型。css盒模型定义css盒模型(Box Model)规定了元素框处理元素内容、内边距、边框、和外边距的方式。下图说明了盒子模型元素框的最内部分是实际的内容（content），直接包围内容的是内边距（padding），内边距呈现了元素的背景。内边距的边缘是边框（border），边框以外是外边距（margin），外边
复制链接

扫一扫