web---CSS基础知识

AlluzeYu

已于 2023-08-23 14:54:14 修改

阅读量1.5k

点赞数 3

分类专栏： WEB 文章标签： css

于 2021-06-23 11:15:34 首次发布

本文链接：https://blog.csdn.net/allurelover/article/details/117920590

版权

WEB 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

文章目录

1、CSS简介
- 1.1 什么是CSS
- 1.2 CSS入门案例
- 1.3 执行结果
2、CSS编写的位置(三种方式)
- 2.1 编写位置
- 2.2 案例
- 2.3 运行结果
3、CSS的基本语法
- 3.1 基本语法格式
- 3.2 案例
- 3.3 运行结果
4、CSS常用选择器
- 4.1、元素选择器：
- 4.2、 id选择器
- 4.3、类选择器（class选择器）
- 4.4、通配选择器：
- 4.5、案例
- 4.6、运行结果
5、CSS复合选择器
- 5.1 交集选择器
- 5.2 并集选择器
- 5.3 案例
- 5.4 运行结果
6、CSS关系选择器
- 6.1 子代选择器
- 6.2 后代选择器
- 6.3 兄弟选择器
7、属性选择器
- 7.1 属性选择器分类
- 7.2 案例
- 7.3 运行结果
8、伪类选择器
- 8.1 伪类、否定伪类
- 8.2 案例
- 8.3 运行结果
9、超链接的伪类
- 9.1 伪类分类
- 9.2 案例
- 9.3 运行结果
10、样式的继承
- 10.1 样式继承
- 10.2 案例
- 10.3 运行结果
11、选择器的权重
- 11.1 选择器的级别
- 11.2 案例
- 11.3 运行结果
12、像素和百分比和em和rem
- 12.1 尺寸介绍
- 12.2 案例
- 12.3 运行结果
13、颜色RGB
- 13.1 颜色单位表示方式
- 13.2 案例
- 13.3 运行结果
14、块元素和行元素在文档流中的特点
- 14.1 什么是文档流
- 14.2 元素特在文档流中的特点（块元素和行元素）
- 14.3 案例
- 14.4 运行结果
15、CSS基础盒子模型
- 15.1 什么是盒子模型
- 15.2 盒子的组成
- 15.3 名词解释
- 15.4 案例
- 15.5 运行结果
- 15.6 查看元素
16、盒子模型 - 边框
- 16.1 边框
- 16.2 案例
- 16.3 运行结果
19、盒子模型-内边距
- 19.1 内边距范围
- 19.2 案例
- 19.3 运行结果
- 19.4 查看控制台视图
20、盒子模型-外边距
- 20.1 外边距范围
- 20.2 案例
- 20.3 运行结果
- 20.4 查看控制台视图
21、盒子模型-水平方向的布局
- 21.1 水平布局介绍
- 21.2 案例
- 21.3 运行结果
- 21.4 查看控制台视图
22、盒子模型-垂直方向的布局
- 22.1 溢出和处理溢出
- 22.2 案例
- 22.3 运行结果
23、外边距的折叠
- 23.1 外边距折叠原理
- 23.2 案例
- 23.3 运行结果

1、CSS简介

1.1 什么是CSS

CSS 指的是层叠样式表* (Cascading Style Sheets)
- CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
- CSS 节省了大量工作。它可以同时控制多张网页的布局
- 外部样式表存储在 CSS 文件中
也称级联样式表。

1.2 CSS入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css介绍</title>
	</head>
	<body>
		<!-- 
			网页分成三个部分
				HTML 结构
				CSS  表现
				JavaScript  行为
				
			CSS : 层叠样式表
				  网页上实际是一个多层的结构，通过css可以为网页的每一个层来设置样式
				  而最终，我们只能看到网页的最上面一层
				  总之一句话：css用来设置网页上的元素的样式
		 -->
		 <!-- 使用css 修改网页样式
				第一种方式： （内联样式，行内样式）
							在标签内部通过style属性来设置元素的样式
							style属性中设置：样式名：样式值
							实际开发中不建议使用
				不足之处：使用内联样式，样式只能对一个标签生效，通用性不强，维护不方便
		 -->
		 <p style="color: blue;font-size: 60px;">床前明月光,疑似地上霜</p>
	</body>
</html>

1.3 执行结果

2、CSS编写的位置(三种方式)

2.1 编写位置

2.1.1 第一种方式：（内联样式表，行内样式表）

在标签内部通过style属性来设置元素的样式
style属性中设置：样式名：样式值
实际开发中不建议使用
不足之处：
- 使用内联样式，样式只能对一个标签生效，
  - 通用性不强，维护不方便

2.1.2 第二种方式： (内部样式表)

将样式编写在head标签中的style标签中
通过css选择器选中元素，并为元素设置不用样式
好处：
- 可以同时为多个元素设置样式
- 修改时只需要修改一处，即可全部应用
- 内部样式表，更加方便对央视进行复用
缺点：
- 内部样式表只能在当前页面起作用
- 当前页面的css样式不能款页面使用

2.1.3 第三种方式：（外部样式表）

通过link标签映入外部css样式表文件
link的作用：
1. 定义文档与外部资源的关系；
2. 是链接样式表。
link属性：
- rel属性：用于设置对象和链接目的间的关系
- Stylesheet属性值：表示定义一个外部加载的样式表
好处：
- 外部样式表需要通过link标签进行引入
- 意味着只要使用这些样式的网页都可以对其进行引用
- 使得外部样式表可以在不同页面中进行复用
- 推荐在开发中使用
- 此方式可以使用到浏览器的缓存方式，加快网页的加载速度，提高用户的体验感

