# CSS 盒子模型
CSS 处理网页时，它认为每个元素都包含在一个不可见的盒子里。包含内容区域、padding（内边距）、border（边框）、margin（盒子与盒子的距离）。
所有的页面的元素都可以看成是一个盒子，占据一定的页面空间。
# padding
padding:10px 20px 30px 40px;这样会设置元素的上、右、下、左四个方向的内边距。padding:10px 20px 30px;分别指定上、左右、下四个方向的内边距。padding:10px 20px;分别指定上下、左右四个方向的内边距。padding:10px;同时指定上左右下四个方向的内边距。- 同时在 css 中还提供了
padding-top、padding-left、padding-right、padding-bottom分别用来指定四个方向的内边距。 - 改变元素的大小。
<style>
.d1 {
width: 300px;
height: 300px;
background-color: green;
/*padding: 50px 100px 30px 80px;
padding-left: 100px;*/
padding: 100px;
}
</style>
# margin
- 设置方法和
padding类似，同样也提供了四个方向的margin-top/margin-right/margin-bottom/margin-left。 margin: xxx auto;可以使块状元素水平居中。嵌套崩塌：两个盒子发生嵌套的时候，给子类设置 margin 会给父类造成一种崩塌现象，子类元素的 margin-top 没有效果，而是直接作用到父类元素。
解决方案：
1. 父类 overflow: hidden;
2. 父类 设置极小的 padding 或者 border；
margin重叠： 如果垂直方向上两个块状元素同时设置了 margin-bottom 和 margin-top，那么这两个值将会发生重叠，不会累加，哪个值大用哪个。- margin-top/margin-bottom 对于行内元素无效。
<style>
.d2 {
width: 200px;
height: 200px;
background-color: red;
/*margin: 100px;
margin-top: 200px;*/
/*d2将会左右居中*/
margin: 100px auto;
}
</style>
<!-- ======================= -->
<!-- 当两个盒子发生嵌套的时候，给子类设置maring会给父类造成一种崩塌现象，子类的margin-top没有效果，而直接作用到父类 -->
<!-- 解决方案： 1. 父类 overflow: hidden
2. 父类 设置极小的padding -->
<div class="box">
<div class="inner-box"></div>
</div>
<hr />
<!-- 如果垂直两个块状元素同时设置了margin-bottom和margin-top,那么这两个值将会发生重叠,不会累加，哪个值大用哪个 -->
<div class="box2"></div>
<div class="box3"></div>
# border
- 可以在元素周围创建边框，边框是元素可见框的最外部。
border:1px solid red;分别指定了边框的宽度、颜色和样式，是一种缩写：border-width border-style border-color。border-style:none (默认) / dashed(虚线) / dotted（点） / solid(实线) / double(双实线)。- 可以单独设置某一条边框：
border-right: 20px solid blue; - 改变元素的大小。
<style>
.d1 {
width: 200px;
height: 200px;
background-color: green;
/*简写属性*/
/*border: 10px solid red;*/
border-width: 10px;
border-style: solid;
border-color: red;
/*右边单独添加20像素*/
border-right: 20px solid blue;
}
</style>
# 显示和隐藏
display:none;隐藏元素，不再在文档中占据位置。- 显示：可以将 display 设置为其他属性值，不为 none 即可。
visibility:hidden;隐藏元素，隐藏后其在文档中所占的位置会依然保持，不会被其他元素覆盖。
<style>
.baidu {
/*display 可以改变元素的表现形式*/
display: inline-block;
width: 300px;
height: 300px;
background-color: pink;
}
.p1 {
/*display:none;*/
visibility: hidden;
}
</style>
# overflow
overflow 指定标签里面的内容超出了样式的宽度和高度时如何处理。
- visible：默认值
- scroll：添加滚动条
- auto：根据需要添加滚动条
- hidden：隐藏超出盒子的内容
<style>
.d1 {
width: 200px;
height: 200px;
background-color: green;
overflow: auto;
/*overflow: scroll;
overflow: hidden;*/
}
</style>