CSS盒子模型（及特殊情况）

一、盒子组成

• 内容：width & height
• 内边距：padding
• 边框线：border
• 外边距：margin

例:

div {
 margin: 20px;
 border: 1px solid brown;
 padding: 10px;
 
 width: 100px;
 height: 100px;
 background-color: pink;
 }

1.边框线（border）

• 属性值：边框线粗细 样式 颜色
• 样式有三种
  实线：solid
  虚线：dashed
  点线：dotted

例:
（1）一次添加四个方向相同的边框线

div {
  /* 添加边框 */
  border: 1px solid brown;
  
  width: 100px;
  height: 100px;
 }

（2）单边框线

div {
  /* 上边框线 */
  border-top: 2px solid red;
  /* 右边框线 */
  border-right: 3px dashed green;
  /* 下边框线 */
  border-bottom: 4px dotted blue;
  /* 左边框线 */
  border-left: 5px solid orange;
  
  width: 100px;
  height: 100px;
 }

2.内边距（padding）

• 属性值：px（像素）

例:

div {
  /* 上下左右 */
  padding: 10px;
  /* 上下 左右 */
  padding: 10px 20px;
  /* 上 左右 下 */
  padding: 10px 20px 30px;
  /* 上 右 下 左 */
  padding: 10px 20px 30px 40px;
  /* 单独设置一个方向内边距 */
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
  
  width: 100px;
  height: 100px;
  background-color: pink;
 }

3.外边距（margin）

• 属性值：margin
• 与 padding 属性值写法、含义相同

二、盒子特殊情况

1.尺寸计算

内减法：box-sizing: border-box

2.版心居中

设置左右margin值为auto
例:

div {
  margin:0 auto;
}

3.清除默认样式

例:

/* 清除默认内外边距 */
 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }
 
 /* 清除列表项目符号 */
 li {
 list-style: none;
 }

4.元素溢出（overflow）

例:

div {
  /* 溢出隐藏 */
  overflow:hidden;
  /* 无论是否溢出都显示滚动条 */
  overflow:scroll;
  /* 溢出显示滚动条 */
  overflow:auto;
}

5.外边距塌陷

解决办法：

• 取消子级margin，父级设置padding
• 父级设置 overflow: hidden
• 父级设置 border-top

6.圆角（border-radius)

属性值：数字+px / 百分比
可以设置4个值，用法与margin，padding类似

7.盒子阴影（box-shadow）

属性值：X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影
例:

 div {
 width: 200px;
 height: 80px;
 background-color: orange;
 box-shadow: 2px 3px 5px 0 rgba(0, 0, 0, 0.5) inset;
 /* 默认是外阴影，设置inset后变成内阴影 */
 }