2.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS编写的位置</title>
		<!-- 内部样式表 -->
		<style type="text/css">
			/* 为所有的p元素设置样式 */
			p{
				color: brown;
				font-size: 40px;
			 }
		</style>
		<!-- 引入外部外部样式表 -->
		<link rel="stylesheet" href="css/style.css"/>
	</head>
	<body>
		<!-- 
			第一种方式： （内联样式表，行内样式表）
						在标签内部通过style属性来设置元素的样式
						style属性中设置：样式名：样式值
						实际开发中不建议使用
						不足之处：
							使用内联样式，样式只能对一个标签生效，
							通用性不强，维护不方便
		-->
		<h1 style="color: blue;font-size: 60px;">唐诗宋词</h1>
		
		<!-- 
			第二种方式： (内部样式表)
						将样式编写在head标签中的style标签中
						通过css选择器选中元素，并为元素设置不用样式
						好处：
							可以同时为多个元素设置样式
							修改时只需要修改一处，即可全部应用
							内部样式表，更加方便对央视进行复用
						缺点：
							内部样式表只能在当前页面起作用
							当前页面的css样式不能款页面使用
		 -->
		<p>夕阳西下，断肠人在天涯</p>
		<p>生于忧患，死于安乐</p>
		
		<!-- 
			第三种方式：（外部样式表）
						通过link标签映入外部css样式表文件
						link的作用：
							1. 定义文档与外部资源的关系；
							2. 是链接样式表。
						link属性：
							rel属性：用于设置对象和链接目的间的关系
							Stylesheet属性值：表示定义一个外部加载的样式表
						好处：
							外部样式表需要通过link标签进行引入
							意味着只要使用这些样式的网页都可以对其进行引用
							使得外部样式表可以在不同页面中进行复用
							推荐在开发中使用
		-->
		 <h3>落霞与孤鹜齐飞，秋水共长天一色</h3>
	</body>
</html>

2.3 运行结果

3、CSS的基本语法

3.1 基本语法格式

CSS 规则集（rule-set）由选择器和声明块组成

选择器：
- 通过选择器可以选中页面中的指定元素
- 比如p的作用就是选中页面中所有得p元素
声明块：
- 通过声明块来指定要为元素设置的样式
- 声明块由一个一个声明组成
- 声明是一个名值对
  - 一个样式声明对应一个声明值，
  - 名和值之间使用 : 隔开，以 ; 结尾

3.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS的基础语法</title>
	</head>
	<style type="text/css">
		/* style标签范围内，就不属于html的犯愁了，在此区域需要遵守css的语法
			
			CSS的基本语法：
				选择器 声明块
				选择器：通过选择器可以选中页面中的指定元素
						比如p的作用就是选中页面中所有得p元素
				声明块：通过声明块来指定要为元素设置的样式
						声明块由一个一个声明组成
						声明是一个名值对
							一个样式声明对应一个声明值，
							名和值之间使用 : 隔开，以 ; 结尾
		 
		 */
		p{
			color: red;
			font-size: 30px;
		}
		
	</style>
	<body>
		<p>今天天气很热</p>
		<p>今天是五月初六</p>
		<h1>今天一点也不热</h1>
	</body>
</html>

3.3 运行结果

4、CSS常用选择器

常用选择器有：元素选择器、id选择器、类选择器、通配选择器（*号选择器）

4.1、元素选择器：

作用：根据标签名来选中指定的元素
语法：标签名{}
案例：将所有的段落设置为红色字体

4.2、 id选择器

作用：根据元素的id属性值，选中一个元素,id具有唯一性
语法：#id属性值{}
案例：将’今安在‘ 设置成黄色

4.3、类选择器（class选择器）

作用：根据标签的class属性选中一组元素
语法：.class属性值{}
案例：将最后两句变成蓝色

4.4、通配选择器：

作用：选中页面中的所有元素
语法：*{}
案例：所有div设置颜色为绿色

4.5、案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css常用选择器</title>
		<style type="text/css">
			/* 1、元素选择器：
				  作用：根据标签名来选中指定的元素
				  语法：标签名{}
				  案例：将所有的段落设置为红色字体
				  
			`  2. id选择器
				  作用：根据元素的id属性值，选中一个元素,id具有唯一性
				  语法：#id属性值{}
				  案例：将’今安在‘ 设置成黄色 
				  
			   3、类选择器（class选择器）
				  作用：根据标签的class属性选中一组元素
				  语法：.class属性值{}
				  案例：将最后两句变成蓝色
				  
			   4、统配选择器：
				  作用：选中页面中的所有元素
				  语法：*{}
				  案例：所有div设置颜色为绿色
			*/
		   p{
			   color: red;
		   }
		   
		   h1{
			   color: green;
		   }
		   
		   #yellow{
			   color: yellow;
		   }
		   
		   .blue{
			   color: blue;
		   }
		   
		   *{
			   color: #7FFF00;
		   }
		</style>
	</head>
	<body>
		<h1>行路难</h1>
		<p>行路难</p>
		<p>行路难</p>
		<p>多歧路</p>
		<p id="yellow">今安在</p>
		<!-- 
			class是标签的属性，他和id类似
			不同的是class可以重复使用
			可以通过class属性来给元素分组
			可以同时为一个元素设置多个class属性值，多个属性值之间使用空格隔开
		 -->
		<p class="blue">长风破浪会有时</p>
		<p class="blue">直挂云帆济沧海</p>
		
		<h3>德州小强</h3>
		<div>小牛队</div>
		<div>马刺队</div>
		<div>马赛克队</div>
	</body>
</html>

4.6、运行结果

5、CSS复合选择器

5.1 交集选择器

交集选择器：
     作用：选中同时符合多个条件的元素
     语法：选择器1选择器2选择器3{}
     注意：交集选择器中如果有元素选择器，必须以元素选择器开头
     案例：设置div的字体为红色

5.2 并集选择器

并集选择器（选择器分组）
作用：同时选中多个选择器对应的元素
语法：选择器1,选择器2,选择器3{}
案例：设置span和p的颜色为蓝色
设置h1和h2的颜色为紫色

5.3 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS复合选择器</title>
		<style type="text/css">
			/* 
				交集选择器：
					作用：选中同时符合多个条件的元素
					语法：选择器1选择器2选择器3{}
					注意：交集选择器中如果有元素选择器，必须以元素选择器开头语
					案例：设置div的字体为红色
			 */
			div.red{
				color: red;
			}
			span#yellow{
				color: yellow;
			}
			
			/* 
				并集选择器（选择器分组）
					作用：同时选中多个选择器对应的元素
					语法：选择器1,选择器2,选择器3{}
					案例：设置span和p的颜色为蓝色
						  设置h1和h2的颜色为紫色
			 */
			.sp,.pp{
				color: #0000FF;
			}
			h1,h2{
				color: blueviolet;
			}
			
		</style>
	</head>
	<body>
		<!-- 交集 -->
		<div class="red">我是div</div>
		<p class="red">我是p元素</p>
		<span id="yellow">我是span</span>
		
		<br>
		
		<!-- 并集 -->
		<span class="sp">我的颜色是蓝色</span>
		<p class="pp">我的颜色也是蓝色</p>
		<h1>天净沙</h1>
		<h2>秋思</h2>
		
		<br>
		
		
	</body>
