meat标签
meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
浏览器不会解析meta标签内容显示在页面中(页面中无法直接看到meta标签)，搜索引擎搜索时会解析meta标签中的关键字和描述内容

<!DOCTYPE html>
<html>
	<head>
		<!-- 用法1、设置页面编码 -->
		<meta charset="utf-8">
		<!-- 用法2、设置关键字，使用户更准确的找到页面
					name="keywords" 表示告诉搜索引擎，content的值是关键字
					content="HTML5" 因为name="keywords" 所以HTML5是一个关键字
					content="HTML5,javaScripts" 是多个关键字的写法，用逗号分隔
			此项不影响我们页面在搜索引擎中的排名
		-->
		<meta name="keywords" content="HTML5,javaScripts"/>
		 <!-- 用法3、指定网页描述
					name="description" 表示告诉搜索引擎，content中的值是网页描述
					总结起来就是，content中的值，会根据name属性的值，发挥不同作用，name为keywords，content中的值就是关键字
					name为description，content中的值就是网页描述
			  此项不影响我们页面在搜索引擎中的排名
		 -->
		 <meta name="description" content="这是一个讲解meta标签用法的网页" />
		 <!-- 用法4、重定向
					http-equiv="refresh" 表示content中内容为重定向参数
					content="5;url=http://www.baidu.com" 表示5秒后重定向页面到http://www.baidu.com
		 -->
		 <meta http-equiv="refresh" content="5;url=http://www.baidu.com" />
		<title></title>
	</head>
</html>

2、CSS选择器

1、伪类选择器

伪类选择器
专门用来表示元素的一种特殊状态
访问过的超链接，获得焦点的文本框，鼠标移入的文本等等

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{//给所有标签设置公有属性
				border: 0;
				padding: 0;
				margin: 0;
			}
			a:link{/*给正常的超链接设置样式*/
				color: blue;
			}
			a:visited{/*给访问过后的超链接设置样式,此选择器只能设置color属性,设置其他属性不生效*/
				color:black;
			}
			a:hover{/*给鼠标移入的标签设置样式(可以对几乎所有标签生效)*/
				color: chartreuse;
			}
			a:active{/*给鼠标点击的标签设置样式(可以对几乎所有标签生效)*/
				color: red;
			}
			.text:focus{/*当文本框获取焦点时,赋予样式*/
				border: 0;
				background-color: rgba(0,0,0,0.5);
				border-radius: 25px;
				box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
				color: aliceblue;
			}
			.text:hover{/*当鼠标移入文本框时生效*/
				border: 0;
				background-color: rgba(0,0,0,0.5);
				border-radius: 25px;
				box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
			}
			.testSelection::selection{/*当选中内容时生效*/
				color: coral;
			}
		</style>
		
	</head>
	<body>
		<a href="index.html">还没访问的超链接，设置为蓝色</a><br />
		<a href="www.baidu.com">访问后的超链接，设置为黑色</a><br />
		因为link和visited伪类只能用于超链接，而现在超链接基本都用默认样式，所以一般不使用<br/>
		<hr />
		<a href="index.html">鼠标移入的超链接，设置为绿色</a><br />
		<a href="index.html">鼠标点击超链接，超链接被激活时，设置为红色</a><br />
		<input  class="text" type="text" placeholder="获取焦点时,修改样式"/><br />
		<span class="testSelection"> 选中文字添加样式 </span><br />
	</body>
</html>

2、伪元素

伪元素
使用伪元素表示元素中的一些特殊位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{//给所有标签设置公有属性
				border: 0;
				padding: 0;
				margin: 0;
			}
			p:first-letter{/*给p标签中最前面的文字设置颜色为红色*/
				color: red;
			}
			p:first-line{/*给p标签中第一行文字设置元素为蓝色*/
				color:cyan;
			}
			/*此标签会在p标签中最前面的位置设置一个样式，但是我们最前面是没有内容的
				所以我们通常配合content属性使用，此属性可以添加内容*/
			p:before{
				content: url(http://img2.imgtn.bdimg.com/it/u=3219733219,2454729155&fm=26&gp=0.jpg);
			}
			p:after{
				content: url(http://a.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=98d64487bc315c6043c063ebb881e725/d52a2834349b033b239d144815ce36d3d539bd0f.jpg);
			}
			h2:after{
				content: "====比如文字=====";
				color: #FF0000;/*这里设置的样式，只会对用content添加的元素生效*/
			}
			h2:hover:after{/*当鼠标移入h2标签，对最末尾添加的content元素设置样式*/
				color: aqua;/*这里重复的使用after，只会对使用content添加的元素生效*/
			}
		</style>
		
	</head>
	<body>
		<p>一段文字，通过伪元素设置<br/>
			第一个文字为红色，第一行为蓝色
			最后分别在标签的最前面和最后面添加一个图片</p>
		<h2>不光可以添加图片，可以添加多种形式的内容</h2>
		<hr/>
		想要对添加的内容设置css样式动画，可以重复对伪元素设置样式，比如h2:hover:after这个样式
		<br/>主要掌握before 和 after两个，first-letter较少使用，first-line基本不使用，而且目前基本不支持了
	</body>
</html>

3、属性选择器

属性选择器
首先`title属性`可以给任何一个标签使用，当我们鼠标移入到元素后，会显示title属性中的文字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{//给所有标签设置公有属性
				border: 0;
				padding: 0;
				margin: 0;
			}
			h2{/* 给所有h2标签设置字体大小 */
				font-size: 15px;
			}
			h2[title]{/* 给所有带title属性的h2标签设置背景色 */
				background-color: darkgrey;
			}
			h2[title=red]{/* 给所有带title属性的并且属性值为red的h2标签设置颜色为红色 */
				color: red;
			}
			h2[title="green"]{/* 给所有带title属性的并且属性值为green的h2标签设置颜色为绿色 */
				color: green;
			}
			h2[title^="ab"]{/*给所有title属性值以ab开头的h2标签添加样式*/
				color:chocolate;
			}
			h2[title$="f"]{/*给所有tilte属性以d结尾的h2标签添加样式*/
				color: deeppink;
			}
			h2[title*="x"]{/* 给所有title属性值中包含x字符的h2标签添加样式 */
				color: blueviolet;
			}
		</style>
	</head>
	<body>
		<h2 title="red">红色</h2>
		<h2 title="green">绿色</h2>
		<h2 title="ab">title属性ab开头1</h2>
		<h2 title="abc">title属性ab开头2</h2>
		<h2 title="cf">title属性f结尾</h2>
		<h2 title="axc">title属性包含x的</h2>
		<h2 >普通(除了以上常用的，还有很多，可以参考w3cShool文档)</h2>
	</body>
</html>

4、子元素伪类

子元素伪类
在所有父标签中找子元素，只要元素中包含子元素，这个元素就是父元素
我们会直接找所有父元素中的子元素，而不是指定的在某一个特定父元素中找

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{//给所有标签设置公有属性
				border: 0;
				padding: 0;
				margin: 0;
			}
			body{
				border: #0000FF 15px solid;
			}
			div{
				width: 300px;
				height: 300px;
				border: #DC143C 5px solid;
			}
			
			button:first-child{/*给每个标签的父元素中第一个botton子元素设置样式*/
				background-color: crimson;
			}
			button:last-child{/*给每个标签的父元素中最后一个botton子元素设置样式*/
				background-color: blue;
			}
			button:nth-child(3){/*给每个标签的父元素中的第3个botton子元素设置样式*/
				background-color:chartreuse;
			}
			*:nth-child(5){/*给每个标签的父元素中的第5个子元素设置样式*/
				background-color: coral;
			}
			h2:nth-child(odd){/*给每个标签的父元素中，所有的奇数位置的h2标签设置样式，就是处于1、3、5、7、9这样的位置的子元素*/
				color: blueviolet;
			}
			h2:nth-child(even){/*给偶数位置h2设置*/
				color: crimson;
			}
			input:first-of-type{/* 给每个标签的父元素中，第一个指定类型的标签赋予样式，这里指定的是input */
				background-color: #0000FF;
			}
			input:last-of-type{/* 给每个标签的父元素中，最后一个指定类型的标签赋予样式，这里指定的是input */
				background-color: #7FFF00;
			}
			input:nth-of-type(3){/* 给每个标签的父元素中，第三个指定类型的标签赋予样式，这里指定的是input */
				background-color: #DC143C;
			}
		</style>
		
	</head>
	<body>
		<button>我是body中的第一个子元素</button><br/>
		<button>我是body中的第三个子元素，没错第二个子元素是上面内个< br /></button><br/>
		<button>我是body中的第五个子元素，没错，我不是最后一个，可以看到body中最后一个元素是div</button>
		<div class="div">
			<button>我是div中第一个子元素</button><br/>
			<button>我是div中第三个子元素</button><br/>
			<button>我是div中最后一个子元素</button>
		</div>
		<h2>我是body中第七个子元素</h2>
		<h2>我是body中第八个子元素</h2>
		<div>
			<h2>我是div中第一个子元素</h2>
			<h2>我是div中第二个子元素</h2>
		</div>
		<div>
			我是body中最后一个子元素div<br/>
			<input type="text" value="我是div中第二个子元素,但同时是第一个input类型子元素,第一个元素是br"/>
			<input type="text" value="我是div中第三个子元素,但同时是第二个input类型子元素"/>
			<input type="text" value="我是div中第四个子元素,但同时是第三个input类型子元素"/>
			<input type="text" value="我是div中第五个子元素,但同时是第四个input类型子元素"/>
			<input type="text" value="我是div中最后一个子元素,但同时是第五个input类型子元素"/>
		</div>
	</body>
</html>

5、兄弟选择器

兄弟元素选择器
可以选中一个元素的兄弟，比如它的前一个或者后一个元素
注意只能选同级元素，比如它在一个div中，那么它只对div中兄弟元素生效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{//给所有标签设置公有属性
				border: 0;
				padding: 0;
				margin: 0;
			}
			body{
				border: #0000FF 15px solid;
			}
			div{
				width: 300px;
				height: 300px;
				border: #DC143C 5px solid;
			}
			span + h3{/*选中span后面紧挨着的h3元素，不能选中间隔的*/
				color: #0000FF;
			}
			span ~ h4{/* 选中span后面所有h4元素 */
				color: #DC143C;
			}
		</style>
		
	</head>
	<body>
		<h3>我是h3</h3>
		<h3>我是h3</h3>
		<h3>我是h3</h3>
		<span>我是span</span>
		<h3>我是h3</h3>
		<h4>我是h4</h4>
		<h3>我是h3</h3>
		<h4>我是h4</h4>
		<h3>我是h3</h3>
		<h4>我是h4</h4>
		<h3>我是h3</h3>
	</body>
</html>

6、否定伪类选择器

否定伪类
排除指定元素，比如给`除去class属性为test的p标签`以外`剩下的`所有p标签添加样式
语法：not(选择器)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{//给所有标签设置公有属性
				border: 0;
				padding: 0;
				margin: 0;
			}
			body{
				border: #0000FF 15px solid;
			}
			div{
				width: 300px;
				height: 300px;
				border: #DC143C 5px solid;
			}
			p:not(.test){
				color: #DC143C;
			}
		</style>
		
	</head>
	<body>
		<p>我是p标签</p>
		<p>我是p标签</p>
		<p>我是p标签</p>
		<p class="test">我是p标签</p>
		<p>我是p标签</p>
		<p>我是p标签</p>
		<p>我是p标签</p>
		<p>我是p标签</p>
		<p>我是p标签</p>
	</body>
</html>

7、选择器的优先级和顺序

权重值(每个选择器都有属于直接的权重值，权重值越高，优先级越高)
内联样式 `1000`
id选择器 `100`
类和伪类选择器 `10`
元素选择器 `1`
* 通配 `0`
继承 `无`

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{	/*权重为0*/
				font-size: 10px;
			}
			#testID{/* 权重为100 */
				font-size: 40px;
			}
			.testClass{/* 权重为10 */
				font-size: 30px;
			}
			p{/* 权重为1 */
				font-size: 20px;
			}
			
		</style>
		
	</head>
	<body>
		<p>标签选择器权重为1
			<p class="testClass">类选择器权重为10，没有使用标签选择器的样式
				<p id="testID" class="testClass">id选择器权重为100，没有使用标签和类选择器的样式
					<br/><span>没有样式，继承父元素样式，你如果删掉通配*样式，就会采用继承，因为通配权重为0，而继承样式没有权重</span>
					<p style="font-size: 100px">内联样式权重最高1000</p>
				</p>
			</p>
		</p>
	</body>
</html>

权重叠加
不同的样式组合，可以使权重叠加，从而影响选择器优先级
注意：`多个相同选择器叠加，不会超过其最大权重`，比如11和类选择器叠加，权重最多也就99，不可能和id选择器相同或超过id选择器权重
`多个选择器权重相同时，生效的是最先声明的选择器，也就是位置靠前的选择器`
`并集`选择器，`权重独立计算`，`不会叠加`
在某个样式中的属性添加`!important` 此属性的优先级将无视一切，毁天灭地

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{	/*权重为0*/
				font-size: 10px;
			}
			
			#testID{/* id选择器权重为100 */
				color: red;
			}
			p#testID{/* id选择器权重为100，元素选择器为1，合起来为101 */
				color: blue;
			}
			#testID,.testclass,p,h2,h3{/*集合选择器 每个选择器单独计算，不会叠加 */
				font-size: 50px;
			}
			h1{
				font-size: 40px !important;/* 添加 ！important 标识的样式，会无视权重，直接获取最高优先权 */
				background-color: black;
			}
			h1{
				font-size: 10px;
				background-color: red !important;/* 添加 ！important 标识的样式，会无视权重，直接获取最高优先权 */
			}
		</style>
		
	</head>
	<body>
		<p id="testID">我是p标签</p>
		<h1>我是h1</h1>
	</body>
