「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」
一、盒子模型
1-1、内容区域的宽度和高度
width和height属性默认设置的是盒子内容区域的大小
- 常见取值：数字+px、百分比等
1-2、边框
1-2-1、单个属性
| 作用 | 属性名 | 属性值 |
|---|---|---|
| 边框粗细 | border-width | 数字+px |
| 边框样式 | border-style | 实线：solid、虚线：dashed、点线：dotted |
| 边框颜色 | border-color | 颜色取值 |
1-2-2、连写
- 属性名：border
- 属性值：单个取值的连写，取值之间以空格隔开
- 如：border: 1px solid #ccc;
1-2-3、单方向设置
只给盒子的某个方向单独设置边框
- 属性名：border-方位名词
- 属性值：连写的取值
- 如：border-right: 1px solid #ccc;
1-3、内边距
1-3-1、内边距取值
设置边框与内容区域之间的距离，会撑大盒子
常见取值：
| 取值 | 示例 | 含义 |
|---|---|---|
| 一个值 | padding: 10px; | 上下左右内边距都为10px |
| 两个值 | padding: 10px 20px; | 上下内边距为10px、左右内边距为20px |
| 三个值 | padding: 10px 20px 30px; | 上为10px、左右为20px、下为30px |
| 四个值 | padding: 10px 20px 30px 40px; | 上为10px、右为20px、下为30px、左为40px |
巧记：从上开始赋值，顺时针，如果没有赋值则看对面方向的
1-3-2、单方向设置
只给盒子的某个方向单独设置内边距
- 属性名：padding-方位名词（padding-top、padding-bottom、padding-left、padding-right）
- 属性值：数字+px
1-3-3、盒子实际大小计算
- 盒子宽度 = 左边框+左padding+内容宽度+右padding+右边框
- 盒子高度 = 上边框+上padding+内容高度+下padding+下边框
1-3-4、不会撑大盒子的特殊情况
- 如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
- 此时给子盒子设置左右的padding或者左右的border，不会撑大子盒子
1-3-5、CSS3盒模型（自动内减）
给盒子设置属性box-sizing: border-box; 即可
- 浏览器会自动计算多余大小，自动在内容中减去
1-4、外边距
1-4-1、外边距取值
| 取值 | 示例 | 含义 |
|---|---|---|
| 一个值 | margin: 10px; | 上下左右外边距都为10px |
| 两个值 | margin: 10px 20px; | 上下外边距为10px、左右外边距为20px |
| 三个值 | margin: 10px 20px 30px; | 上为10px、左右为20px、下为30px |
| 四个值 | margin: 10px 20px 30px 40px; | 上为10px、右为20px、下为30px、左为40px |
巧记：从上开始赋值，顺时针，如果没有赋值则看对面方向的
1-4-2、单方向设置
只给盒子的某个方向单独设置外边距
- 属性名：margin-方位名词
- 属性值：数字+px
| 方向 | 属性 | 效果 |
|---|---|---|
| 水平方向 | margin-left | 让当前盒子向右移动 |
| 水平方向 | margin-right | 让右边盒子向右移动 |
| 垂直方向 | margin-top | 让当前盒子向下移动 |
| 垂直方向 | margin-bottom | 让下面盒子向下移动 |
1-4-3、清除默认内外边距
浏览器会默认给部分标签设置默认的margin和padding，一般在项目开始前需要清除这些默认的margin和padding：
- body标签默认有margin: 8px;
- p标签默认有上下的margin
- ul标签默认有上下的margin和padding-left
- ....
解决方式：
选中这些标签后添加：margin: 0; padding: 0;（或结合通配符去除，不推荐）
如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
}
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
margin: 0;
padding: 0;
}
/* * {
margin: 0;
padding: 0;
}*/
</style>
</head>
<body>
<div></div>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
</body>
</html>
1-4-4、外边距正常情况
- 场景：水平布局的盒子，左右的margin正常，互不影响
- 结果：最终两者距离为左右margin的和
1-4-5、外边距折叠现象-合并现象
- 场景：垂直布局(同级元素) 的块级元素，上下的margin会合并，上面元素的margin-bottom会与下面元素的margin-top发生合并
- 结果：最终两者距离为margin的最大值
- 解决方式：只给其中一个盒子设置margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
}
.green {
background-color: green;
/* margin-bottom: 200px; */
}
.orange {
background-color: orange;
margin-top: 200px;
}
</style>
</head>
<body>
<div class="green"></div>
<div class="orange"></div>
</body>
</html>
1-4-6、外边距折叠现象-塌陷现象
- 场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上
- 结果：导致父元素一起往下移动
- 解决方法
- 给父元素设置border-top或者padding-top（分隔父子元素的margin-top）
- 如：border-top: 1px solid transparent;
- 如：padding-top: 1px; （!不能是0px）
- 给父元素设置overflow: hidden
- 给父/子元素添加固定定位/绝对定位/浮动/转为行内块（！不能设置相对定位）
- 给父元素设置border-top或者padding-top（分隔父子元素的margin-top）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>07-外边距合并问题</title>
<style>
#father {
width: 300px;
height: 300px;;
background-color: green;
overflow: hidden;
}
#son {
width: 50%;
height: 50%;
background-color: orange;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="father">
<div id="son"></div>
</div>
</body>
</html>
1-4-7、外边距和内边距无效情况
- 场景：给行内元素设置margin和padding时
- 结果：
- 水平方向的margin和padding布局中有效
- 垂直方向的margin和padding布局中无效