</html>

5.4 运行结果

6、CSS关系选择器

父元素：直接包含子元素的元素叫做父元素
子元素：直接被父元素包含的元素的子元素
祖先元素：直接或间接包含后代元素的元素叫做祖先元素，一个元素的父元素也是它的祖先元素
后代元素：直接或间接被祖先元素包含的元素叫做后代元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素是兄弟元素

6.1 子代选择器

6.1.1 子代

子元素选择器：
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素{}
案例：为div的子元素span的字体颜色为红色

6.1.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关系选择器-子代选择器</title>
		<style type="text/css">
			/* 
				子元素选择器：
					作用：选中指定父元素的指定子元素
					语法：父元素 > 子元素{}
					案例：为div的子元素span的字体颜色为红色 
			*/
			div>span{/* 元素 */
				color: red;
			}
			div.box>span{/* 类 */
				color: green;
			}
			#bid>span{/* id */
				color: yellow;
			}
		</style>
	</head>
	<body>
		<!-- 
			父元素：直接包含子元素的元素叫做父元素
			子元素：直接被父元素包含的元素的子元素
			祖先元素：直接或间接包含后代元素的元素叫做祖先元素
					  一个元素的父元素也是它的祖先元素
			后代元素：直接或间接被祖先元素包含的元素叫做后代元素
					  子元素也是后代元素
			兄弟元素：拥有相同父元素的元素是兄弟元素
		 -->
			<div>
				<span>我是div中的span元素</span>
			</div>
			
			<br>
			<div class="box">
				<span>设置颜色为green</span>
			</div>
			
			<br>
			<div id="bid">
				<span>设置颜色为黄色</span>
			</div>
	</body>
</html>

6.1.3 运行结果

6.2 后代选择器

6.2.1 后代

后代元素选择器：
作用：选中指定元素内的指定后代元素
语法：祖代后代（祖代和后代中间使用空格）

6.2.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关系选择器-后代选择器</title>
		<style type="text/css">
			
			/* 
				后代元素选择器：
					作用：选中指定元素内的指定后代元素
					语法：祖代 后代（祖代和后代中间使用空格）
			 */
			div span{ /* 后代*/
				color: red;
			}
			div>p span{ /* 子代 后代*/
				color: #008000;
			}
		</style>
	</head>
	<body>
		<!-- 
			父元素：直接包含子元素的元素叫做父元素
			子元素：直接被父元素包含的元素的子元素
			祖先元素：直接或间接包含后代元素的元素叫做祖先元素
					  一个元素的父元素也是它的祖先元素
			后代元素：直接或间接被祖先元素包含的元素叫做后代元素
					  子元素也是后代元素
			兄弟元素：拥有相同父元素的元素是兄弟元素
		 -->
			<div>
				<p>
					我是div中的p元素
					<span>我是p元素中的span元素</span>
				</p>
				<span>我是div元素中的span元素</span>
			</div>
	</body>
</html>

6.2.3 运行结果

6.3 兄弟选择器

6.3.1 兄弟

兄弟元素选择器：
- 选择紧挨着的兄弟元素
- 作用：选中相同父元素的下一个兄弟元素，只找紧挨着的兄弟元素
- 语法：兄弟+兄弟

选择所有的兄弟元素
作用：选中相同父元素的下面的所有兄弟元素，不包含当前元素的上面的兄弟元素
语法：兄弟~兄弟

6.2.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关系选择器-后代选择器</title>
		<style type="text/css">
			
			/* 
				兄弟元素选择器：
					选择紧挨着的兄弟元素
					作用：选中相同父元素的下一个兄弟元素，只找紧挨着的兄弟元素
					语法：兄弟+兄弟
					
					选择所有的兄弟元素
					作用：选中相同父元素的下面的所有兄弟元素，不包含当前元素的上面的兄弟元素
					语法：兄弟~兄弟
			 */
			div+div{
				color: blueviolet;
			}
			p~span{
				color: greenyellow;
			}
		</style>
	</head>
	<body>
		<!-- 
			父元素：直接包含子元素的元素叫做父元素
			子元素：直接被父元素包含的元素的子元素
			祖先元素：直接或间接包含后代元素的元素叫做祖先元素
					  一个元素的父元素也是它的祖先元素
			后代元素：直接或间接被祖先元素包含的元素叫做后代元素
					  子元素也是后代元素
			兄弟元素：拥有相同父元素的元素是兄弟元素
		 -->
			<div>
				<span>我是div元素中的span元素</span>
				<p>
					我是div中的p元素
					<span>我是p元素中的span元素</span>
				</p>
				<span>我是div元素中的span元素</span>
				<span>我是div元素中的span元素</span>
				<span>我是div元素中的span元素</span>
				<span>我是div元素中的span元素</span>
			</div>
			<div>我是上面div的兄弟元素</div>
	</body>
</html>

6.3.3 运行结果

7、属性选择器

7.1 属性选择器分类

属性选择器：
【属性名】：旋则含有指定属性的元素
【属性名=属性值】：选择含有指定属性和属性值的元素
【属性名^=属性值】：选择属性值以指定值开头的元素
【属性名$=属性值】：选择属性值以指定值结束的元素
【属性名*=属性值】：选择属性值中含有某个特定值的元素

7.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性选择器</title>
		<style type="text/css">
		/* 
			属性选择器：
				【属性名】：旋则含有指定属性的元素
				【属性名=属性值】：选择含有指定属性和属性值的元素
				【属性名^=属性值】：选择属性值以指定值开头的元素
				【属性名$=属性值】：选择属性值以指定值结束的元素
				【属性名*=属性值】：选择属性值中含有某个特定值的元素
		 */
			div[title]{
				color: orange;
			}
			p[title=rain]{
				color: #0000FF;
			}
			span[title^=qaz]{
				color: #19c84b;
			}
			span[title$=qaz]{
				color: chocolate;
			}
			span[title*=we]{
				color: #FFA500;
			}
		</style>
	</head>
	<body>
		<div title="abc">今天在下雨</div>
		<div title="abcdef">今天在下雨</div>
		<div title="helloabc">今天在下雨</div>
		<div>今天在下雨</div>
		
		<p title="rain">今天在下雨</p>
		
		<span title="qazzzz">今天业绩完成</span><br>
		<span title="qazwsx">今天业绩完成</span><br>
		<span title="hiqaz">今天业绩完成</span><br>
		<span title="qwer">今天业绩完成</span><br>
		<span>今天业绩完成</span><br>
		
		
		
	</body>