</html>

伪类的顺序
link visited hover 和active4个伪类优先级相同（只是举例子，不是就它们4个）
那么我们应该注意伪类的顺序，如果你将active放在hover上面，会导致hover失效

			a:link{/*给正常的超链接设置样式*/
				color: blue;
			}
			a:visited{/*给访问过后的超链接设置样式,此选择器只能设置color属性,设置其他属性不生效*/
				color:black;
			}
			a:hover{/*给鼠标移入的标签设置样式(可以对几乎所有标签生效)*/
				color: chartreuse;
			}
			a:active{/*给鼠标点击的标签设置样式(可以对几乎所有标签生效)*/
				color: red;
			}

3、盒模型

在这里插入图片描述

盒模型
html页面，每一个标签元素，都是一个盒子
而每个盒子都具有4部分
`内容区`
`padding` 内边距
`border` 边框
`margin` 外边距
内容区的大小通过width 和height来控制
但是行模型不能设置大小，比如span，p；div等块模型可以设置大小
其余3个部分都有其特定属性设置
`设置3个部分，不会影响内容区大小`，只会让盒模型整体改变
如果边距指定为`auto`，则边距大小浏览器会自动设置，一般自动设置为最大值
`我们经常给margin和padding设置百分比，它参照的是包含块的width和height`

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{	/*权重为0*/
				font-size: 10px;
			}
			.testDiv{
				width: 100px;
				height: 100px;
				background-color:blue ;
				border: 30px solid blueviolet;
				padding:100px;
				margin: 20px;
			}
		</style>
		
	</head>
	<body>
		<div class="testDiv"></div>
		<div class="testDiv"></div>
	</body>
</html>

在这里插入图片描述

从上面的图片可以看到，第一个div的下外边距和第二个div的上外边距重合了，也就是说：垂直外边距是会重叠的
两个相邻的元素之间外边距，会取最大值。
如果父子元素垂直外边距相邻，子元素的值会传给父元素

盒子模型分类
块级元素和内联（行）元素
内联元素不可以设置宽高，可以设置水平边距，但垂直边距不会影响页面布局，垂直边距只有边框可以生效
块级元素独占一行

盒子模型类型转换
`display`:此属性可以转换元素的类型（inline转换为行内元素）、（block转换为块级元素）（inline-block转换为行内块元素）（none设置为无类型，直观效果为元素消失）
`visibility`:设置元素的显示（visible）和隐藏(hidden)，不会影响类型，直观感觉为看不见，但还占着页面中的位置

处理盒模型溢出
如果子元素大小超过父元素大小，子元素会溢出，此时可通过`overflow`属性处理，此属性专门处理盒模型溢出内容
hidden:隐藏溢出内容
auto 溢出内容隐藏，并添加滚动条，以查看完整内容

1、浮动

浮动
float此属性可以设置浮动（left向左浮动）、（right向右浮动）
如果上个盒模型没有设置浮动，那下一个浮动元素不会超过上一个元素也不会超过其他兄弟元素
任何元素脱离文档流，就会变成行内块级元素

浮动高度塌陷
当子元素浮动后，父元素会因为没有内容撑开而丢失高度，造成高度塌陷
解决办法
1、写死父容器高度（不推荐）
2、设置父容器 zoom:1;overflow:hidden;解决高度塌陷
3、如图

在这里插入图片描述
这个可以解决高度坍塌的同时解决父子元素重叠

2、定位

position定位属性
`relative`相对定位，保留原来的位置
`absolute`绝对定位，原来的位置消失
`fixed`固定定位，固定在一个位置不动
通过`top、left、right、bottom`属性设置基于包含块的位置
如果`不设置top，left`等值，默认为`auto`，而不是0，包括`width和height默认值也是auto`，而不是0
注意：`绝对定位是参考第一个设置了定位属性的祖先元素`（就是包含它的元素，必须是块级元素），`没有`就`参考根元素的包含块`（就是初始包含块，页面大小的一个框（但不是页面），也就是参照页面定位）
对于`相对定位`，`参考的是最近的块级父元素，否则参照根元素`
`z-index`可以设置`定位的层次`，值越大层次越高，会覆盖下层的内容
`我们经常给margin和padding设置百分比，它参照的是包含块的width和height`
margin和padding的默认值为0

3、浮动与定位的区别，以及一些常用技巧

1、区别

区别
浮动刚做出来，就是为了排开文字的，所以严格来讲，浮动会上升半层，而不是完整的一层
我们可以想象，一个底层容器，比如div就是最底层，而div中的内容，是处于半层的位置，而浮动也是上升半层，这时会和这些内容处于同一层
比如，我们有两个div，其中一个包含若干其它元素（比如文字），这时我们浮动另一个时，下面的div在底层，而内容在半层，所以会出现div上移，而内容被浮动元素卡住的情况，就是因为浮动上升半层
而定位会让元素上升完整一层，还可以通过z-index设置更高层

在这里插入图片描述

2、技巧

`另外，修改元素边界（不是边距而是边界，常见做法是将某一边距设置为负值），是不会影响元素位置的`

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{	/*权重为0*/
				margin: 0;
				padding: 0;
				border: 0;
			}
			body{;
				background-size: ;
			}
			.test1{
				width: 100%;
				height: 100px;
				background-color: rgba(255, 255, 0,1);
				float: left;
			}
			
			.test2{
				width: 100px;
				height: 100px;
				background-color: red;
				float: left;
				margin-left: -100%;/*设置边距为-100%*/
			}
		</style>
		
	</head>
	<body>
		<div class="test1"></div>
		<div class="test2">我是下面的div中的内容</div>
		<input type="text" />
	</body>
</html>

在这里插入图片描述

二、css2.1

