什么是盒模型
CSS盒子模型仅仅是一个形象的比喻，HTML中所有的标签都是盒子。
我们知道在HTML中所有的标签都可以设置如下属性：
- 宽度/高度
- 内边距
- 边框
- 外边距
其中
- 内容的宽度和高度：
通过标签的width/height属性设置的宽度和高度。 - 元素的宽度和高度
宽度 = border-left-width + padding-left-width + width + padding-right-width + border-right-width - 元素空间的宽度和高度
宽度 = margin-left + border-left-width + padding-left-width + width + padding-right-width + border-right-width + margin-right
注意：
- 增加了padding/border之后，元素的宽高也会发生变化。
- 如果增加了padding/border之后还想保持元素的宽高，那么就必须减少内容的宽高。或者使用 box-sizing属性。
box-sizing
css3中增加了一个box-sizing属性，如果设置值为border-box, 改变padding/border之后，元素的宽高不发生变化。
- box-sizing: border-box; 元素的宽度= width
- box-sizing: content-box; 元素的宽度 = border-left-width + padding-left-width + width + padding-right-width + border-right-width
盒子居中问题
对于下面代码
<div class="box1">
<div class="box2"></div>
</div>
如果想让box2在box1中居中，方法有如下：
- box1使用pading与box-sizing组合。
.box1 {
width: 500px;
height: 500px;
background-color: red;
padding: 150px;
box-sizing: border-box;
}
.box2 {
width: 200px;
height: 200px;
background-color: blue;
}
- box2使用margin。
.box1 {
width: 500px;
height: 500px;
background-color: red;
/*方式自己被顶下来*/
border: 1px solid black;
}
.box2 {
width: 200px;
height: 200px;
background-color: blue;
margin: 150px auto;
/* margin: 150px; */
}
注意点
- 如果给子盒子设置margin-top, 会把父盒子与子盒子一起顶下来，解决办法是给父盒子设置
border: 1px solid black;。 margin: 0 auto可以用来设置子盒子相较于父盒子水平居中。- 日常开发中优先使用padding设置盒子居中，margin更多的用来设置兄弟元素间的距离。
margin: 0 auto VS text-align: center
- text-align: center 用来设置盒子里面的文字、图片 居中。
- margin: 0 auto 用来设置使当前盒子相对于父盒子居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
text-align: center;
/* margin: 0 auto; */
}
.box1 {
width: 50px;
height: 50px;
background-color: blue;
/* margin: 0 auto; */
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
text-align
总结
我们可以用下面代码理解盒模型。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
margin: 50px;
border: 25px solid black;
padding: 50px;
width: 200px;
height: 200px;
/*
内容宽度=200
元素宽度=25 + 50 + 200 + 50 + 25 = 350
元素空间的宽度=50 + 25 + 50 + 200 + 50 + 25 + 50 = 450
*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
各个属性如下图：
推荐阅读
更多优质内容，请扫码关注公众号：RiverLi。
