一、CSS盒子模型[外边距、内边距、box-sizing、边框、轮廓线]

一、盒子模型

1.盒子模型

介绍：盒子模型如下图，盒子大小正常组成有边框、内边距和具体内容，即height设置的高度只是具体内容的高度，不是盒子的高度

2.外边距

解释：其不占用盒子的大小(盒子大小的组成有边框、内边距和具体内容)

• 基础：margin: 50px 80px 100px 150px;// 顺序依次为：上、右、下、左
• 水平居中：margin: auto;//需要写在当前元素非父元素
  • 作用范围：只作用于块元素
  • 使用：可以用于最大盒子的居中
  • 注意：相对于父元素水平居中（需要父元素有足够大小）
• 其它名称：margin-top、margin-bottom、margin-left、margin-right

3.内边距

解释：其占用盒子的大小(盒子大小的组成有边框、内边距和具体内容)

• 基础：padding: 50px 80px 100px 150px;// 顺序依次为：上、右、下、左
• 其它名称：padding-top、padding-bottom、padding-left、padding-right

4.box-sizing

属性：box-sizing: border-box;
用法：盒子大小正常组成有边框、内边距和具体内容，即height设置的高度只是具体内容的高度，不是盒子的高度。使用该属性设置的height和width包含边框、内边距和具体内容

5.边框

解释：其占用盒子的大小(盒子大小的组成有边框、内边距和具体内容)

• 基础：border: 5px solid pink;
• 其它名字：border-top-width、border-right-width、border-top-color、border-right-color等等
• 简写：border-bottom: solid 5px red或者border: 5px solid pink;

补充：边框圆角border-radius: 10px; 简写：border-top-left-radius上左；border-bottom-left-radius下左

6.轮廓线

解释：其与边框样式和使用基本一样。区别在于：正常情况下边框占用盒子的大小，而轮廓线并不占用大小，也就是说它不会影响布局

应用场景：如使用hover展示”边框样式“，如果使用边框会改变盒子大小会影响到其它元素的布局，而轮廓线并不会，效果和轮廓线一样但是不占用空间不影响布局

• 基础：outline: 5px solid red;

7.display

解释：当设置为行内元素时，超出父元素宽度时，会产生类似于浮动的换行

8.visibility

解释：其和display:none;效果一样，都可以隐藏元素。区别在于：visibility会占用这块空间，而display:none;并不会

• 基础：visibility: hidden;不显示 visibility: visible;显示

9.溢出

解释：当盒子里面的内容超出盒子的大小，此时这种现实就叫溢出，可以专门处理

• 基础：overflow: hidden;

10.尺寸

解释：width和height大家都很熟悉，但是min-width等等用的可能较少，但是也很有用，它能配合适配效果控制最低或最大