</html>

7.3 运行结果

8、伪类选择器

8.1 伪类、否定伪类

伪类选择器：（不存在的类特殊的类）
- 作用：用来描述一个元素的页数状态
- 语法：伪类一般情况下都是使用 : 开头
      : first-child 表示对一个子元素
      : last-child 表示最后一个子元素
      : nth-child() 表示第n个子元素,
          特殊值是n，表示全部选中，n的范围是0到正无穷
          2n/even 表示选中全部的偶数位元素
          2n+1/odd 表示选中全部的奇数位元素
案例：将ul中的第一个、最后一个、任意一个、li设置成红色

                :first-of-type
                :last-of-type
                :nth-of-type()
这几个伪类的功能和上述类似，不同点就是他们在同类元素中进行排序

否定伪类
:not() 否定伪类
作用：将符合条件的元素从选择器中去除

8.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
	</head>
	<style type="text/css">
		/* 
			伪类选择器：（不存在的类 特殊的类）
				作用：用来描述一个元素的页数状态
				语法：
					伪类一般情况下都是使用 : 开头
					: first-child  表示对一个子元素
					: last-child  表示最后一个子元素
					: nth-child() 表示第n个子元素,
						特殊值是n，表示全部选中，n的范围是0到正无穷
						2n/even 表示选中全部的偶数位元素
						2n+1/odd  表示选中全部的奇数位元素
				案例：将ul中的第一个、最后一个、任意一个、li设置成红色
				
					:first-of-type
					:last-of-type
					:nth-of-type()
					这几个伪类的功能和上述类似，不同点就是他们在同类元素中进行排序
			
					
					
		 */
		ul>li:first-child{
			color: #0000FF;
		}
		ul>li:last-child{
			color: #FF0000;
		}
		ul>li:nth-child(3){
			color: #19C84B;
		}
		
		/* 
			:not() 否定伪类
				作用：将符合条件的元素从选择器中去除
		 */
		ol>li:not(:nth-child(2)){
			color: #8A2BE2;
		}
	</style>
	<body>
		<ul>
			<li>第1个</li>
			<li>第2个</li>
			<li>第3个</li>
			<li>第4个</li>
			<li>第5个</li>
		</ul>
		<ol>
			<li>第1个</li>
			<li>第2个</li>
			<li>第3个</li>
			<li>第4个</li>
			<li>第5个</li>
		</ol>
	</body>
</html>

8.3 运行结果

9、超链接的伪类

9.1 伪类分类

visited:修饰访问过的链接
link:修饰表示没有访问过的链接
hover:用来表示鼠标移入的状态
active:用来表示鼠标点击的状态

9.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接的伪类</title>
		<style type="text/css">
			/* 
				visited:修饰访问过的链接 
				link:修饰表示没有访问过的链接
				hover:用来表示鼠标移入的状态
				active:用来表示鼠标点击的状态
			*/
			a:visited{
				color: #FF0000;
			}
			a:link{
				color: #0000FF;
			}
			a:hover{
				color: greenyellow;
				font-size: 20px;
			}
			a:active{
				color: #FFFF00;
			}
		</style>
	</head>
	<body>
		<a href="http://www.jd.com"/>访问过的超链接</a>
		
		<br/>
		
		<a href="http://www.tianmao.com"/>没有访问的超链接</a>
	</body>
</html>

9.3 运行结果

10、样式的继承

10.1 样式继承

样式的继承：
      我们为一个元素设置样式的同时，
      也会应用到此元素的后代元素之上
      继承是发生在祖先和后代之间的
      继承的设计是为了方便我们开发，
      利用继承我们可以将通用的样式同意设置到共同的元素之上，这样只需要设置一次
注意：
- 并不是所有的样式都会被继承，布局相关的，背景相关的不会被继承

10.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>样式的继承</title>
		<style type="text/css">
			/* 
				样式的继承：
					我们为一个元素设置样式的同时，
					也会应用到此元素的后代元素之上
					继承是发生在祖先和后代之间的
					继承的设计是为了方便我们开发，
						利用继承我们可以将通用的样式同意设置到共同的元素之上，
						这样只需要设置一次
					注意：并不是所有的样式都会被继承，
						  布局相关的，背景相关的不会被继承
			 */
			p{
				color: #0000FF;
			}
			div{
				color: #19C84B;
			}
		</style>
	</head>
	<body>
		<p>
			我是p元素
			<span>我是p元素中的span元素</span>
		</p>
		
		<div>
			我是div
			<span>
				我是div中的spoan元素
				<em>我是span中的em元素</em>
			</span>
		</div>
	</body>
</html>

10.3 运行结果

11、选择器的权重

11.1 选择器的级别

选择器的权重级别：
- 内敛样式：1,0,0,0 最高
- id选择器：0.1,0,0 高
- 类和伪类选择器：0,0,1,0 中
- 元素选择器：0,0,0,1 次低
- 通配选择器：0,0,0,0 最低
比较优先级时：
- 需要将所有的选择器的优先级进行叠加
- 最后优先级越高，就越先显示（分组选择器是单独计算的）
- 选择器的叠加不会超过最大数量及，
- 比如类选择器叠加永远不会超过id选择器的数量级

11.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器的权重</title>
		<style type="text/css">
			/* 
				选择器的权重级别：
					内敛样式：1,0,0,0 		最高
					id选择器：0.1,0,0 		高
					类和伪类选择器：0,0,1,0 	中
					元素选择器：0,0,0,1 		次低
					通配选择器：0,0,0,0 		最低
				比较优先级时，需要将所有的选择器的优先级进行叠加
							 最后优先级越高，就越先显示（分组选择器是单独计算的）
							 选择器的叠加不会超过最大数量及，
							 比如类选择器叠加永远不会超过id选择器的数量级
							 
			 */
			div{
				color: #FF0000; /* 元素选择器最低*/
			}
			.block{
				color: #19C84B; /* 类选择器>元素选择器*/
			}
			#box{
				color: #0000FF; /* id选择器>类选择器*/
			}
			div#box{ 
				color: aqua;  /* 元素选择器+id选择器 > id选择器*/
			}
			.block{
				background-color: #8A2BE2; /* 内敛样式的优先级最高*/
			}
			
			
		</style>
	</head>
	<body>
		<div id="box" class="block" style="background: hotpink;">我是一个div</div>
	</body>
