您的位置：首页 > Web前端 > CSS

CSS盒子模型

2017-03-08 14:59 176 查看

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

效果如图：

如图中，第一个div的box-sizing值是border-box，第二个是content-box，可以看出第二个的padding和border值并没有包含在width中，所以使用border-box来实现布局是比较容易达到预想的效果的。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航