1、圣杯布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{	/*权重为0*/
				margin: 0;
				padding: 0;
				border: 0;
			}
		   .h,.jiew{
			  border: aqua 1px solid;
			  height: 100px;
			  background-color: #00FFFF;/* 给头部尾部设置样式*/
			  
		   }
		   .cont{
			   padding: 0 50px;/* 给内容区设置内边距，上下为0，左右为50px为了给左右留下位置 */
		   }
		  .center{
			 background-color: blueviolet;
			 height: 30px;
			 float: left;
			 width: 100%;/* 给内容区的中间部分设置样式，浮动是为了能让下面的浮动跟它在一行，因为不浮动是一个块元素独占一行 */
			 
		  }
		  .left,.rigth{
			  background-color: brown;
			  width: 50px;
			  height: 30px;/*  设置大小*/
			  
		  }
		  .left{
			  margin-left: -100%;/* 移动边界，让元素不自动换行 */
			  float: left;/* 左浮动 */
			  position: relative;
			  left: -50px;/* 设置相对左定位，向左移动50像素，正好处于内容区的左内边距中 */
		  }
		  .rigth{/* 和左同理，只不过它在右边 */
			  float: right;
			  margin-left: -50px;
			  position: relative;
			  right: -50px;
		  }
		  /* 解决高度塌陷*/
		  .clearfix{
			  zoom: 1;
		  }
		  .clearfix:after{
			  content: "";
			  display: block;
			  clear: both;
		  }
		</style>
		
	</head>
	<body>
		<div class="h"></div>
		<div class="cont clearfix">
			<div class="center">centerxxxxxxxxxxxxxxxxx</div>
			<div class="left">left</div>
			<div class="rigth">rigth</div>
		</div>
		<div class="jiew"></div>
	</body>
</html>

在这里插入图片描述

2、等高布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{	/*权重为0*/
				margin: 0;
				padding: 0;
				border: 0;
			}
		    .c{
			   border: blue 1px solid;
			   overflow: hidden;/* 溢出的内容隐藏 */
		    }
			.a{
				background-color: blueviolet ;
				height: 300px;
				width: 150px;
				float: left;/* 向左移动 */
				padding-bottom: 1000px;/* 把内边距拉长 */
				margin-bottom: -1000px;/* 把边界收回来 */
			}
			.b{
				background-color: chartreuse;
				height: 710px;
				width: 150px;
				float: left;
				padding-bottom: 1000px;
				margin-bottom: -1000px;
			}
			.clearfix{
				zoom:1;
			}
			.clearfix:after{
				content: "";
				display: block;
				clear: both;
			}
		</style>
		
	</head>
	<body>
		<div class="c clearfix">
			<div class="a"></div>
			<div class="b"></div>
		</div>
	</body>
</html>

在这里插入图片描述

3、双飞翼布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{	/*权重为0*/
				margin: 0;
				padding: 0;
				border: 0;
			}
		   .h,.jiew{
			  border: aqua 1px solid;
			  height: 100px;
			  background-color: #00FFFF;/* 给头部尾部设置样式*/
			  
		   } 
		   .content{
			   width: 100%;
		   }
		  .center{
			 background-color: blueviolet;
			 height: 30px;
			 float: left;
			 width: 100%;/* 给内容区的中间部分设置样式，浮动是为了能让下面的浮动跟它在一行，因为不浮动是一个块元素独占一行 */
		  }
		  .left,.rigth{
			  background-color: brown;
			  width: 50px;
			  height: 30px;/*  设置大小*/
			  
		  }
		  .left{
			  float: left;/* 左浮动 */
			  margin-left: -100%;
		  }
		  .rigth{/* 和左同理，只不过它在右边 */
		  margin-left: -50px;
			  float: right;
		  }
		  /* 解决高度塌陷*/
		  .clearfix{
			  zoom: 1;
		  }
		  .clearfix:after{
			  content: "";
			  display: block;
			  clear: both;
		  }
		  .center_content{
			  width: 100%;
			  padding: 0 50px;
		  }
		</style>
		
	</head>
	<body>
		<div class="h"></div>
		<div class="content clearfix">
			<div class="center">
				<div class="center_content">辛苦了组件父类卡精神分裂静安寺的父类</div>
			</div>
			<div class="left">left</div>
			<div class="rigth">rigth</div>
		</div>
		<div class="jiew"></div>
	</body>
</html>

与圣杯布局区别
是把主列嵌套在一个新的父器中，在利用左右进行调整

4、禁止系统默认滚动条

在这里插入图片描述

5、footer粘连布局

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name= "viewport" content= "width= device-width,initial-scale= 1.0,user-scalable=no"/><!-- 移动端第一步，配置viewport -->
		<title></title>
		<style>
			*{	/*权重为0*/
				margin: 0;
				padding: 0;
				border: 0;
			}
			/* 移动端第二步，消除默认滚动条 */
			html,body{
				height: 100%;
			}
			/* 第三步设置布局样式 */
            .wrap{
				min-height: 100%;/* 设置最小高度，这样此容器，会自适应高度，而最低为固定值 */
				background-color: palevioletred;
			}
			.main{
				padding-bottom:50px;/* 解决footer上升后内容覆盖footer的问题 */
			}
			.footer{
				height: 50px;
				background-color: aqua;
				margin-top: -50px;/* 解决，内容不够撑开容器时，footer在页面外的问题 */
			}
		</style>
		
	</head>
	<body>
		<div class="wrap">
			<div class="main">
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
			</div>
		</div>
		<div class="footer">footer</div>
	</body>
</html>

在这里插入图片描述

6、BFC

BFC是什么
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，
它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干

##BFC布局规则
内部的Box会在垂直方向，一个接个地放置
BFC的区域不会与float box重叠
内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
计算BFC的高度时，浮动元素也参与计算。(清除浮动haslayout)
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此

如何开启BFC
根元素默认开启BFC
float属性不为none
osithpn为absolute或fixed
overftow不为visible
display为inline-block, table-cell, table-caption, flex, inline -flex
注意：display为inline-block时，它不对自己生效启动BFC而是给自己的子元素开启

7、两列布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{	/*权重为0*/
				margin: 0;
				padding: 0;
				border: 0;
			}
			/* 第三步设置布局样式 */
            .wrap{
				width: 200px;/* 设置最小高度，这样此容器，会自适应高度，而最低为固定值 */
				background-color: palevioletred;
				border: #DB7093 3px solid;
			}
			.left{
				background-color: aqua;
				width: 100px;
				height: 6.25rem;
				float: left;/* 开启左浮动，此元素变为行块级元素，自己不带BFC，但是根元素html为块元素，会接受根元素的BFC管理 */
				/*但是因为是设置了浮动，只要浮动不为none，就会开启BFC*/
			}
			.right{
				padding-left:1.25rem ;
				/* 溢出文字开启省略号显示 */
				white-space: nowrap;/*关闭自动换行*/
				text-overflow: ellipsis;/*文字溢出内容处理为省略号*/
				overflow: hidden;/* 通过设置overflow 开启BFC */
				
			}
		</style>
		
	</head>
	<body>
		<div class="wrap">
			<div class="left"></div>
			<div class="right">
				alskdjflajfljasdlkfjklsajflksjalkfjlksajf<br />
				alskdjflajfljasdlkfjklsajflksjalkfjlksajf<br />
				alskdjflajfljasdlkfjklsajflksjalkfjlksajf<br />
				alskdjflajfljasdlkfjklsajflksjalkfjlksajf<br />
				alskdjflajfljasdlkfjklsajflksjalkfjlksajf<br />
				alskdjflajfljasdlkfjklsajflksjalkfjlksajf<br />
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

8、元素的垂直水平居中

在这里插入图片描述

未知高度宽度居中

在这里插入图片描述

9、垂直水平居中

在这里插入图片描述

vertical-align
此属性用来指定行块元素垂直对齐
text-top：元素顶端与父元素字体的顶端对齐。
text- bottom：元素底端与父元素字体的底端对齐。
middle：元素中线与父元素的小写x中线对齐。
sub：元素基线与父元素的下标基线对齐。( 使元素的基线相对于基准基线下降，下降的幅度有浏览器厂商决定)
super：元素基线与父元素的上标基线对齐。( 使元素的基线相对于基准基线升高，升高的幅度有浏览器厂商决定)
< length>：元素基线超过父元素的基线指定高度。可以取负值。
< percentage>：同< length> ，百分比相对于line-height 。

三、CSS3

1、概念

一、css的组成
	由样式表组成
	样式表由多个规则组成
	规则由选择器+声明块组成
	声明块由多个声明组成
	声明由css属性+css属性值的键值对形式组成
	*{
		margin:0;
		padding:0;
		border:0;
	}
二、css选择器是从右往左找的
	h1 .test ul{ //这时会先找ul，极有可能会直接找到目标，比如整个页面只有一个ul标签，大大减少工作量
		...
	}

2、CSS3选择器的扩展使用

1、后代选择器和子选择器（直接后代选择器）的区别

子选择器标识符`>`，只能选择直接子元素；后代选择器用空格分隔，可以选择所有后代

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{	/*权重为0*/
				margin: 0;
				padding: 0;
				border: 0;
			}
			body > p{/* 子选择器，只会选择直接子元素 */
				color: pink;
			}
			body > span{/* 此项不能选择到当前页面中的span，因为它不是body直接子元素，但是span会是粉色的，因为color属性会被继承，它会继承p标签的color属性 */
				color:blue;
			}
			body h1{/* 后代选择器，用空格分隔 */
				color: blueviolet;
			}
		</style>
		
	</head>
	<body>
		<p> 我是body中 直接子元素p，我会设置为粉色
		<br/>
			<span>我是p标签的一个直接子元素span，不是body中直接子元素，我会设置为蓝色</span>
			<h1>我是p标签中的一个直接子元素h1，不是body中直接子元素，我会设置为紫色</h1>
		</p>
	</body>
</html>

2、属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{	/*权重为0*/
				margin: 0;
				padding: 0;
				border: 0;
			}
			h2[title~="test"]{/* 选择所有带title属性以test开头并且使用空格拼接属性值的h2标签 */
				color: blue;
			}
			h2[title|="test"]{/* 选择属性值以test-开头的h2标签 */
				color:pink;
			}
		</style>
		
	</head>
	<body>
		<h2 title="test 1">我是h2空格分隔单词</h2>
		<h2 title="test 2">我是h2空格分隔单词</h2>
		<h2 title="test-1">我是h2横杠分隔单词</h2>
		<h2 title="test-2">我是h2横杠分隔单词</h2>
	</body>
</html>