</html>

11.3 运行结果

!import 的作用

12、像素和百分比和em和rem

12.1 尺寸介绍

长度单位：
- 像素：
  - 屏幕（显示屏）：实际上是由一个一个的小点构成的，不同屏幕的像素大小是不相同的，像素越小的品目显示的电脑岳清晰，越小越细腻，同样的200px。在不同的设备下，显示效果不一样
- 百分比：
  - 也可以将属性值设置成相对于其父元素属性的百分比
    设置百分比可以使子元素跟随父元素的变化而变化
- em:
  - 是相对于元素的字体大小来计算，1em=1font-size=16px
    em的大小会跟着字体大小的改变而改变
- rem:
  - 是相对于根元素的字体的大小改变而改变
    根元素的默认字体大小是font-size:16px

12.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>像素和百分比</title>
		<style type="text/css">
			/* 
				长度单位：
					像素	:屏幕（显示屏）：实际上是由一个一个的小点构成的
						不同屏幕的像素大小是不相同的，像素越小的品目显示的电脑岳清晰
						越小越细腻
						同样的200px。在不同的设备下，显示效果不一样
						
					百分比：也可以将属性值设置成相对于其父元素属性的百分比
						    市值百分比可以使子元素跟随父元素的变化而变化
							
					em:是相对于元素的字体大小来计算，1em=1font-size=16px
						em的大小会跟着字体大小的改变而改变
					
					rem:是相对于根元素的字体的大小改变而改变
						根元素的默认字体大小是font-size:16px
					
						
			 */
			#box{
				width: 200px;
				height: 200px;
				background: orange;
			}
			#box1{
				width: 50%;
				height: 50%;
				background-color: #0000FF;
			}
			#box2{
				font-size: 10px;
				width: 10em;
				height: 10em;
				background-color: #8A2BE2;
			}
			#box3{
				width: 10rem;
				height: 10rem;
				background-color: hotpink;
			}
			html{
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="box1"></div>
		</div>
		
		<div id="box2"></div>
		<div id="box3"></div>
	</body>
</html>

12.3 运行结果

13、颜色RGB

13.1 颜色单位表示方式

1、直接使用颜色的名称设置字体或者背景颜色 red green pink blue等

2、RGB值：
- 作用：RGB通过三种颜色的不同浓度来调配出不同的颜色
- 代表：R->red红色 G->green绿色 B->blue蓝色
- 范围：每一种颜色的范围：0-255之间或者是 0%-100%之间
- 语法：RGB(红色,绿色,蓝色)

3、RGBA:
- 作用：就是在rgb的基础上添加一个a值，表示不透明
- 括号内容值：需要四个值，前三个和rgb一样，第四个值表示透明度
- 透明度a的值： 1 表示完全不透明，.5表示半透明，0 表示完全透明

4、十六进制的RGB值：
- 语法：#红色绿色蓝色
- 颜色浓度：00-ff ，颜色浓度递增，如果颜色两位两位重复，可以简写
- 十六进制的单位数值16个，范围是0.1.2.3.4.5.6.7.8.9.a.b.c.d.e.f

5、HSL值和HSLA值
       H：色相（0-360）
       S：饱和度，颜色的浓度（0%-100%）
       L：亮度：颜色的亮度）(0%-100%)
       A：颜色的透明度（0-1）

13.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>颜色RGB</title>
		<style type="text/css">
			/* 
				颜色单位：
					1、直接使用颜色的名称设置字体或者背景颜色 red green pink blue等
					
					2、RGB值：
								作用：RGB通过三种颜色的不同浓度来调配出不同的颜色
								代表：R->red红色 G->green绿色 B->blue蓝色
								范围：每一种颜色的范围：0-255之间 或者是 0%-100%之间
								语法：RGB(红色,绿色,蓝色)
								
					3、RGBA:		
							作用：就是在rgb的基础上添加一个a值，表示不透明
								 需要四个值，前三个和rgb一样，第四个值表示透明度
								 1 表示完全不透明，.5表示半透明，0 表示完全透明
								 
					4、十六进制的RGB值：
							语法：#红色绿色蓝色
							颜色浓度：00-ff ，颜色浓度递增，如果颜色两位两位重复，可以简写
							十六进制的单位数值16个，范围是0.1.2.3.4.5.6.7.8.9.a.b.c.d.e.f
						
					5、HSL值和HSLA值
							H：色相（0-360）
							S：饱和度，颜色的浓度 （0%-100%）
							L：亮度：颜色的亮度 ）(0%-100%)
							A：颜色的透明度 （0-1）
			 */
			#box{
				width:200px;
				height: 200px;
				background-color: pink;
			}
			#box1{
				width:200px;
				height: 200px;
				background-color: rgb(255,0,0);/* 红色 */
			}
			#box2{
				width:200px;
				height: 200px;
				background-color: rgb(0,255,0);/* 绿色 */
			}
			#box3{
				width:200px;
				height: 200px;
				background-color: rgb(0,0,255);/* 蓝色 */
			}
			#box4{
				width:200px;
				height: 200px;
				background-color: rgba(100,100,100,.5);/* .5 表示半透明 */
			}
			#box5{
				width:200px;
				height: 200px;
				background-color:#FF0000;/* 红色 */
			}
			#box6{
				width:200px;
				height: 200px;
				background-color:#00FF00;/* 绿色 */
			}
			#box7{
				width:200px;
				height: 200px;
				background-color:#0000FF;/* 蓝色 */
			}
			#box8{
				width:200px;
				height: 200px;
				/* background-color:#AACCFF*/
				background-color: #ACF;/* 两位一样可以简写 */
			}
			#box9{
				width:200px;
				height: 200px;
				background-color: hsla(300,88%,77%,0.555);
			}
			
			
		</style>
	</head>
	<body>
		<div id="box"></div>
		<div id="box1"></div>
		<div id="box2"></div>
		<div id="box3"></div>
		<div id="box4"></div>
		<div id="box5"></div>
		<div id="box6"></div>
		<div id="box7"></div>
		<div id="box8"></div>
		<div id="box9"></div>
	</body>
</html>

13.3 运行结果

14、块元素和行元素在文档流中的特点

14.1 什么是文档流

