写了这个标题之后,凝望了很久,不知道怎么开笔,因为这个名字起的优点丢人,让我不知道从何说起,作为一个前端开发,盒子模型这边基础的内容居然还记不住,就有点说不过去了,说到底就是基础薄弱,所以深刻反省之后,觉得得脚踏实地地一步一步把基础好好补一补。
啰嗦完了,正文开始
css盒子模型是在编写css布局时的一种思维模式,它拥有外边距margin
、边框border
、内边距padding
、内容content
四个属性。
一般编写布局和样式代码时,都会涉及到宽高的设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
</head>
<body>
<div class='box'></div>
</body>
</html>
复制代码
body{
padding:0;
margin:0
}
.box{
height: 100px;
width: 100px;
border: 5px solid blue;
box-sizing: border-box;
background-color: yellow
}
复制代码
上面是设置了一个长100px
,宽100px
的div盒子,由于太贴近边框,给div添加一个外边距margin
,使它可以与边框保持一定的距离。外边距margin
是针对盒子的四个边的,如果没有特定指向的话,都是同时设置四个边框。看下图
margin: 20px
复制代码
给盒子content
添加内容,然后给个内边距
.box{
...
padding: 20px
}
复制代码
设置了padding
之后,会发现box
的大小并没有变,而是内容框content
大小发生了变化,这种形式称之为 IE标准盒子模型,width = content + padding + border
,当设置了一个盒子的宽高之后,再为它设置border
和padding
,盒子的宽高也不会发生变化,而是会以挤压盒子里面的空间。
OK,到这里,有的朋友可能会说,那如果我想不挤压盒子的大小,又想有border
和padding
的大小在,那怎么处理?CSS3
提供了可以切换盒子模型模式的属性:box-sizing
,它有2个值,分别是content-box
和border-box
,如果要实现上面这个需求,则需要给box
设置box-sizing: content-box
,添加之后,如下图
body{
padding:0;
margin:0
}
.box{
height: 100px;
width: 100px;
border: 5px solid blue;
box-sizing: border-box;
background-color: yellow;
margin: 20px;
padding: 20px;
box-sizing: content-box
}
复制代码
看到box
的大小变大了,这是因为box-sizing: content-box
把盒子从IE标准盒子模型转换成了W3C标准模型,W3C标准模型中对盒子的宽高和外边距margin
、边框border
、内边距padding
、内容content
四者之间的关系是 width = context
,所以,即使最先给box
设置了height:100px;width: 100px;
,后续再添加margin
、border
、padding
,content
的大小还是最先设置的,并不会改变,那margin
、border
、padding
的值则会再content
的外面延伸。
多个盒子模型相互都设置了margin
,会出现margin
塌陷的问题,常见的有2种 在上面代码后面追加一个盒子,并设置margin-top:50px
,理想box
和box2
之间的间距应该是20px+50px=70px
,但是,并没有,他们之间只出现了50px
.box2{
height: 100px;
width: 100px;
background-color: yellowgreen;
margin-top:50px
}
复制代码
这是一种margin
塌陷的情况,还有一种是嵌套的情况
<div class='box3'>
<div class='box4'></div>
</div>
复制代码
.box3{
height:200px;
width:200px;
background-color: gray
}
.box4{
height: 100px;
width: 100px;
background-color: yellowgreen;
margin-top:50px
}
复制代码
给box4
设置margin-top
值之后,居然作用到了box3
中,这不是我们想要的,解决方法也有挺多的
- 为父盒子设置
border:1px solid #gray
,同时height:198px;width:198px;
- 为父盒子添加
overflow:hidden
; - 为父盒子设定
padding-top:50px
值。
总结
- 宽度的计算 IE标准:
width = context+padding+border
;w3c标准:width=context
CSS3
属性box-sizing
可以切换盒子模型的模式