3、伪类和伪元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{	/*权重为0*/
				margin: 0;
				padding: 0;
				border: 0;
			}
			body{
				height: 1000px;
			}
			/* 一、target伪类，此伪类只能用于超链接标签，会根据点击的超链接href值是否带有#号，来判断当前超链接是否执行伪类
				如果带有#，就会将#后面的文字当成id，寻找id相同的元素，并给其赋值样式
				
				另外，如果超链接href以#开头，则此超链接不跳转页面，而是跳转当当前页面的相应id元素的位置
			 */
			
			a{
				text-decoration: none;
			}
			div{
				background-color: pink;
				width: 200px;
				height: 200px;
				text-align: center;
				font: 55px/200px "宋体";
				display: none;
			}
			:target{/* 此伪类 */
				display: block;
			}
			#div4{
				position: absolute;
				bottom: -200px;
			}
			
			/* 二、表单使用的伪类 */
			input:enabled{/*选择所有可用的表单项，必须是enabled */
				background-color: #FFC0CB;
			}
			input:disabled{/* 选择所有不可用表单小，必须是disabled属性的 */
				background-color: aqua;
			}
			input[type="checkbox"]:checked{/* 选择所有被选中的复选框 */
				width: 50px;
				height: 50px;
			}
			input[type="text"]:focus{/* 选择获得焦点的表单项 */
				box-shadow: 5px 5px 15px #FFC0CB;
				height: 55px;
			}
			
			/* 三、美化单选按钮 */
			label{
				display: block;/* 定义为块级元素，才能设置大小 */
				width: 15px;
				height: 15px;
				border-radius: 15px;
				box-shadow: 5px 5px 15px #FFC0CB;
				position: relative;
				overflow: hidden;
				
			}
			input[type="radio"]{/* 让radio处于label外面， */
				position: absolute;
				left: -50px;
			}
			label > span{/* 设置span正好充满父元素 */
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
			}
			input[type="radio"]:checked + span{/* 选择当前type属性为radio的被选中表单项的span兄弟 */
				background-color: #00FFFF;
				border: brown 1px solid;
			}
			
			/* 四、子元素选择器 */
			:nth-last-child(1){/* 选择最后一个元素，last就是从后往前 */
				color: #00FFFF;
			}
			body h3:nth-last-of-type(1){/* 选择body下的最后一个h3元素 ，注意伪类前面最好是元素类型，比如div，h3等等*/
				color: #A52A2A;
			}
		</style>
		
	</head>
	<body>
		<!-- target伪类 和超链接的当前页面元素跳转-->
		<a href="#div1">显示div1</a>
		<a href="#div2">显示div2</a>
		<a href="#div3">显示div3</a>
		<a href="#div4">显示div4</a>
		<div id="div1">div1</div>
		<div id="div2">div2</div>
		<div id="div3">div3</div>
		<div id="div4">div4</div>
		<!-- 表单伪类 -->
		<br/>
		<input type="text" placeholder="我是可以被使用的文本框"/><br/>
		<input type="text"  disabled="disabled" placeholder="我是被禁用的文本框"/><br/><!-- 被禁用的文本框 -->
		<input type="checkbox" />我是复选框<br/><!-- 被禁用的文本框 -->
		<label><input type="radio" /><span></span></label>
		<!-- 子元素选择器 -->
		<h3>我是body中最后一个h3元素</h3>
		<h2>我是body中最后一个元素</h2>
	</body>
</html>

3、自定义字体（字体图标）

方法
`@font-face`
允许网页开发者为其网页指定在线字体，网页作者自备字体，消除对不同用户电脑字体的依赖
`font-family`：指定名字，会被用于css中font和font-family属性指定时使用
`src`：字体资源路径
注意，不能在CSS选择器内部定义@font-face

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{	/*权重为0*/
				margin: 0;
				padding: 0;
				border: 0;
			}
			@font-face {
			  font-family: 'FontAwesome';
			  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');/* 你需要将字体文件放在你的文档中 */
			  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
			  font-weight: normal;
			  font-style: normal;
			}
			.test::before{
				content: "\f001";
			}
		</style>
		
	</head>
	<body>
		<i class="test"></i>
	</body>
</html>

推荐两个好用的开源文字图标库
`Font Awesome`：https://fontawesome.dashgame.com/
阿里巴巴`Iconfont`：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
以上两个都可以直接百度名字进入官网

一个非常好用的将矢量图打包成字体文件的网站
`icomoon`:https://icomoon.io/

4、新增UI样式

1、文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{	/*权重为0*/
				margin: 0;
				padding: 0;
				border: 0;
			}
			.h1{
				text-shadow: pink 5px 5px 15px,blue 5px 5px 2px;/* 添加文字阴影，多个阴影用逗号隔开，第一个参数时阴影颜色，第二第三个元素是阴影的x和y偏移量，最后一个参数是模糊 */
			}
			.h2{
				filter: blur(10px);/* 模糊元素（不是文字而是任何元素）10px */
			}
			.h3{
				direction: rtl;/* 设置文字方向 ，但只有此属性，只会让文字出现类似左对齐，右对齐的形式，文字顺序不能改变*/
				unicode-bidi: bidi-override;/* 此属性可设置文本的顺序，让文本每个字的顺序反转过来 */
			}
			div{
				width: 105px;
				height: 30px;
				white-space: nowrap;/* 让文字不可以换行 */
				overflow: hidden;/* 溢出内容隐藏 */
				text-overflow: ellipsis;/* 溢出文字显示为省略号 */
			}
		</style>
		
	</head>
	<body>
		<h2 class="h1">我是h2</h2>
		<h2 class="h2">我是h2</h2>
		<h2 class="h3">我是h2</h2>
		<div class="div">
			阿斯利康定界符拉斯科技风路径是否
		</div>
	</body>
</html>

2、盒模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{	/*权重为0*/
				margin: 0;
				padding: 0;
				border: 0;
			}
			/* 使图片垂直居中，水平居中通过text-align：center即可 */
			html,body{
				height: 100%;
				overflow: hidden;/* 清除默认滚动条 */
			}
			#div2:after{
				content: "";
				display: inline-block;
				height: 100%;
				vertical-align: middle;
			}
			img{
				vertical-align: middle;
				width: 100px;
			}
			
			/* 动态超链接 */
			a{
				text-decoration: none;
			}
			:target{
				display: block;
			}
			
			/* div样式 */
			div{
				background-color: pink;
				/* 使盒模型居中 */
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 200px;
				height: 200px;
				/* 文字居中 */
				text-align: center;
				line-height: 200px;
				/* 隐藏 */
				display: none;
			}
			
			/* 新增样式 */
			.add-box-shadow{
				/* 和文字阴影相同，用法仅仅只换了属性名 并 添加了一个参数，最后一个参数可以设置阴影大小，不设置将和当前盒模型大小一致*/
				box-shadow: #FFC0CB 15px 5px 25px 5px;
			}
			.add-resize{
				/* 通过resize属性可以是元素可以控制大小，不同属性值可以有不同的控制模式，both为横纵都可以控制 */
				/* 此属性想要生效，必须配合overflow:auto 使用*/
				overflow: auto;
				resize: both;
			}
			.add-border-radius{
				border-radius: 5px 25px 30px 40px;/* 设置圆角边框，原理是根据像素值作为半径画一个圆，然后放到和border相应的地方，最后裁剪 */
				
				/* border-radius: 30px; *//* 如果只写一个值，则4个角都使用30px半径的圆来匹配 */
				
				/* 还有一种椭圆用法，就是通过两个半径来控制椭圆的形状，然后匹配边框 */
				/* border-radius: 30px/50px; */
			}
			
			/* 圆角动画 */
			#div5{
				width: 500px;
				height: 500px;
				background-color: rgba(255,192,223,0.01);
				transition: 10s;
			}
			#div5:hover{
				transform: rotate(2520deg);
			}
			#div5 > div{
				display: block;
				position: static;
				margin: 10px;
				width: 230px;
				height: 230px;
				float: left;
				box-sizing: border-box;
				background-color: pink;
			}
			.add-border-radius-left{
				border-radius: 0 200px;
			}
			.add-border-radius-right{
				border-radius: 200px 0;
			}
			/* 图片边框 */
			.add-border-image{
				border: 30px solid;
				border-image-source:url("https://d.lanrentuku.com/down/png/2004/4coronavirus-icons/coronavirus-icons-05.png");/* 使用一张边框图片 */
				border-image-slice: 30.3%;/* 设置切割比例，1个参数代表横纵都按此比例切割 */
				border-image-repeat: round;/* 设置平铺方式 */
				border-image-width: 10px;/* 设置边框宽度，不设置此值，使用border设置的值 */
			}
		</style>
		
	</head>
	<body>
		<a href="#div1">盒子阴影</a><br />
		<a href="#div2">图片居中方案</a><br />
		<a href="#div3">可控大小盒子（此元素可以拖动改变大小）</a><br />
		<a href="#div4">圆角</a><br />
		<a href="#div5">圆角动画,需要设置html,body的overflow:hidden;否则会出现页面大小变化的情况</a><br />
		<a href="#div6">图片边框</a><br />
		<div id="div1" class="add-box-shadow">div</div>
		<div id="div2" class="add-box-shadow">
			<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3225163326,3627210682&fm=26&gp=0.jpg" />
		</div>
		<div id="div3" class="add-box-shadow add-resize"></div>
		<div id="div4" class="add-border-radius add-box-shadow"></div>
		<div id="div5">
			<div class="add-border-radius-left">1</div>
			<div class="add-border-radius-right">2</div>
			<div class="add-border-radius-right">3</div>
			<div class="add-border-radius-left">4</div>
		</div>
		<div id="div6" class="add-border-image"></div>
	</body>
</html>

