1.盒子模型
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.item {
width: 400px;
padding: 20px;
margin: 30px;
background: #ccc;
border: 4px dashed #900;
}
</style>
</head>
<body>
<div class="item">
仃可厅终不见定的用台力，也朗太五没，呼救承我的六应设仓孔竟次办了好变非设，自者后韩以生，说羊后只惜病承和了也，导貂那九土别说，负侯原诗本太化意之者已魂的其归变，奔气都其天到，朗司脱有郭丹子韩新首天死，斯君联求骂订久韩这为升出得，下不家耳量衣法通为，憾的视。
</div>
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laudantium ad in ex architecto ipsa quibusdam, dolorum adipisci eligendi modi possimus delectus? Nobis dolores a consequatur tempora quis nam expedita accusantium!</div>
</body>
</html>内容（content）： 内容是元素的核心区域，元素中的文本内容和后代元素都显示在内容上。
内边距（padding）：内容与元素边界的距离。
边框（border）：位于元素的边界上。
外边距（margin）：在元素边界之外，是与相邻元素的距离。
1.1盒子模型的相关概念
1.2影响盒子大小的因素
1.3盒子中的内容区域
设置内容区域的宽高的 CSS 属性
1.4元素的默认宽高
默认总宽度 = 父元素内容宽度 - 自身的左右外边距
默认内容宽度 = 父元素内容宽度 - 自身的左右外边距 - 自身的左右内边距 - 自身的左右边框
1.4.1行内元素：
1.4.2行内块元素：
块级元素：
1.5盒子的内边距 padding
相关 CSS 属性
1.5.1padding 设置规则
padding 复合属性的设置规则：
/* 1个值: 上下左右 */
padding: 20px;
/* 2个值： 上下 左右*/
padding: 40px 30px;
/* 3个值： 上 左右 下*/
padding: 10px 20px 30px;
/* 4个值： 上 右 下 左*/
padding: 15px 25px 35px 45px;
1.5.2不同显示模式的元素设置内边距：
1.6边框 border
1.7外边距 margin
1.7.1margin 值设置的规则：
1.7.2margin 复合属性的设置规则：
1.7.3不同显示模式的元素设置外边距：
1.7.4margin 塌陷
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrapper {
width: 800px;
/* height: 400px; */
background: #ccc;
/* 方案一 父元素有边框 */
/* border: 1px solid #f00; */
/* 方案二： 父元素有内边距 */
/* padding: 10px; */
/* 方案三： 父元素开启BFC */
/* overflow: hidden; */
}
.box {
/* display: inline-block; */
margin-left: 100px;
width: 600px;
text-align: center;
font-size: 40px;
line-height: 100px;
color: #fff;
background: #900;
}
.box01 {
margin-top: 60px;
}
.box02 {
margin-top: 20px;
}
.box03 {
margin-top: 20px;
margin-bottom: 100px;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis, minus!</div>
<div class="wrapper">
<div class="box box01">自言惶，死降就，就。</div>
<div class="box box02">自言惶，死降就，就。</div>
<div class="box box03">自言惶，死降就，就。</div>
</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis, minus!</div>
</body>
</html>1.7.4.1 解决 margin 塌陷
1.7.5 margin 合并（不用解决）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrapper {
padding: 20px;
width: 600px;
height: 400px;
background: #ccc;
}
.box {
/* display: inline-block;
margin-left: 20px;
margin-right: 20px; */
width: 100px;
height: 100px;
}
.box01 {
margin-bottom: 30px;
background: #900;
}
.box02 {
margin-top: 40px;
background: #080;
}
.box03 {
background: #099;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box box01"></div>
<div class="box box02"></div>
<div class="box box03"></div>
</div>
</body>
</html>1.8内容溢出
auto 和 scroll 的区别：
1.9隐藏元素
1. 设置 visibility:hidden; 元素隐藏但是占据位置
2. 设置 display:none; 元素彻底隐藏，不占据位置
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrapper {
padding: 20px;
width: 600px;
height: 400px;
background: #ccc;
}
.box {
width: 300px;
height: 100px;
}
.box01 {
background: #900;
}
.box02 {
background: #080;
visibility: hidden;
/* display: none; */
/* visibility: visible;
visibility: hidden;
display: none; */
}
.box03 {
background: #099;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box box01"></div>
<div class="box box02"></div>
<div class="box box03"></div>
</div>
</body>
</html>可以隐藏没有任何内容的div
2.样式继承和自带样式
2.1哪些样式可以被后代元素继承：
1. 字体样式 font-size、font-weight、font-style font-family、font
2. 文字颜色 color
3. 文本样式 letter-spacing、word-spacing、text-decoration、text-indent、text-align、line-height （vertical-align 不可以被继承）
2.2自带样式（用户代理样式）
标题h1~h6 自带 font-size、font-weight、上下外边距
p 自带 上下外边距
em 自带 font-style
strong 自带 font-weight
a 自带 color、text-decoration、cursor
ul、ol 自带 padding-left、上下外边距
2.3继承的样式、自带的样式、直接设置的样式
直接设置的样式 > 自带的样式 > 继承的样式