前端--css基础03[盒子模型]

css 基础重点模块

1. 盒子模型（重点）

✔ 网页中的盒子： 指的就是各种标签（可以放内容的标签），一般网页中的盒子都特指 div

✔ 作用：通过盒子实现网页布局。

✔ 组成：

1. 边框（border）: 设置盒子的边框

2. 内容区域： 放置标签内容（内容：标签+文字+图片）

3. 内边距（padding）: 设置内容区域和边框直接的距离

4. 外边距 （margin）: 设置盒子与盒子整体之间的距离

✔ 边框（border）: 复合属性

1. 设置边框的粗细： border-width

2. 设置边框的颜色： border-color

3. 设置边框的样式： border-style: none（没有边框） | solid(实线边框) | dashed(虚线边框) |  dotted(点线边框)

边框合写：

 border: border-width  border-color   border-style;

边框分类：

左边框： border-left 

  border-left-color: 单独设置左边框的颜色
  border-left-width: 单独设置左边框的粗细
  border-left-style: 单独设置左边框的样式（ none（没有边框） | solid(实线边框) | dashed(虚线边框) |  dotted(点线边框)）

右边框： border-right:

  border-right-color: 单独设置右边框的颜色
  border-right-width: 单独设置右边框的粗细
  border-right-style: 单独设置右边框的样式（ none（没有边框） | solid(实线边框) | dashed(虚线边框) |  dotted(点线边框)）

上边框： border-top：

  border-top-color: 单独设置上边框的颜色
  border-top-width: 单独设置上边框的粗细
  border-top-style: 单独设置上边框的样式（ none（没有边框） | solid(实线边框) | dashed(虚线边框) |  dotted(点线边框)）

下边框： border-bottom:
    
  border-bottom-color: 单独设置下边框的颜色
  border-bottom-width: 单独设置下边框的粗细
  border-bottom-style: 单独设置下边框的样式（ none（没有边框） | solid(实线边框) | dashed(虚线边框) |  dotted(点线边框)）

边框其他属性用法介绍：

1. 去掉边框：【一般在网页中会将表单控件中的边框都先去掉】
         
   ✔ 如果想要去掉所有的边框： border: none; 或者  border-stle: none;

   ✔ 如果想要去掉单独的某条边框： 
     例如： border-left: none;  或者 border-left-style: none;

2. 去掉轮廓线:

   ✔ outline-style: none;
   
3. 表格合并边框（只能用在表格中）

   ✔ border-collapse: collapse;

✔ 内边距（padding）[内填充]:
当给一个盒子设置了内边距，用来设置盒子中内容区域和边框之间距离。
内边距合写：

1. 如果使用padding合写设置内边距，如果只设置一个值，代表上，右，下，左四个方向都有距离

2, 如果设置两个值，第一个值上下内边距，第二个值代表左右内边距。

3. 如果设置三个值，第一个值代表上内边距，第二个值代表左右内边距，第三个值代表下内边距

4. 如果设置四个值，分别代表上，右，下，左内边距。

注意： 1. 我们通常给盒子设置的宽度和高度其实是设置盒子的内容区域的大小。
盒子实际大小：

1. 如果我们没有给盒子设置边框或者内边距，那么我们设置的宽度和高度（内容区域大小）等于 盒子在网页中的实际大小

2. 盒子在浏览器中实际大小 = 内容器区域大小(我们设置的宽度和高度) + 边框宽度 + 内边距大小

总结：
✔ 在效果图中测量的大小都是盒子的实际大小

✔ 如果当前盒子又设置了边框或者内边距，要做减法。

✔ 如果代码中计算的结果大于实际测量的结果，那么做对应的减法操作即可.

✔ 外边距（margin）: 用来设置盒子与盒子之间的距离，不会影响盒子大小。
margin-left: 100px;
margin-top: 100px;
margin-right: 100px;
margin-bottom: 100px;
外边距特点：

1. 垂直外边距塌陷：
给子元素设置margin-top的时候，父元素也跟着移动

  解决方案：
   ✔ 给父元素设置边框    
   ✔ 给父元素设置overflow:hidden;

2. 垂直外边距合并：

给元素设置margin-top 和 margin-bottom的时候，margin-top 不会和margin-bottom进行叠加

  会合并，以最大值为准。