5、背景

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{	/*权重为0*/
				margin: 0;
				padding: 0;
				border: 0;
			}
			/* 使图片垂直居中，水平居中通过text-align：center即可 */
			html,body{
				height: 100%;
				overflow: hidden;/* 清除默认滚动条 */
			}
			div{
				width: 700px;
				height: 43.75rem;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				border: 2px aqua solid;
				display: none;
			}
			a{
				text-decoration: none;
			}
			:target{
				display: block;
			}
			.background-image{
				background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593690385222&di=503854e860db28f72a16793c2e52add0&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F36%2F48%2F19300001357258133412489354717.jpg);
			}
			.background-no-repeat{
				background-repeat: no-repeat;
			}
			.background-position{
				background-position: 100px 100px;
			}
			.background-origin{
				/* 给padding一个值 */
				padding: 50px;
				/* 默认情况下，背景图片会从padding，内边距开始绘制 */
				background-origin: content-box;/* 这里设置为内容区 */
				
				/* 为了明显我不做完善，你需要设置背景不平铺或者裁剪才能看到好的效果 */
			}
			.background-clip{
				background-clip: content-box;
			}
			.background-size{
				background-size: cover;
			}
		</style>
		
	</head>
	<body>
		<a href="#div1">平铺</a><br />
		<a href="#div2">不平铺</a><br />
		<a href="#div3">让不平铺的图片位置移动</a><br />
		<a href="#div4">让背景起始渲染位置为内容区</a><br />
		<a href="#div5">让背景从内容区开始剪裁</a><br />
		<a href="#div6">背景自动调整大小适应容器</a><br />
		<div id="div1" class="background-image"></div>
		<div id="div2" class="background-image  background-no-repeat"></div>
		<div id="div3" class="background-image  background-no-repeat background-position"></div>
		<div id="div4" class="background-image  background-origin"></div>
		<div id="div5" class="background-image  background-origin background-clip"></div>
		<div id="div6" class="background-image background-size"></div>
	</body>
</html>

6、渐变

注意：渐变是图片，而不是颜色，所以我们设置渐变颜色，应该使用图片属性，background-image

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{	/*权重为0*/
				margin: 0;
				padding: 0;
				border: 0;
			}
			/* 使图片垂直居中，水平居中通过text-align：center即可 */
			html,body{
				height: 100%;
				overflow: hidden;/* 清除默认滚动条 */
			}
			div{
				width: 200px;
				height: 50px;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				border: 2px aqua solid;
				display: none;
			}
			a{
				text-decoration: none;
			}
			:target{
				display: block;
			}
			.linear-gradient{
				/* background-image: linear-gradient(pink,darkmagenta); */ /* 此种渐变是默认渐变，只需要指定颜色，默认从上向下渐变*/
				/* background-image: linear-gradient(to right,pink,darkmagenta); */ /* 此种渐变 指定了渐变方向， to 结束方向*/
				/* background-image: linear-gradient(45deg,pink,darkmagenta,blue);*/ /* 指定角度渐变，角度单位是deg*/ 
				background-image: linear-gradient(45deg,pink 10%,darkmagenta 20%,blue 30%);/* 指定渐变的范围，这里表示前百分之10用分时，10%~20%用紫色，20%~30%蓝色，30%~100%没有指定，用最后一种颜色 */				
				/* 不光可以按百分比指定，还可以按像素px指定，pink 20px */
			}
			.repeating-linear-gradient{
				background-image: repeating-linear-gradient(45deg,pink,darkmagenta,blue 50%);
			}
			/* 发廊灯 */
			#div3{
				overflow: hidden;
			}
			.light{
				display: block;
				width: 1000px;
				height: 100%;
				background-image: repeating-linear-gradient(45deg,pink 0px,pink 10px,darkmagenta 10px,darkmagenta 20px);
			}
			.light:hover{
				transition: 5s;
				background-position: -500px;
			}
			/* 文字渐变特效 */
			#div4{
				width: 700px;
				height: 100px;
				font-size:40px;
				text-align: center;
				line-height: 100px;
				background-color: black;
			}
			h1{
				color: rgba(128,128,128,0.3);
				background-image: linear-gradient(95deg,rgba(255,255,255,0) 10px,rgba(255,255,255,1) 20px,rgba(255,255,255,0) 40px);
				-webkit-background-clip:text;
			}
			.radial-gradient{
				background-image: radial-gradient(pink,darkmagenta);
				/* background-image: radial-gradient(circle,pink 50%,darkmagenta 50%); */
			}
		</style>
		
	</head>
	<body>
		<a href="#div1">线性渐变</a><br />
		<a href="#div2">重复线性渐变</a><br />
		<a href="#div3">发廊灯使用js，css实现鼠标指入触发发廊灯，注释js代码即可</a><br />
		<a href="#div4">文字渐变特效</a><br />
		<a href="#div5">径向渐变</a><br />
		<div id="div1" class="linear-gradient"></div>
		<div id="div2" class="repeating-linear-gradient"></div>
		<div id="div3">
			<div class="light"></div>
		</div>
		<div id="div4">
			<h1>T e s t 文 字 </h1>
		</div>
		<div id="div5" class="radial-gradient"></div>
	</body>
	
	<script type="text/javascript">
		let light=document.querySelector(".light");
		let h1=document.querySelector("h1");
		let flag=0;
		let flag2=0
		setInterval(function(){
			if(flag++===1000) flag=0;
			if(flag++===700) flag=0;
			light.style.backgroundPosition=-flag+"px";
			h1.style.backgroundPosition=flag+"px";
		},1000/60)
	</script>
</html>

7、过渡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{	/*权重为0*/
				margin: 0;
				padding: 0;
				border: 0;
			}
			/* 使图片垂直居中，水平居中通过text-align：center即可 */
			html,body{
				height: 100%;
				overflow: hidden;/* 清除默认滚动条 */
			}
			div{
				width: 200px;
				height: 50px;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				border: 2px aqua solid;
				display: none;
			}
			a{
				text-decoration: none;
			}
			:target{
				display: block;
			}
			.div1_transtion:hover{
				width: 100px;
				height: 25px;
				transition-property:width ;/* 指定对那些可过渡属性进行过渡，可以一次指定多个，用逗号分隔，默认为all */
				transition-duration:2s;
			}
			.div2_transtion:hover{
				width: 100px;
				height: 25px;
				transition-property:width,height ;/* 指定对那些可过渡属性进行过渡，可以一次指定多个，用逗号分隔，默认为all */
				transition-duration:5s,2000ms;/* 此时，你的时间会对应你上面的设置的列表，如果数量少于上面的列表，会从当前时间最前面复制等价的时间填充，比如上面有3个参数，而这里只指定了两个时间，就会复制5s给第三个时间 */
				/* 注意如果是0秒，必须写0s，而不能写0，会让所有时间失效 */
			}
			.div3_transtion:hover{
				width: 100px;
				height: 25px;
				transition-property:width;
				transition-duration:5s;
				
				transition-timing-function: linear;
				/* 属性值:
					1，ease:(加速然后减速)默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0). ，
					2、linear: (匀速) ，linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
					3、ease-in: (加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
					4、ease-out: ( 减速)，ease- out函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
					5、ease-in-out: (加速然后减速) ，ease-in-out函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) 
					6、cubic- bezier:贝塞尔曲线，可以通过cubic- bezier网站生成，非常好用，网站名就叫这个
					7、step-start: 等同于steps( 1,start)
						step-end:等同于steps(1,end)
						steps( <integer>,[,[start| end]]?)
						第一个参数:必须为正整数，指定函数的步数
						第二个参数:指定每一步的值发生变化的时间点(默认值end)*/
			}
			.div4_transtion:hover{
				width: 100px;
				height: 25px;
				transition-property:width;
				transition-duration:5s;
				transition-delay: 1s;/* 延迟1s */
			}
			.div5_transtion:hover{
				transition-property:width,height;
				transition-duration:1s,1s;
			}
		</style>
		
	</head>
	<body>
		<h1>注意，我这里为了方便将设置过渡的代码都放在了伪类里面，也就会造成进入伪类有动画，而移出伪类的时候没有动画</h1>
		<a href="#div1">仅仅使宽度发生过渡动画（2s）,你会发现其他可以过渡的内容都是瞬间完成，而只有宽度的变化，持续了2秒</a><br />
		<a href="#div2">同时让高度和宽度发生过渡，高度使用2s，宽度使用5秒</a><br />
		<a href="#div3">让宽度发生过渡动画，设置其过渡类型为匀速</a><br />
		<a href="#div4">让宽度发生过渡动画，让其过渡延迟1s后在过渡</a><br />
		<a href="#div5">让宽度和高度发生过渡动画，监听过渡完成事件，你会发现一共触发了两次，也就是说，每当有一个可过渡属性过渡完成，都会触发一次过渡完成事件</a><br />
		<div id="div1" class="div1_transtion"></div>
		<div id="div2" class="div2_transtion"></div>
		<div id="div3" class="div3_transtion"></div>
		<div id="div4" class="div4_transtion"></div>
		<div id="div5" class="div5_transtion"></div>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			let div5=document.querySelector("#div5");
			div5.onmouseover=function(){
				div5.style.width="100px";
				div5.style.height="25px";
			}
			div5.addEventListener("transitionend",function(){
				alert("触发了过渡动画完成事件")
			})
		}
	</script>
</html>

常见问题
过渡在元素首次渲染之前不会触发（经常会遇到用js代码来改变元素属性，但是这个改变在元素渲染之前运行，导致过渡动画无法触发）；解决办法，等待所有页面元素渲染完再执行js，常用做法就是windows.onload()

过渡属性简写

/*简写属性transition: 
	transition是一个简写 属性，用于
	transition- property, transition- duration, transition- timing- function,和transition- delay。
	CSS过渡由简写属性transition定义是最好的方式，可以避免属性值列表长度不一，节省调试时间
	默认值:
	transition- delay: 0s
	transition- duration: 0s
	transition- property: all
	transition- timing- function: ease
	注意
	在transition属性中，各个值的书写顺序是很重要的:第一个可以解析为时间的值会被赋值给
	transition-duration;第二个可以解析为时间的值会被赋值给transition- delay*/

8、变换(变形)

1、2D变形

