web前端4--css盒模型
CSS盒子模型是指在Web页面中，每个HTML元素都被看作是一个矩形的盒子，包括内容区域、内边距、边框和外边距。
1、内容区域
在CSS盒模型中，"内容区域"(Content)指的是盒子中用于显示实际内容的区域。这个区域的大小由盒子的`width`(宽度)和`height`(高度)属性来定义。
div{
width: 200px;
height: 200px;
background-color: red;
}2、边框
CSS盒模型中的边框(Border)是围绕在内容区域周围的一条线，用于装饰和区分元素。边框由三个部分组成：边框线、边框样式和边框颜色
- border-width：设置边框的宽度，可以是一个值(应用到所有边)
- border-style：设置边框的样式，可以是`solid`(实线)、`dashed`(虚线)、`dotted`(点线)、double(双线)。
- border-color：设置边框的颜色
- ！！！直接通过border 同时设置宽度 样式 颜色
- border: 5px blue solid;
| `border-top` | 设置顶部边框样式 |
| `border-right` | 设置右侧边框样式 |
| `border-bottom` | 设置底部边框样式 |
| `border-left` | 设置左侧边框样式 |
- border-radius 圆角效果 值越大越圆
border-radius: 20px;
--如果是一个正方形的盒子 值为宽度的一般 变成一个圆
border-radius: 10px 50px 20px 150px;
--如果是四个值 顺序为左上、右上、右下、左下
border-radius: 10px/20px; 水平方向 垂直方向
3、内边距
在CSS中，内边距(padding)用于定义元素内部内容与元素边框之间的空间。内边距可以应用于元素的上、右、下、左四个方向，也可以同时定义所有方向的内边距。
| 属性 | 作用 |
| `padding-top` | 定义元素顶部的内边距。 |
| `padding-right` | 定义元素右侧的内边距。 |
| `padding-bottom` | 定义元素底部的内边距。 |
| `padding-left` | 定义元素左侧的内边距。 |
| `padding` | 可以按照上/右/下/左的顺序定义所有方向的内边距，也可以只定义一个或两个值。 |
4、外边距
在CSS中，外边距(Margin)用于定义元素边框外部的空间，控制元素与其周围元素之间的间距。外边距可以应用于元素的上、右、下、左四个方向，也可以同时定义所有方向的外边距。
| 属性 | 作用 |
| `margin-top` | 定义元素顶部的外边距。 |
| `margin-right` | 定义元素右侧的外边距。 |
| `margin-bottom` | 定义元素底部的外边距。 |
| `margin-left` | 定义元素左侧的外边距。 |
| `margin` | 可以按照上、右、下、左的顺序定义所有方向的外边距，也可以只定义一个或两个值。 |
`margin: 0 auto;` 是一种常见的CSS样式规则，通常用于水平居中
auto 将左右外边距 设置为相等的值
5、外边距合并
外边距合并（Margin Collapsing）是CSS中的一个特性，它描述了在某些情况下相邻元素的外边距会合并（折叠）成一个较大的外边距的现象。外边距合并通常发生在垂直方向上
1、 相邻兄弟元素的上下外边距合并
2、父子垂直外边距合并
3、第一个子元素设置外边距, 父元素没有设置垂直padding或border会将子元素的外边距与父元素外边距合并,合并后导致将子元素的外边距计算到父元素的外边距中
4、父元素设置垂直padding和border,会阻止子元素外边距传递到父元素中
6、怪异盒模型
- 怪异盒模型和标准盒模型的区别在于，width、height所包含的部分不同。
- 标准盒模型width和height只表示content内容区。
- 怪异盒模型的width、height包含content、padding和border部分。
！！! 注意：其区别主要体现在 一个盒模型width：300px ；height：300px；
- 如果设置外边距/内边距/边框
1、标准盒模型--会在盒子原本的宽度高度上加上设置的属性（如设置外边距10px，那么此时除体现内容的外边距外，盒模型的宽度高度分别为310px）
2、怪异盒模型--只在盒子原本的宽度高度基础上体现设置的属性（如设置外边距10px，那么此时除体现内容的外边距外，盒模型的宽度高度依然为300px）
7、默认样式
默认样式是指浏览器在渲染网页时为元素应用的初始样式。
每个HTML元素都有默认样式，这些样式由浏览器厂商根据规范定义, 但是当按照设计图来写网页时，这些默认样式会干扰我们，所以需要清除掉。
```css
/* case 1 最省事，但是最不推荐 */
*{ margin:0; padding:0; list-style:none; border:none;}
/* case 2 相对繁琐，但是是较好选择 */
body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
ol,ul{margin:0;padding:0;list-style:none;}
img{border:none;}
```8、运用实例
