CSS盒子模型

最新推荐文章于 2025-07-03 11:04:06 发布

塞上江南果

最新推荐文章于 2025-07-03 11:04:06 发布

阅读量340

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css

本文链接：https://blog.youkuaiyun.com/Picking_up_stones/article/details/60872360

CSS 专栏收录该内容

16 篇文章

订阅专栏

这是一个迷茫，惶恐的三月，最近很着急，很害怕，有一种火烧眉毛，才知道自己之前浪费了多少时间。但是不管怎么样，相信只要一直学习巩固，过得充实了，剩下的就顺其自然了。说了一堆废话，接下来步入正题，谈一下，CSS著名的盒子模型。

一. 盒子模型简述：
相信大家都知道，只要是块级元素，就都有自己的盒子模型，盒子模型由：content（内容）+padding（填充）+border（边框）+margin（边界）组成，也就是说，一个块级元素，实际所占的高度和宽度=content+padding+border+margin，下面是一张盒子模型的图：
这里写图片描述

二. box-sizing属性
这个属性有两个属性值，content-box和border-box；
（1）content-box：

这是盒子模型的默认值；
实现的效果是：当我们设置一个元素的固定高度和宽度时，实际上是针对content部分所设置的，当使用padding和border属性时宽度和高度会额外的增加。

（2）border-box：

实现效果：当我们给盒子模型指定好高度和宽度后，设置border-box值会使padding和border的值也属于所设置的高度和宽度，这样的效果更符合我们对盒子模型的认识；
使用优点：使用该属性，当我们用百分比的时候，会很方便，会减少很多计算。
使用缺点：兼容问题，IE6和7的标准模式下没有box-sizing属性。

下面的代码，是这两个属性的对比效果：

<!DOCTYPE html>
<html>
<head>
<style> 
.container
{
    width:30em;
    border:1em solid;

}
.box1
{
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    width:50%;
    border:1em solid red;
    padding: 1em;
    background: blue;
}
.box2
{
    box-sizing:content-box;
    -moz-box-sizing:content-box;/* Firefox */
    -webkit-box-sizing:content-box;/* Safari */
    width:50%;
    border:1em solid yellow;
    padding: 1em;
    background: blue;
}

</style>
</head>
<body>

<div class="container">
<div class="box1">第一个div</div>
<div class="box2">第二个div</div>
</div>

</body>
</html>