通过transform属性完成，只能对block元素生效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{	/*权重为0*/
				margin: 0;
				padding: 0;
				border: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;/* 清除默认滚动条 */
			}
			/* 动态超链接 */
			a{
				text-decoration: none;
			}
			:target{
				display: block;
			}
			
			/* div样式 */
			div{
				background-color: pink;
				/* 使盒模型居中 */
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 200px;
				height: 200px;
				/* 文字居中 */
				text-align: center;
				line-height: 200px;
				/* 隐藏 */
				display: none;
				
				transition: 2s;
			}
			
			.add-translate:hover{
				transform: translate(200px,200px);
				平移(translate)
					X方向平移: transform: transatex(tx)
					Y方向平移: transform: translateY(ty)
					二维平移: transform: translate(tx[, ty]); 如果ty没 有指定，它的值默认为0。
					可设单值，也可设双值。
					正数表示XY轴正向位移，负数为反向位移。设单值表示只X轴位移，Y轴坐标不变，
					例如transform: translate( 100px);等价于transform: translate(100px,0);
			}
			.add-skew:hover{
				transform: skew(12deg,0);
				/*
				倾斜(skew)
					transform:skewX(45deg);
						X方向倾斜:transform: skewX(angle)
					skewX(45deg):参数值以deg为单位代表与y轴之间的角度
						Y方向倾斜: transform: skewY(angle)
					skewY(45deg):参数值以deg为单位代表与x轴之间的角度
						二维倾斜:transform: skew(ax[, ay]);如果ay未提供，在Y轴上没有倾斜
					skew(45deg, 15deg):参数值以deg为单位第一个参数代表与y轴之间的角度
						第二个参数代表与x轴之间的角度
						单值时表示只X轴扭曲，Y轴不变，如transform: skew(30deg);等价于
					transform: skew(30deg, 0);
						考虑到可读性，不推荐用单值，应该用transform: skewX(30deg);。skewY表示
						只Y轴扭曲，X轴不变
						
				正值:拉正斜杠方向的两个角
				负值:拉反斜杠方向的两个角*/
			}
			.add-scale:hover{
				transform: scale(.9,1.2);
				/*
					缩放(scale)
						transform:scale(2) ;
						X方向缩放: transform: scaleX(sx) ;
						Y方向缩放:transform: scaleY (sy);
						二维缩放:transform: scale(sx[，sy]) ; (如果sy未指定，默认认为和sx的值相同)
						要缩小请设0.01~0.99之间的值，要放大请设超过1的值。
						
						例如缩小一倍可以transform: scale(.5);
							放大一倍可以transform: scale (2);
						如果只想x轴缩放，可以用scaleX(.5)相当于scale(.5，1) 。
						同理只想Y轴缩放，可以用scalex[ .5)相当于scale(1，.5)
						
						正值:缩放的程度
						负值:不推荐使用(有旋转效果)
						
						单值时表示只X轴,Y轴上缩放粒度一样 ，如transform: scale(2);等价于transform: scale(2,2);
				*/
			}
			.add-rotate:hover{
				transform: rotate(720deg);
				/* 旋转和其他都差不多 */
			}
			.add-origin{
				transform-origin: left top;/* 可以写一个值，也可以写多个值确定基点位置，或者写 10px 10px 来用像素指定位置 */
				/* 改变发生变形的基点，默认为中心 ，对几乎所有变形生效，位移不生效，因为它参照的是位置不是基点*/
			}
		</style>
		
	</head>
	<body>
		<a href="#div1">平移</a><br />
		<a href="#div2">倾斜</a><br />
		<a href="#div3">缩放</a><br />
		<a href="#div4">旋转</a><br />
		<a href="#div5">改变基点旋转（左上）</a><br />
		<div id="div1" class="add-translate">div</div>
		<div id="div2" class="add-skew">div</div>
		<div id="div3" class="add-scale">div</div>
		<div id="div4" class="add-rotate">div</div>
		<div id="div5" class="add-rotate add-origin">div</div>
	</body>
</html>

2、矩阵

二维变形都是通过矩阵来实现的，你需要知道矩阵不满足交换律

/* 这两个组合变形结果不相同，因为矩阵不满足交换律 */
				transform: translate(200px,200px) rotate(34deg);
				transform: rotate(34deg) translate(200px,200px);

在这里插入图片描述

4、3D变形

学过素描的都知道，想要在二维平面画出立体效果，一定要遵循近大远小的原则
css中，通过设置景深来实现变形的近大远小，达到立体的效果，所以我们想要3d变换时，必须先设置景深
景深的原理就是设置灭点（人看物体，比如火车轨道，越远，你就会发现轨道越小，最后成一个点，这个点就是灭点，我们通过设置灭点的远近，控制变换的幅度）
最后，想要更好的效果还需要层级transform-style: preserve-3d;/* 给3d变换一个层级，光近大远小是不够的 */

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{	/*权重为0*/
				margin: 0;
				padding: 0;
				border: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;/* 清除默认滚动条 */
			}
			/* 动态超链接 */
			a{
				text-decoration: none;
			}
			:target{
				display: block;
			}
			
			/* div样式 */
			div{
				background-color: pink;
				/* 使盒模型居中 */
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 200px;
				height: 200px;
				/* 文字居中 */
				text-align: center;
				line-height: 200px;
				/* 隐藏 */
				display: none;
				
				transition: 2s;
			}
			body{
				/*
					景深(perspective)
						景深:
							景深(英语: Depth of field, DOF)景深是指相机对焦点前后相对清晰的成像范围。在光学中，尤其是录影或是摄影，是一个描述在空间中，可以清楚成
								像的距离范围。虽然透镜只能够将光聚到某一固定的距离，远离此点则会逐渐模糊，但是在某一段特定的距离内，影像模糊的程度是肉眼无法察觉的，这段
								距离称之为景深。当焦点设在超焦距处时，景深会从超焦距的一半延伸到无限远，对一个固定的光圈值来说，这是最大的景深
									简单的理解，景深就是我们的肉眼距离显示器的距离，景深越大，元素离我们越远，效果就不好，在我们CSS3中，perspective用于激活一个3D空间，
									属性值就是景深大小(默认none无景深)
									应用景深的元素称为“舞台元素”，舞台元素的所有后代元素都会受影响，( 如果后代元素中也添加了perspective属性，效果会叠加而不是覆盖)
					transform: perspective( depth);
					depth的默认值是none，可以设置为一个长度值，这个长度是沿着Z轴距离坐标原点的距离。1000px被认为是个正常值
					若使用perspective()函数，那么他必须被放置在transform属性的首位，如果放在其他函数之后，则会被忽略
				*/
			   
				perspective: 700px;
				/* perspective-origin: left top;*//* 设置灭点的位置 */
				/* 我们景深要放在承载动画元素的容器中 */
			}
			.add-scale3d:hover{
				/* transform: rotateX(360deg); */
				transform: rotate3d(150,20,0,360deg);/* 复合旋转，通过指定两点，形成射线来旋转 */
				/* 设置景深后，可以通过选择属性设置动画，routateX|Y|Z 都可以单轴旋转 */
			}
			.add-translateZ:hover{
				transform: translateZ(350px);
			}
			.add-scaleZ:hover{
				transform: scaleZ(2);
				transform: translateZ(450px);
				/*
					3D缩放
					transform: scale Z(number)
					transform: scale3d(scaleX,scaleY,scaleZ);
					如果只设置scaleZ(number)，你会发现元素并没有被扩大或压缩，scaleZ(number)需要和translateZ(length)配
					合使用，number乘以length得到的值，是元素沿Z轴移动的距离，从而使得感觉被扩大或压缩
				*/
				 backface-visibility: hidden;/* 不显示元素背面 */
			}
		</style>
		
	</head>
	<body>
		<a href="#div1">3d旋转</a><br />
		<a href="#div2">3d移动</a><br />
		<a href="#div3">3d缩放</a><br />
		<div id="div1" class="add-scale3d">div</div>
		<div id="div2" class="add-translateZ">div</div>
		<div id="div3" class="add-scaleZ">div</div>
	</body>
</html>

9、动画

1、动画api

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

		<style>
			*{	/*权重为0*/
				margin: 0;
				padding: 0;
				border: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;/* 清除默认滚动条 */
			}
			/* 动态超链接 */
			a{
				text-decoration: none;
			}
			:target{
				display: block;
			}
			
			/* div样式 */
			body > div{
				/* 使盒模型居中 */
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 200px;
				height: 200px;
				/* 文字居中 */
				text-align: center;
				line-height: 200px;
				/* 隐藏 */
				display: none;
				
				transition: 2s;
			}
			body > div div{
				background-color: pink;
			}
			/* 简单旋转动画 */
			.add-animation-rotate{
				animation-name: rotate;/* 使用指定关键帧 */
				animation-duration: 3s;
				animation-timing-function: linear;
				animation-delay: 1.25s, 100ms;
				animation-iteration-count:infinite;
				animation-direction: alternate-reverse;
				animation-fill-mode: both;
				/* animation-play-state: paused; */
				/* 注意每个属性作用范围，如果是作用于动画外，要特别注意
					1、animation-name （动画内）
						animation-name.属性指定应用的一系列动画，每个名称代表-个由@keyframes定义的动画序列
						值:
							none
								特殊关键字，表示无关键帧。
							keyframename
								标识动画的字符串
					2、animation-duration（动画内）
						animation- duration属性指定一个动画周期的时长。默认值为0s,表示无动画。
						
						值
							一-个动画周期的时长，单位为秒(s)或者毫秒(ms)，无单位值无效。
							注意:负值无效，浏览器会忽略该声明，但是一些早起的带前缀的声明会将负值当作0s
					3、animation-timing-function（动画内）作用于关键帧
						动画的默认效果:由慢变快再变慢
							linear:线性过渡，等同于贝塞尔曲线(0,0,1,1)
							ease:平滑过渡，等同于贝塞尔曲线(0.25,0.1,0.25,1.0)
							ease-in:由慢到快，等同于贝塞尔曲线(0.42,0,1,1)
							ease- out:由快到慢，等同于贝塞尔曲线(0,0,0.58,1)
							ease-in- out:由慢到快再到慢，等同于贝塞尔曲线(0.42,0,0.58,1)
							cubic-bezier(1,1,2,3)
							steps(n,[start| end]) 传入一到两个参数，第一-个参数意思是把动画分成n等分，然后动画就会平均地运行。
									第二个参数start表示从动画的开头开始运行，相反，end就表示从动画的结尾开始运行，
									默认值为end。
					4、animation-delay（动画外）
						定义动画开始前等待的时间，以秒或毫秒计(属于动画外的范畴)
						注意如果你设置动画的重复次数，不会每次重复都等待，而仅仅在整个动画开始时延迟
					5、animation-iteration-count（动画内）
						定义了动画执行的次数(属于动画内的范畴)
						输入数值100表示执行100次以此类推
						infinite表示无限重复
					6、animation-direction（动画内）作用于关键帧
						定义了动画执行的次数(属于动画内的范畴)
						normal 表示正常的从第一个关键帧往后执行，比如from-to然后再到from-to依次循环
						alternate 表示正常的从第一个关键帧往后执行，比如from-to，然后到达一定步数执行to-from
						reverse 表示从最后一个关键字往前执行动画，比如to-from
						 alternate-reverse 从from到to然后再由to到from
					7、animation-fill-mode （动画外）
						定义动画外的状态，比如from之前，to之后的元素状态
						经常遇到动画结束后与下一次动画不连贯的问题，比如当前元素在页面中心，动画让他从上向下运动，最后一次运动到页面底部，此时会刷新
						元素让它重新回到中间，导致不好的体验
						
						backwards 表示from之前的状态和from保持一致
						forwards 表示to之后的状态和to保持一致
						both 同时具有前面两个功能
					8、animation-play-state（动画内）
						设置动画的运行和暂停
						
						paused 动画暂停
				*/
			   
			   /* 简写形式
					简写属性animation
						animation:
							animation- name
							animation- duration
							animation- timing- function
							animation- delay
							animation- iteration- count
							animation- direction
							animation- fll-mode
							animation- play- state
						在每个动画定义中，顺序很重要:可以被解析为<time>的第一个值被分配给
						animation- duration,第二个分配给animation- delay。
			   */
			}
			.add-animation-rotate:hover{
				animation-play-state: paused;
			}
			@keyframes rotate{
				from{
					transform:rotate(720deg);
				}
				to{
					transform: rotate(0deg);
				}
			}
			/*	
				关键帧( @keyframes)
					语法:
					@keyframes animiationName{
						keyframes-selector{
							css-style;
						}
					}
					animiationName:必写项，义动画的名称
					keyframes-selector:必写项，动画持续时间的百分比
					有两个特殊值
						from: 0%
						to: 100%
					css-style: css声明
			*/
		   /* 百分百多帧动画*/
		   .add-animation1{
			   width: 15px;
			   transform-origin:bottom ;
			   animation-name: animation1;
			   animation-duration: 3s;
			   animation-timing-function: linear;
			   animation-iteration-count:infinite;
			   
		   }
		   @keyframes animation1{
		   	0%{
				transform: rotate(0deg);
			}
			25%{
				transform: rotate(-15deg);
			}
			50%{
				transform: rotate(0deg);
			}
		   	75%{
				transform: rotate(15deg);
			}
			100%{
				transform:rotate(0deg)
			}
		   }
		</style>
		
	</head>
	<body>
		<a href="#div1">旋转</a><br />
		<a href="#div2">百分比多帧动画</a><br />
		<div id="div1">
			<div class="add-animation-rotate">旋转</div>
		</div>
		<div id="div2">
			<div class="add-animation1">|</div>
		</div>
	</body>