文档流：normal flow
- 网页是一个多层的结构，一侧叠加的一层，通过css可以为每一层设置样式，作为用户，只能看到最上面的一层，这些层中，最底下的一层就是文档流，文档流是网页的基础
- 我们创建的元素默认都是在文档流中进行排列的，元素主要存在两种状态：元素在文档流、元素脱离文档流

14.2 元素特在文档流中的特点（块元素和行元素）

1、块元素：
- 块元素在文档中独占一行,自上向下垂直排列
- 默认宽度是父元素的全部（会把父元素充满，此时的父元素的body）
- 默认高度是被内容撑开的高度(被子元素撑开的高度)

2、行元素：
- 行内元素不会独占一行，只占自身的大小
- 行内元素在页面中自左向右排列
- 如果一行之中不能容纳下所有的行内元素，则会换到第二行自左向右怕列，类似于书写规则自左向右的
- 行内元素的默认高度和宽度都是被内容撑开

14.3 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文档流</title>
		<style type="text/css">
			#box{
				background-color: #A52A2A;
			}
			#box1{
				width: 100px;
				background-color: #ffff7f;
			}
			#box2{
				width: 100px;
				background-color: #19C84B;
			}
			span{
				background-color: #FFA500;
			}
		</style>
	</head>
	<body>
		<!-- 
			文档流：normal flow
				   网页是一个多层的结构，一侧叠加的一层
				   通过css可以为每一层设置样式
				   作为用户，只能看到最上面的一层
				   这些层中，最底下的一层就是文档流，文档流是网页的基础
				   我们创建的元素默认都是在文档流中进行排列的
				   元素主要存在两种状态：元素在文档流、元素脱离文档流
			
			元素在文档流中的特点：
				块元素：
					块元素在文档中独占一行,自上向下垂直排列
					默认宽度是父元素的全部（会把父元素充满，此时的父元素的body）
					默认高度是被内容撑开的高度(被子元素撑开的高度)
					
				行元素：
					行内元素不会独占一行，只占自身的大小
					行内元素在页面中自左向右排列
					如果一行之中不能容纳下所有的行内元素，则会换到第二行自左向右怕列
					类似于书写规则自左向右的
					行内元素的默认高度和宽度都是被内容撑开
		 -->
		 
		 <div id="box">我是div</div>
		 <div id="box1">我是div1</div>
		 <div id="box2">我是div2</div>
		 <span>我是span元素1</span>
		 <span>我是span元素2</span>
		 <span>我是span元素3</span>
		 <span>我是span元素4</span>
		 <span>我是span元素5</span>
		 <span>我是span元素6</span>
		 <span>我是span元素7</span>
		 <span>我是span元素8</span>
		 <span>我是span元素9</span>
		 <span>我是span元素10</span>
	</body>
</html>

14.4 运行结果

15、CSS基础盒子模型

15.1 什么是盒子模型

当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）

15.2 盒子的组成

每个盒子由四个部分组成，其效用由它们各自的边界（Edge）所定义，盒子的四个组成区域，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

15.3 名词解释

内容区域 content area：
- 由内容边界限制，容纳着元素的“真实”内容，
- 例如文本、图像，或是一个视频播放器。它的尺寸为内容宽度（或称 content-box 宽度）和内容高度（或称 content-box 高度）。它通常含有一个背景颜色（默认颜色为透明）或背景图像。
内边距区域 padding area
- 由内边距边界限制，扩展自内容区域，负责延伸内容区域的背景，填充元素中内容与边框的间距。它的尺寸是 padding-box 宽度和 padding-box 高度。
边框区域 border area
- 由边框边界限制，扩展自内边距区域，是容纳边框的区域。其尺寸为 border-box 宽度和 border-box 高度
外边距区域 margin area
- 由外边距边界限制，用空白区域扩展边框区域，以分开相邻的元素。它的尺寸为 margin-box 宽度和 margin-box 高度

15.4 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型 box-model</title>
		<style type="text/css">
			#box1{
				/* 
					whdth属性和herght属性：
						宽度和高度设置的是content内容区的尺寸，
						元素中的子元素和文本内容都在内容区中排列
						
				 */
				width: 100px;
				height: 100px;
				background-color: #19C84B;
				
				/* 
					边框(border):，
						  边框属于盒子边缘，边框里面属于盒子内部，边框外面属于盒子外部
						  边框的大小会影响盒子的大小
						  边框属性：
							边框宽度：border-width
							边框颜色：border-color
							边框风格：border0style
				 */
				border-width: 2px;
				border-color: deeppink; 
				border-style: solid;	/* 实线 */
			}
			span{
				background-color: #A52A2A;
			}
		</style>
	</head>
	<body>
		<!-- 
			盒子模型“box-model
				css将页面中的所有元素设置成矩形的盒子
				将元素设置成矩形的盒子之后，对页面的布局就是讲不同的盒子摆放在不同的位置
			盒子的组成：
				content：内容区
				padding：内边距：内容到边框的举例
				border：边框
				margin：外边距，盒子与盒子之间的距离，以分开相邻的元素
		 -->
		 
		 <div id="box1">我是一个div
			<span>我是span</span>
		 </div>
	</body>
</html>

15.5 运行结果

15.6 查看元素

16、盒子模型 - 边框

16.1 边框

边框区域 border area 由边框边界限制，扩展自内边距区域，是容纳边框的区域。其尺寸为 border-box 宽度和 border-box 高度

边框宽度四个值顺序：上右下左顺时针旋转

边框宽度三个值顺序：上左右下

边框宽度两个值顺序：上下左右

边框宽度一个值表示上下左右全部是一样的宽度

边框宽度单独设置

边框颜色单独设置

边框样式单独设置

简化格式设置边框样式