</html>

10、flex布局

概念
容器，就是设置布局的块元素
项目，就是容器中的子元素
主轴，就是x轴，右面是正方向
侧轴，y轴，下面是正方向
项目永远排列在主轴的正方向上
新旧两个版本都需要掌握，带-webkit-box前缀的都是旧版

1、新旧对比

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

		<style>
			*{	/*权重为0*/
				margin: 0;
				padding: 0;
				border: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;/* 清除默认滚动条 */
			}
			/* 动态超链接 */
			a{
				text-decoration: none;
			}
			:target{
				display: block;
			}
			/*
				flex布局
					CSS3弹性盒子(Flexible Box或Flexbex)，是一种用 于在页面上布置元素的布局模式，使得当页面布局必须适应
					不同的屏幕尺寸和不同的显示设备时，元素可预测地运行/列。对于许多应用程序，弹性盒子模型提供了对块模型的
					改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。
				
				弹性盒模型，分老版与新版
					老版本的我们通常称之为box
					新版本的我们通常称之为flex
				容器与项目
				主轴与侧轴
					由flex-direction/ -webkit -box -orient确定
				有了新版本后，为什么还需要老版本?(新版本比老版本要强大的很多)
					很多移动端浏览器内核版本都超低,只支持旧版
			*/
			body > div{
				width: 500px;
				height: 500px;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				border: 3px blue solid;
				overflow: auto;
				resize: both;
				display: none;
			}
			.item{
				width: 50px;
				height: 50px;
				background-color: pink;
				text-align: center;
				line-height: 50px;
				float: left;
			}
			/*
				容器的布局方向(旧版)
					webkit-box-orient: hori zomtal;
					- webkit-box-orient: vertical;
					
					(注意:项目永远是在主轴上排列的)
					-webkit-box-orient属性本质上确定了主轴是哪一根，也就是指定主轴
						horizontal : x轴
						vertical :y轴
						
				容器的布局方向(新版)
					flex-direction:column|row;
					
					指定主轴
					column:y轴
					row:x轴
			*/
		   #wrap1删掉汉字测试{
			   /* 旧版*/
			   /* display: -webkit-box;
			   -webkit-box-orient:vertical; */
			   /* 新版*/
			   display: flex;
			   flex-direction: column;
		   }
			
			/*
				容器排列方向(旧)
					-webkit-box-direction: normal;
					-webkit-box-direction: reverse;
				(注意:项目永远是沿着主轴的正方向排列的)
					-webkit-box-direction属性本质上改变了主轴的方向，控制主轴的方向
				容器排列方向(新)
					flex-direction:column-reverse;
					用一个属性控制主轴方向和排列方向
			*/
		   #wrap1删掉汉字测试{
			   /* 旧版*/
			  /* display: -webkit-box;
			   -webkit-box-orient:vertical ;
			   -webkit-box-direction: reverse; */
			   /* 新版*/
			   display: flex;
			   flex-direction: column-reverse;
		   }
		   
		   /*
			富裕空间的管理(旧)
				富裕空间的管理(主轴)
				start  富裕空间在右边
				end    富裕空间在左边
				center 富裕空间在中间
				justify 富裕控制在两两之间
				-webkit-box-pack:start;不会给项目区分配空间，只是确定富裕空间的位置
			富裕空间的管理(侧轴)
				start 
				end   
				center 
				-webkit-box-align:center;不会给项目区分配空间，只是确定富裕空间的位置
				
			富裕空间的管理(新)
				更强大的富裕空间的管理(主轴)
					justify- content: flex- start;
					flex-start  富裕空间在主轴正方向
					flex- end   富裕空间在主轴的反方向
					content     富裕空间主轴两边
					space- between 在项目（就是不同的元素）之间
					space- around(box没有的) 在项目两边
				更强大的富裕空间的管理(侧轴)
					align- items: stretch;
					flex- start
					flex- end
					center
					baseline(box没有的)
					stretch(box没有的)
		   */
		  #wrap1{
			  /* 旧版*/
			  /* display: -webkit-box;
			  -webkit-box-orient:vertical ;
			  -webkit-box-direction: reverse;
			  -webkit-box-pack: center; */
			  /* 新版*/
			  display: flex;
			  justify-content:center;
		  }
		</style>
		
	</head>
	<body>
		<h3>每一个盒子都可以控制大小，体会不一样的布局效果吧！注意测试前删掉选择器中的汉字</h3>
		<a href="#wrap1">容器布局方向</a><br />
		<a href="#wrap1">容器排列方向</a><br />
		<a href="#wrap1">富裕空间</a><br />
		<div id="wrap1">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
		</div>
	</body>
</html>

2、容器和项目

项目因子
给项目设置因子，会将主轴空间按照因子比例，分配到width属性上
旧版-webkit-box-flex: 因子;
新版flex-grow: 因子;
注意是给每个项目（容器中元素）单独设置，你可以给第一个元素4，剩下的都是1，那么会按照比例将空间赋值给每个项目的width属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

		<style>
			*{	/*权重为0*/
				margin: 0;
				padding: 0;
				border: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;/* 清除默认滚动条 */
			}
			/* 动态超链接 */
			a{
				text-decoration: none;
			}
			:target{
				display: block;
			}
			/*
				flex布局
					CSS3弹性盒子(Flexible Box或Flexbex)，是一种用 于在页面上布置元素的布局模式，使得当页面布局必须适应
					不同的屏幕尺寸和不同的显示设备时，元素可预测地运行/列。对于许多应用程序，弹性盒子模型提供了对块模型的
					改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。
				
				弹性盒模型，分老版与新版
					老版本的我们通常称之为box
					新版本的我们通常称之为flex
				容器与项目
				主轴与侧轴
					由flex-direction/ -webkit -box -orient确定
				有了新版本后，为什么还需要老版本?(新版本比老版本要强大的很多)
					很多移动端浏览器内核版本都超低,只支持旧版
			*/
			body > div{
				width: 500px;
				height: 500px;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				border: 3px blue solid;
				overflow: auto;
				resize: both;
				display: none;
			}
			.item{
				width: 50px;
				height: 50px;
				background-color: pink;
				text-align: center;
				line-height: 50px;
				float: left;
				/* 旧版 */
				/* -webkit-box-flex: 1; */
				/* 新版 */
				flex-grow: 1;
			}
		   #wrap1{
			   /* 旧版*/
			   /* display: -webkit-box; */
			   
			   /* 新版 */
			   display: flex;
			   flex-direction: column;
		   }
		</style>
		
	</head>
	<body>
		<h3>每一个盒子都可以控制大小，体会不一样的布局效果吧！注意测试前删掉选择器中的汉字</h3>
		<a href="#wrap1">容器布局方向</a><br />
		<div id="wrap1">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
		</div>
	</body>
</html>