16.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型-边框</title>
		<style type="text/css">
			#box1{
				width: 200px;	/* 盒子内容宽度 */
				height: 200px;	/* 盒子内容高度 */
				background-color: #FFFF00;	/* 盒子背景颜色 */
				border-color: #A52A2A;	/* 边框颜色 */
				border-style: solid;	/* 边框样式 */
				
				/* 
					边框宽度四个值顺序：上右下左 顺时针旋转
				 */
				border-width: 10px 20px 30px 40px;
			}
			#box2{
				width: 200px;	/* 盒子内容宽度 */
				height: 200px;	/* 盒子内容高度 */
				background-color: #a5ffb7;	/* 盒子背景颜色 */
				border-color: #3018a5;	/* 边框颜色 */
				border-style: solid;	/* 边框样式 */
				
				/* 
					边框宽度三个值顺序：上 左右 下 
				 */
				border-width: 10px 20px 40px;
			}
			#box3{
				width: 200px;	/* 盒子内容宽度 */
				height: 200px;	/* 盒子内容高度 */
				background-color: #50eeff;	/* 盒子背景颜色 */
				border-color: #6f70a5;	/* 边框颜色 */
				border-style: solid;	/* 边框样式 */
				
				/* 
					边框宽度两个值顺序：上下 左右  
				 */
				border-width: 20px 40px;
			}
			#box4{
				width: 200px;	/* 盒子内容宽度 */
				height: 200px;	/* 盒子内容高度 */
				background-color: #f93dff;	/* 盒子背景颜色 */
				border-color: #14141e;	/* 边框颜色 */
				border-style: solid;	/* 边框样式 */
				
				/* 
					边框宽度一个值 表示上下左右全部是一样的宽度
				 */
				border-width: 20px;
			}
			#box5{
				width: 200px;	/* 盒子内容宽度 */
				height: 200px;	/* 盒子内容高度 */
				background-color: #ffcb9d;	/* 盒子背景颜色 */
				
				/* 
					边框宽度单独设置 
				 */
				border-top-width: 10px;
				border-right-width: 20px;
				border-bottom-width: 33px;
				border-left-width: 40px;
				/* 
					边框颜色单独设置
				 */
				border-top-color: #F93DFF;
				border-right-color: #008000;
				border-bottom-color: #14141E;
				border-left-color: #D2691E;
				
				/* 
					边框样式单独设置
				 */
				border-top-style: solid;
				border-left-style: solid;
				border-right-style: solid;
				border-bottom-style:solid;
			}
			#box6{
				width: 200px;
				height: 200px;
				background: #FF0000;
				/* 
					简化格式设置边框样式
				 */
				border: 10px #0000FF solid;
			}
		</style>
	</head>
	<body>
		<div id="box1"></div>
		<div id="box2"></div>
		<div id="box3"></div>
		<div id="box4"></div>
		<div id="box5"></div>
		<div id="box6"></div>
	</body>
</html>

16.3 运行结果

19、盒子模型-内边距

19.1 内边距范围

paddding内边距：
- 内容区和边框之间的距离就是内边距
- 一共有四个方向的内边距
  - padding-top
  - padding-right
  - padding-bottom
  - padding-left

内边距简写格式：

内边距的设置会影响到盒子的大小，修改内边距的尺寸背景颜色会延伸到内边距上

一共盒子的大小：由内容区+内边距+边框共同决定，所以在计算盒子大小时，需要将三者叠加起来计算

19.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型-内边距</title>
		<style type="text/css">
			.box1{
				width: 200px;
				height: 200px;
				background-color: pink;
				border:10px #00ff00 solid;
				/* 
					paddding内边距：
						内容区和边框之间的距离就是内边距
						一共有四个方向的内边距
						padding-top
						padding-right
						padding-bottom
						padding-left
					
					内边距的设置会影响到盒子的大小
					背景颜色会延伸到内边距上
					
					一共盒子的大小：由 内容区+内边距+边框 共同决定
					所以在计算盒子大小时，需要将三者叠加起来计算
				 */
				padding-top: 100px;
				padding-right: 100px;
				padding-bottom: 100px;
				padding-left: 100px;
				/* 
					简写形式:顺时针表示 上 右 下 左 
					padding: 80px 70px 60px 50px ;
				 */
			}
			.inner{
				width: 100%;
				height: 100%;
				background-color: #8A2BE2;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="inner"></div>
		</div>
	</body>
</html>

19.3 运行结果

19.4 查看控制台视图

20、盒子模型-外边距

20.1 外边距范围

margin外边距：
- 外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置
一共右四个方向的外边距：
- margin-top:上外边距，设置一个正值，元素自身会向下移动
- margin-left：左外边距：设置一个正值，元素自身会向右移动,弄人情况下不会产生效果
- margin-right：右外边距设置一个正值相邻元素向右移动
- margin-bottom：下外边距：设置一个正值相邻元素向下移动
元素在页面中是自左向右排列的，默认情况下，如果设置的左和上外边距，元素自身会移动，设置成右和下外边距，其他元素会移动
margin值也可以设置负值，负值表示元素向相反方向移动
margin的简写属性类似于padding：上右下左

20.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型-外边距</title>
		<style type="text/css">
			.box1{
				width: 200px;
				height: 200px;
				background-color: pink;
				border: 10px #0000FF solid;
				
				/* 
					margin外边距：
						外边距不会影响盒子可见框的大小
						但是外边距会影响盒子的位置
						一共右四个方向的外边距：
							margin-top:上外边距，设置一个正值，元素自身会向下移动
							margin-left：左外边距：设置一个正值，元素自身会向右移动,弄人情况下不会产生效果
							margin-right：右外边距 设置一个正值 相邻元素向右移动
							margin-bottom：下外边距：设置一个正值 相邻元素向下移动
						元素在页面中是自左向右排列的，
						默认情况下，如果设置的左和上外边距，元素自身会移动
						设置成右和下外边距，其他元素会移动
						
						margin值也可以设置负值，负值表示元素向相反方向移动
						margin的简写属性类似于padding：上右下左
						
				 */
				margin-top: 100px;
				margin-left: 100px;
				margin-bottom: 100px;
				}
			.box2{
				width: 200px;
				height: 200px;
				background-color: lawngreen;
				border: 10px #ff69b2 solid;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>

20.3 运行结果

20.4 查看控制台视图

21、盒子模型-水平方向的布局

21.1 水平布局介绍

元素在水平方向的布局
- 子元素是在父元素的内容区存在的：
- 元素在其父元素的中水平方向的位置由以下几个属性决定
  - margin-left 左外边距
  - border-left 左边框
  - padding-left 左内边距
  - width：元素的宽度
  - padding-right：右内边距
  - border-right：右边框
  - margin-right：右外边框
一个元素在其父元素中，水平布局需要满足一下公式：
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right= 父元素内容的宽度（必须等于900px）
- 理论上：0+0+0+200+0+0+0=800
  以上等式必须满足，如果相加结果等式不成立，则称为过度约束，那么等式会自动调整
- 调整的情况：如果这七个值中没有auto的情况，则浏览器会自动调整margin-right的值以使等式成立
  浏览器调整后：0+0+0+200+0+0+600=800
- 这七个值中有三个值可以设置为auto
  width、margin-left、margin-right
  - 如果某个值为auto，则会自动调整auto属性，以使得等式成立
  - 如果宽度和一个外边距设置成auto，那么宽度会调整到最大，设置为auto的外边距是0
  - 如果三个值都设置成auto，则外边距都是0.宽度最大
  - 如果将两个外边距设置成auto，宽度固定，那么会将外边距设置成想用的值

21.2 案例


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.outer{
				width: 800px;
				height: 200px;
				border: 10px #00FF00 solid;
			}
			.inner{
				width: 200px;
				height: 200px;
				background-color: pink;
				margin-left: 100px;
			}
			
			/* 
				元素在水平方向的布局，
					子元素是在父元素的内容区存在的：
					元素在其父元素的中水平方向的位置由以下几个属性决定
						margin-left 左外边距
						border-left 左边框
						padding-left 左内边距
						width： 元素的宽度
						padding-right：右内边距
						border-right：右边框
						margin-right：右外边框
						
					一个元素在其父元素中，水平布局需要满足一下公式：
						margin-left+border-left+padding-left
						+width+padding-right+border-right+margin-right
						= 父元素内容的宽度 （必须等于900px）
						
						理论上：0+0+0+200+0+0+0=800
						以上等式必须满足，如果相加结果等式不成立，则称为过度约束，那么等式会自动调整
						
						调整的情况：如果这七个值中没有auto的情况，则浏览器会自动调整margin-right的值以使等式成立
						浏览器调整后：0+0+0+200+0+0+600=800
					
					这七个值中有三个值可以	设置为auto
						width、margin-left、margin-right
						如果某个值为auto，则会自动调整auto属性，以使得等式成立
						如果宽度和一个外边距设置成auto，那么宽度会调整到最大，设置为auto的外边距是0
						如果三个值都设置成auto，则外边距都是0.宽度最大
						如果将两个外边距设置成auto，宽度固定，那么会将外边距设置成想用的值
				
			 */
		</style>
	</head>
	<body>
		<div class="outer">
			<div class="inner"></div>
		</div>
	</body>
</html>

21.3 运行结果

21.4 查看控制台视图

22、盒子模型-垂直方向的布局

22.1 溢出和处理溢出

溢出：
- 子元素是在父元素的内容区怕列的
- 如果子元素的大小超过了父元素。那么子元素就会从父元素中移除
处理溢出：
- 使用overflow属性来处理子元素溢出
- 属性值1、visible 默认值，子元素会从父元素中溢出，会在父元素外部显示
- 属性值2、hidden 隐藏，溢出的内容会被裁剪不会显示
- 属性值3、scroll 滚动显示,生成两个滚动条，通过滚动条查看完整内容
- 属性值4、auto 根据需求生成滚动条
```
   	overflow-x：单独处理水平方向的溢出
   	overflow-y: 单独处理垂直方向的溢出
```

22.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型-垂直方向的布局</title>
		<style type="text/css">
			.outer{
				background-color: #0000FF;
				/* 默认情况下，父元素的高度被内容撑开 */
			}
			.inner{
				height: 100px;
				width: 100px;
				background-color: yellow;
			}
			
			/* 
			溢出：
				子元素是在父元素的内容区怕列的
				如果子元素的大小超过了父元素。那么子元素就会从父元素中移除
				
			处理溢出：
				使用overflow属性来处理子元素溢出
				属性值1、visible 默认值，子元素会从父元素中溢出，会在父元素外部显示
				属性值2、hidden 隐藏，溢出的内容会被裁剪不会显示
				属性值3、scroll 滚动显示,生成两个滚动条，通过滚动条查看完整内容
				属性值4、auto 根据需求生成滚动条
				
				overflow-x：单独处理水平方向的溢出
				overflow-y: 单独处理垂直方向的溢出
			 */
			#box1{
				width: 200px;
				height: 200px;
				background-color: deeppink;
				overflow: hidden;
			}
			#box2{
				width: 100px;
				height: 400px;
				background-color: #3018A5;
			}
			#box3{
				width: 200px;
				height: 200px;
				background-color: pink;
				overflow: scroll;
			}
		</style>
	</head>
	<body>
		<div class="outer">
			<div class="inner"></div>
		</div>
		
		<div id="box1">
			<div id="box2"></div>
		</div>
		
		<div id="box3">
			边框的粗细由 border-width 和简写的 border 属性控制。如果 box-sizing 属性被设为 border-box，那么边框区域的大小可明确地通过 width、min-width, max-width、height、min-height，和 max-height 属性控制。假如框盒上设有背景（background-color 或 background-image），背景将会一直延伸至边框的外沿（默认为在边框下层延伸，边框会盖在背景上）。此默认表现可通过 CSS 属性 background-clip 来改变。
		</div>
	</body>
</html>

22.3 运行结果

23、外边距的折叠

23.1 外边距折叠原理

外边距的折叠
- 相邻的处置方向的元素的外边距会发生重叠
- 兄弟元素：
  - 兄弟元素间的相邻处置外边距会取两者之间的最大值
  - 特殊情况：如果相邻的外边距一正一负，则取两者之和
- 父子元素：
  - 父子元素的相邻外边距，子元素的会传递给父元素
  - 父子外边距的折叠会影响页面的整体布局

23.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外边距的折叠</title>
		<style type="text/css">
			.box1,.box2{
				width: 200px;
				height: 200px;
			}
			
			/* 
				外边距的折叠
					相邻的处置方向的元素的外边距会发生重叠
					兄弟元素：
						兄弟元素间的相邻处置外边距会取两者之间的最大值
						特殊情况：如果相邻的外边距一正一负，则取两者之和
					父子元素：
						父子元素的相邻外边距，子元素的会传递给父元素
						父子外边距的折叠会影响页面的整体布局
						
			 */
			.box1{
				background-color: pink;
				margin-bottom: 150px;
			}
			.box2{
				background-color: #00FF00;
				margin-top: 100px;
			}
			.box3{
				width: 200px;
				height: 200px;
				background-color: #00FFFF;
			}
			.box4{
				width: 100px;
				height: 100px;
				background-color: #ffec58;
				margin-top: 100px;
			}
			
		</style>
	</head>
	<body>
		<div class="box1">1</div>
		<div class="box2">2</div>
		<div class="box3">
			<div class="box4"></div>
		</div>
	</body>
</html>