新版功能
flex-wrap，控制容器单列显示还是多列显示，定义侧轴方向
align-content,多行多列时，富裕空间的管理
flex- flow,设置“flex- direction”和“flex-wrap"的简写
order,设置弹性容器中，项目布局时的顺序，order越大，排名越后，默认0
align-self会对齐当前flex行中的flex元素，并覆盖align-items的值.如果任何flex 元素的侧轴方向margin值设置为auto，则会忽略align-self
flex-shrink属性指定了flex 元素的收缩因子默认值为1，注意与flex-grow区分
flex-basis指定了flex 元素在主轴方向上的初始大小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

		<style>
			*{	/*权重为0*/
				margin: 0;
				padding: 0;
				border: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;/* 清除默认滚动条 */
			}
			/* 动态超链接 */
			a{
				text-decoration: none;
			}
			:target{
				display: block;
			}
			/*
				flex布局
					CSS3弹性盒子(Flexible Box或Flexbex)，是一种用 于在页面上布置元素的布局模式，使得当页面布局必须适应
					不同的屏幕尺寸和不同的显示设备时，元素可预测地运行/列。对于许多应用程序，弹性盒子模型提供了对块模型的
					改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。
				
				弹性盒模型，分老版与新版
					老版本的我们通常称之为box
					新版本的我们通常称之为flex
				容器与项目
				主轴与侧轴
					由flex-direction/ -webkit -box -orient确定
				有了新版本后，为什么还需要老版本?(新版本比老版本要强大的很多)
					很多移动端浏览器内核版本都超低,只支持旧版
			*/
			body > div{
				width: 500px;
				height: 500px;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				border: 3px blue solid;
				overflow: auto;
				resize: both;
				display: none;
			}
			.item{
				width: 50px;
				height: 50px;
				background-color: pink;
				text-align: center;
				line-height: 50px;
				/* float: left; */
			}
		   #wrap1{
			   /* 新版 */
			   display: flex;
			   flex-wrap: wrap;/* 设置布局为给项目沿着侧轴自动换行 */
			   align-content: flex-start;/* 多行多列时，富裕空间的管理为主轴正面 */
			   /*
				flex-wrap
					flex-wrap属性控制了容器为单行/列还是多行/列。并且定义了侧轴的方向，新行/列将沿侧轴方向堆砌。
					默认值: nowrap
					
					不可继承
					
				值: nowrap 不换行 | wrap 换行 | wrap-reverse
				
				flex-flow
					flex- flow属性是设置“flex- direction”和“flex-wrap"的简写
					默认值: row nowrap
					不可继承
					控制主轴和侧轴的位置以及方向
				flex-shrink
					flex-grow属性定义弹性盒子项(flex item)的拉伸因子。
					flex-shrink属性指定了flex 元素的收缩因子默认值为1
				flex-basis
					flex-basis指定了flex 元素在主轴方向上的初始大小
					默认值: auto不可继承
					注意:
					在flex简写属性中flex- basis的默认值为0
					fex- grow :
						可用空间= (容器大小-所有相邻项目flex-basis的总和)
						可扩展空间= (可用空间/所有相邻项目flex- grow的总和)
						每项伸缩大小= (伸缩基准值+ (可扩展空间x flex- grow值))
					flex- shrink :
						每项fex收缩大小=伸展基准值- (收缩比例/收缩比例总和x溢出的空间)-->并不是
			   */
		   }
		   #wrap1 :nth-child(3){
			   color: #0000FF;
			   order: 3;
			   /*
				order
					order属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照order属性的值的增序进行布局。拥有相同
					order属性值的元素按照它们在源代码中出现的顺序进行布局
					order越大越后
					默认值: 0不可继承
			   */
			  
			  align-self:flex-end;
			  /*
				align-self
					align-self会对齐当前flex行中的flex元素，并覆盖align-items的值.如果任何flex 元素的侧轴方向margin值设置为auto，则会忽略align-self。
					默认值: auto   不可继承	
					
					值:
						auto
							设置为父元素的align-items值，如果该元素没有父元素的话，就设置为stretch。
						flex- start
							flex元素会对齐到cross- axis的首端。
						flex- end
							flex元素会对齐到cross- axis的尾端。
						center
							flex元素会对齐到cross-axis的中间，如果该元素的cross-size 的尺寸大于flex容器，将在两个方向均等溢出。
						baseline
							所有的flex元素会沿着基线对齐，
						stretch
							flex元素将会基于容器的宽和高，按照自身margin box的cross-size 拉伸
			  */
		   }
		   
		</style>
		
	</head>
	<body>
		<h3>每一个盒子都可以控制大小，体会不一样的布局效果吧！注意测试前删掉选择器中的汉字</h3>
		<a href="#wrap1">容器布局方向</a><br />
		<div id="wrap1">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
		</div>
	</body>
</html>

3、等分布局与flex简写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

		<style>
			*{	/*权重为0*/
				margin: 0;
				padding: 0;
				border: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;/* 清除默认滚动条 */
			}
			/* 动态超链接 */
			a{
				text-decoration: none;
			}
			:target{
				display: block;
			}
			/*
				flex布局
					CSS3弹性盒子(Flexible Box或Flexbex)，是一种用 于在页面上布置元素的布局模式，使得当页面布局必须适应
					不同的屏幕尺寸和不同的显示设备时，元素可预测地运行/列。对于许多应用程序，弹性盒子模型提供了对块模型的
					改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。
				
				弹性盒模型，分老版与新版
					老版本的我们通常称之为box
					新版本的我们通常称之为flex
				容器与项目
				主轴与侧轴
					由flex-direction/ -webkit -box -orient确定
				有了新版本后，为什么还需要老版本?(新版本比老版本要强大的很多)
					很多移动端浏览器内核版本都超低,只支持旧版
			*/
			body > div{
				width: 500px;
				height: 500px;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				border: 3px blue solid;
				overflow: auto;
				resize: both;
				display: none;
			}
			.item{
				width: 50px;
				height: 50px;
				background-color: pink;
				text-align: center;
				line-height: 50px;
				
			    /* flex-basis: 0;/* 设置等分基数为0 */
			    flex-grow: 1;/* 设置扩张因子为1 */
			    flex-shrink: 1;/*  设置收缩因子为1*/ */
				
				
				flex: 1;/* 简写形式，和上面3条效果一样 */
			   
			}
		   #wrap1{
			   /* 新版 */
			   display: flex;
		   }
		   
		</style>
		
	</head>
	<body>
		<h3>每一个盒子都可以控制大小，体会不一样的布局效果吧！注意测试前删掉选择器中的汉字</h3>
		<a href="#wrap1">容器布局方向</a><br />
		<div id="wrap1">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
		</div>
	</body>
</html>

四、响应式布局

核心就是媒体查询选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

		<style>
			*{	/*权重为0*/
				margin: 0;
				padding: 0;
				border: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;/* 清除默认滚动条 */
			}
			/*
				###css3媒体查询
					css3媒体查询是响应式方案核心
				###媒体类型
					all                         所有媒体(默认值)
					screen                      彩色屏幕
					print                       打印预览
					
					下面的了解即可
					
					projection                  手持设备
					tv                          电视
					braille                     盲文触觉设备
					embossed                    盲文打印机
					speech                      “听觉"类似的媒体设备
					tty                         不适用像素的设备
				###媒体属性
					width    (可加max min前缀，表示最大宽度，或最小宽度)（不加前缀表示绝对）
						浏览器窗口宽度
					height   (可加max min前缀)
						浏览器窗口高度
					device -width  (可加max min前缀)
						设备独立像素宽度 pc看分辨率，移动端看机械参数
					device-pixel-ratio (可加max min前缀，需要加webkit前缀)
						设备像素比 pc为1 移动端看机械参数
					orientation
						portrait竖屏
						landscape橫屏
						也就是说 @media screen and (orientation:portrait){这里的规则必须是彩色屏幕，并且当前浏览器状态为竖屏，就是宽小于高}
				###操作符，关键字(only,and,(, or),not)
					only:和浏览器兼容性有关。
						防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式。
						@media only screen and (min-width: 800px ){
										规则;
										规则
						@media screen and (min-width: 800px ){
										规则;
										规则
						}
						在老款的浏览器下
							@media only    --->    因为没有only这种设备规则被忽略，那么也就不会执行规则
							@media screen  --->    因为有screen这种设备而且老浏览器会忽略带媒体属性的查询，因为忽略了条件，一定会执行规则，这就糟了
							所以建议在每次抒写media query的时候带上only
					and:
						连接媒体属性、连接媒体类型
						对于所有的连接选项都要匹配成功才能应用规则
					or(,):和and相似
						对于所有的连接选项只要匹配成功一个就能应用规则
						@media screen and (orientation: landscape) ,(-webkit- device-pixel-ratio:20 {
							#wrap{
								border: 10px solid;
							}
						}
						上面第二个条件用逗号隔开了，因为第二个条件没有指定设备，所以逗号就是or，条件中只要有一个成立即可执行规则
					not:取反
					
			*/
		   #wrap1{
			   width: 100px;
			   height: 100px;
			   background-color: pink;
		   }
		   /* 定义媒体规则*/
		   
		   @media all {/* 给所有媒体加此规则（就是里面写的css样式表） */
				#wrap1{
					border: 1px aqua solid;
				}
		   }
		   
		   @media screen and (min-width:800px) {/* 给彩色屏幕 并且 最小宽度为800px的媒体添加此规则 ，你可以试试缩小窗口，会让此样式消失*/
				#wrap1{
					border: 10px #00FFFF solid;
				}
		   }
		</style>
		
	</head>
	<body>
		<div id="wrap1">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
		</div>
	</body>
</html>

HTML & CSS笔记(没有基础内容，比如br标签是换行什么的)，CSS2.1，CSS3，响应式布局

文章目录

一、基础（HTML和CSS中较复杂内容）

1、meta标签

2、CSS选择器

1、伪类选择器

2、伪元素

3、属性选择器

4、子元素伪类

5、兄弟选择器

6、否定伪类选择器

7、选择器的优先级和顺序

3、盒模型

1、浮动

2、定位

3、浮动与定位的区别，以及一些常用技巧

1、区别

2、技巧

二、css2.1

1、圣杯布局

2、等高布局

3、双飞翼布局

4、禁止系统默认滚动条

5、footer粘连布局

6、BFC

7、两列布局

8、元素的垂直水平居中

9、垂直水平居中

三、CSS3

1、概念

2、CSS3选择器的扩展使用

1、后代选择器和子选择器（直接后代选择器）的区别

2、属性选择器

3、伪类和伪元素

3、自定义字体（字体图标）

4、新增UI样式

1、文本

2、盒模型

5、背景

6、渐变

7、过渡

8、变换(变形)

1、2D变形

2、矩阵

4、3D变形

9、动画

1、动画api

10、flex布局

1、新旧对比

2、容器和项目

3、等分布局与flex简写

四、响应式布局

猜你喜欢