阶段学习（一）

定位

- 元素position属性的默认值static静态定位

1.相对定位
	- position:relative;
	- 参考物：元素自己
	- 是否脱离文档流：不脱离(元素的初始位置还占据空间)
	- 偏移距离
		top:100px;自己的顶部参考自己的顶部向下移动100px
		bottom:100px;自己的底部参考自己的底部向上移动100px
		left
		right
	- 用法：实现元素的位置的微调
2.绝对定位
	- position:absolute;
	- 参考物：外层具有position属性的元素,一层一层向上查找,如果都没找到最终参考浏览器空白文档区域做定位
	- 是否脱离文档流：脱离
	- 偏移距离
		top 自己的顶部距离参考物顶部的距离
		bottom 自己的底部距离参考物底部的距离
	- 用法：元素相互叠加的位置、大banner图(1920px)、下拉菜单
2.1.层叠顺序
	z-index:10;
	数值越大越靠前,没有单位
	注意：同级之间可以通过数值大小调整层叠顺序
		该属性必须有position属性才能生效
3.固定定位
	- position:fixed;
	- 参考物：浏览器空白文档区域
	- 是否脱离文档流：脱离
	- 偏移距离
	- 用法：狗皮膏药广告
4.粘性定位
	- position:sticky;
	- 参考物：浏览器空白文档区域
	- 是否脱离文档流：不脱离
	- 偏移距离 top:100px;
	- 用法：吸顶效果

补充

1.cursor: ;鼠标样式
	pointer小手
2.那些属性可以给负值
	z-index
	background-position
	margin
	text-indent
	top
	bottom
	left
	right
	letter-spacing

定位实现元素居中

1.父元素尺寸未知,子元素尺寸已知
	父{
		position: relative;
	}
	子{
		width: 100px;
		height: 100px;
		background: red;
		position: absolute;
		top: 50%; /*向下移动父元素高度的一半*/
		left: 50%; /*向右移动父元素宽度的一半*/
		margin-top: -50px; /*向上移动自己高度的一半*/
		margin-left: -50px; /*向左移动自己宽度的一半*/
	}
2.父元素子元素尺寸都未知
	注意：只适用于父元素尺寸大,子元素尺寸小
	父{
		position: relative;
	}
	子{
		width: 30px;
		height: 40px;
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

###Welcome to use MarkDown

定位的特殊用法：定位撑开元素尺寸

父元素{
	width: 500px;
	height: 500px;
	border: 2px solid #000;
	position: relative;
}
子元素{
	background: red;
	position: absolute;
	top: 10px; 自己顶部距离父元素顶部10px
	bottom: 20px; 自己底部距离父元素底部20px
	left: 30px; 自己左侧距离父元素左侧30px
	right: 40px; 自己右侧距离父元素右侧40px
}

宽高自适应

1.宽高默认值
	width:auto;
	height:auto;
2.最大最小宽高
	min-width最小宽度
	max-width最大宽度
	min-height最小高度
	max-height最大高度
	body{
		min-width: 1210px;
	}
3.平分浏览器高度
	html,body{
		height:100%;
	}
4.父元素高度塌陷
	- 父元素固定高度
	- 父元素添加overflow:hidden;
		父元素可以计算子元素高度 - 原因是该属性触发了BFC
	- 清除浮动clear:left / right / both ;
	- 万能清除浮动法
		父元素:after{
			content: ".";
			display: block;
			height: 0;
			clear: both;
			overflow: hidden;
			visibility: hidden;
		}

元素的隐藏

display:none; 消失,空间不再占据
visibility:hidden; 元素可见性:隐藏,元素的空间还在

伪对象选择器

1.给第一个字符添加样式
	.box:first-letter{}
2.给第一行添加样式
	.box:first-line{}
3.添加第一个子元素
	.wrap:before{
		content: "";
		display: block; 默认添加的元素为行内元素
		width: 100px;
		height: 100px;
		background: green;
	}
	.para:before{
		content: "小明说："; 添加文字
		content:"url(img/arrow.png)"; 添加图片
	}
4.添加最后一个子元素
	.wrap:after{
		content: "";
		display: block;
		width: 100px;
		height: 100px;
		background: blue;
	}

回顾

1.宽高默认值
	width:auto;和100%不一样
	height:auto;和不设置height是一样的
	子height:inherit;继承
2.最大最小宽高
	最小宽 min-width
	最大宽 max-width
	最大高 max-height
	最小高 min-height
3.平分body的高度
	html,body{height:100%}
4.高度塌陷
	固定高度
	overflow:hidden/auto/scroll;
		因为父元素触发了BFC,子元素高度参与计算
	清除浮动
		clear:left/right/both;
	万能清除浮动法
		父元素:after{
			content:".";
			display:block;
			height:0;
			clear:both;
			overflow:hidden;
			visibility:hidden;
		}
:before,:first-letter,:first-line

表单元素

1.单选按钮
	<input type="radio" name="gender" value="male"/>男
	<input type="radio" name="gender" value="female" checked/>女
	- 有相同的name,不同的value
	- checked代表默认被选中,等同于checked="checked"
2.复选框
	<input type="checkbox" name="job" value="bj"/>北京
	- 有相同的name,不同的value
	- checked代表默认被选中,等同于checked="checked"
3.下拉菜单
	<select name="cities" size="5">
		<option value="bj">北京</option>
		<option value="sh" selected>上海</option>
	</select>
	- size 显示的条数
	- selected 默认被选中,等同于selected="selected"
4.多行文本域
	<textarea name="intro" rows="4" cols="40"></textarea>
	- rows行数
	- cols 一行包含的字符数
	- 给textarea添加css(resize:none;)禁止用户更改元素尺寸
5.文件上传
	<input type="file">
	- 不同浏览器默认样式不同
6.表单字段集
	<fieldset id="">
		<legend>标题</legend>
		<p>10086</p>
	</fieldset>
7.关联文本
	- 第一种方法
	<label>
		<input type="radio" name="gender" value="male"/>男
	</label>
	- 第二种方法
	<input type="radio" name="gender" value="male" id="male"/>
	<label for="male">男</label>
	label的for属性关联控件的id属性

表格

1.表格行分组
	表头thead、表主体tbody、表尾tfoot
2.表格标题
	<caption></caption>
3.表格边框
	th,td{
		border: 1px solid #000;
	}
4.合并表格(细线表格1px粗细)
	table{border-collapse:collapse;}
5.单元格与单元格之间的间距
	代替掉了table的cellspacing="10px"属性
	table{border-spacing: 20px;}
6.无内容单元格显示、隐藏(前提是表格不能合并)
	th,td{empty-cells:hide;}
7.固定表格布局
	table{tbale-layout:fixed;}
	- 前提table固定宽度,每一列固定宽度
	- 默认是自动表格布局,值为auto
	- 自动表格布局,表格最终的宽度是由内容决定的,所以最终确定尺寸前要遍历表格里所有的内容
8.表格标题位置
	table{caption-side:top / bottom;}

面试题：一侧固定一侧自适应布局

1.浮动
2.固定定位
3.calc()计算尺寸方法
4.BFC方法
5.flex弹性盒
6.grid布局

BFC

独立的渲染区域,块级格式化上下文
1.BFC布局规则
	- 内部的Box会在垂直方向，一个接一个地放置。
	- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）
	- 每个元素的margin box的左边， 与包含块border box的左边相接触
	- BFC的区域不会与float box重叠。
	- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
	- 计算BFC的高度时，浮动元素也参与计算
2.如何触发BFC
	根元素(html)
	float属性不为none
	position为absolute或fixed
	display为inline-block, table-cell, table-caption, flex, inline-flex
	overflow不为visible

回顾

1.表单
	行内元素中能设置宽高的元素：img,input,select,textarea
	他们也是行内块
2.表格
	表格行分组
		thead表头、tbody表主体、tfoot表尾
	- 边框
		th,td{border:1px solid #666;}
	- 边框合并
		table{border-collapse:collapse;}
	- 单元格间距
		table{border-spacing:20px;}
	- 固定表格布局
		table-layout:fixed固定 / auto自动;
	- 无内容单元格隐藏(前提是表格边框不能合并)
		td{empty-cells:hide;}
	- 表格标题位置
		table{caption-side:top / bottom ;}
3.BFC
	块级格式化上下文,是一个独立的渲染区域
	- 浮动的子元素高度参与计算
	- 子元素不会影响外层元素
	- BFC区域不会与浮动元素重合
	触发bfc
		html
		float不为none
		position:absolute和fixed;
		overflow:不为visible
		display:inline-block,flex,inlin-flex

渐变

从一个颜色到另一个颜色有一个平滑的过渡过程
1.线性渐变
	background:linear-gradient(方向,颜色1,颜色2,颜色3...)
	方向：
		to right 由左向右
		to left 由右向左
		15deg 渐变的方向与垂直方向的夹角为15度
2.径向渐变
	background:radial-gradient(颜色1,颜色2...)
3.重复线性渐变
	background:repeating-linear-gradient(方向,颜色1 0%,颜色2 20%,...)
4.重复径向渐变
	background:repeating-radial-gradient(颜色1 0%,颜色2 20%,...);

过渡

- 元素从一个状态到另一个状态的平滑的变换过程
- 简写属性
	transition:过渡的属性  过渡时间  速度效果  延迟时间;
- 添加位置
	1.添加给:hover里是移入有过渡,移出没有过渡
	2.添加给元素本身,移入移出都有过渡
- 速度效果的值
	匀速过渡 linear
	先慢后快 ease-in
	先快后慢 ease-out
	由慢变快后变慢 ease-in-out
	默认值,慢速开始慢速结束 ease
- 多属性过渡效果
	transition: width 1s linear,height 2s ease-in,background 1s linear .4s; 每个属性过渡效果不同
	transition: all 1s linear; 每个属性过渡效果完全相同
- transition简写属性中每一个值对象的独立属性(了解)
	transition-property：过渡的属性
	transition-duration：过渡的持续时间
	transition-timing-function：过渡的动画
	transition-delay：延迟时间

浏览器前缀

-webkit- 谷歌google chrome 和 Safari
-moz- 火狐Mozilla Firefox
-o- 欧朋opera
-ms- IE浏览器
- 举例
	-ms-transition: all 2s linear ;
	background: -webkit-linear-gradient(90deg,#d6dfe9 0%,#fff 100%);

2d转换

1.位移
	transform:translate(100px);
		沿x轴移动,正值向右,负值向左
	transform:translate(100px,200px);
		第一个值代表x轴移动,第二个值代表y轴移动
	transform:translateX(100px);
		沿x轴移动
	transform:translateY(100px);
		沿y轴移动
2.旋转
	transform:rotate(30deg);
		正值代表顺时针旋转,负值代表逆时针旋转
2.1 转换中心
	transform-origin:0px 0px; 设置坐标点
	transform-origin:right top; 设置方向
	transform-origin:50% 50%; 设置百分比
3.缩放
	transform:scale(2);
		一个值是水平垂直都缩放
	transform:scale(2,0.5);
		第一个值代表水平方向,第二个值代表垂直方向
	transform:scaleX(2);
		水平方向缩放
	transform:scaleY(2);
		垂直方向缩放
4.倾斜
	transform:skew(30deg);
	transform:skewX(30deg);
	transform:skewY(30deg);

元素既位移又旋转

transform: translateX(200px) rotate(90deg);
	位移和移动空格隔开

各种居中办法

1.文本和图片的水平居中
	text-align:center;
2.单行文本的垂直居中
	line-height:父元素高度;
3.背景图的居中
	background-position:center center;
4.定位方法居中(2种方法)
5.translate方法实现元素水平垂直居中
	.father{
		position: relative;
	}
	.box{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		/*这里的50%是子元素自己尺寸的一半*/
		/*margin-top: -50px;
		margin-left: -50px;*/
	}

###Welcome to use MarkDown

回顾

1.渐变
	线性渐变
		background:linear-gradient(方向,颜色1,颜色2...)
	径向渐变
		background:radial-gradient(颜色1,颜色2...)
	重复线性渐变
		background:repeating-linear-gradient(方向,颜色1,颜色2...)
	重复径向渐变
		background:repeating-radial-gradient(颜色1,颜色2...)

2.过渡
	transition:过渡属性  过渡时间  速度效果  延迟时间;
	元素本身添加过渡,代表移入移出都有过渡
	给:hover添加过渡,代表只有移入有过渡
	多属性加不同过渡
		transition:width 1s,height 2s;
	多属性加相同过渡
		transition:all 1s linear;
	-webkit-transition:all 1s linear;
	
	过渡属性transition-property:width;
	过渡时间transition-duration:1s;
	动画效果transition-timing-function:linear;
	延迟时间transition-delay:0s;
3.2d转换
	位移
		transform:translate(100px);
		transform:translate(100px,200px);
		transform:translateX(100px);
		transform:translateY(100px);
	旋转
		transform:rotate(30deg);
	缩放
		transform:scale(2);
		transform:scale(2,0.5);
		transform:scaleX(2);
		transform:scaleY(2);
	倾斜
		transform:skewX(30deg);
		transform:skewY(30deg);
	转换中心：transform-origin
4.浏览器前缀
	-webkit-：谷歌和Safari
	-moz-：火狐
	-o-：欧朋Opera
	-ms-：IE
5.
	background:linear-gradient(方向,颜色1,颜色2...);
	background:-webkit-linear-gradient(方向,颜色1,颜色2...);
	background:-moz-linear-gradient(方向,颜色1,颜色2...);
	background:-o-linear-gradient(方向,颜色1,颜色2...);
	background:-ms-linear-gradient(方向,颜色1,颜色2...);

3d转换

景深,模拟人眼距离物体的距离,有较明显的近大远小的效果
	perspective:2000px; 给父元素添加
***子元素保留3d转换位置
	transform-style:preserve-3d; 给父元素添加
元素背面不可见
	backface-visibility: hidden;
1.位移
	transform:translate3d(100px,200px,300px);
		x,y,z三个轴的共同作业
	transform:translateX(100px) translateY(200px) translateZ(300px);
	transform:translateZ();
		z轴方向的移动
2.旋转
	transform:rotateX();
	transform:rotateY();
	transform:rotateZ();
	transform:rotate3d(x,y,z,30deg);
		x,y,z指的是矢量方向,最后一个值代表旋转角度
	transform:rotate3d(1,0,0,30deg); x轴旋转
	transform:rotate3d(0,1,0,30deg); y轴旋转
	transform:rotate3d(0,0,1,30deg); z轴旋转
	transform:rotate3d(1,1,0,30deg); 旋转
3.缩放
	transform:scaleZ(2);
	transform:scale3d(2,0.5,2);

动画

过渡必须有触发条件(点击、鼠标移入)、过渡只能在两个状态间执行
动画可以浏览器打开直接运行,也可以鼠标事件执行,动画可以执行多个不同状态
1.定义动画
	@keyframes 动画名称{
		0%或from{
			background:red;
		}
		50%{
			background:green;
		}
		100%或to{
			background:blue;
		}
	}
	0%指的是动画执行事件
2.执行动画
	animation:动画名称  执行时间  速度效果  延迟时间  执行次数  是否反向执行;
		 执行次数：无限执行infinite
		 是否反向执行:反向执行alternate
3.暂停动画
	animation-play-state:paused;

H5新增的语义标签

section元素 表示页面中的一个区块
article元素 文章内容
aside元素 侧边栏,辅助信息
header元素 页面头部
footer元素 页面底部
nav元素 页面导航
	<nav>
		<li></li>
		<li></li>
	</nav>
figure元素 表示一段独立的流内容，使用figcaption元素为其添加标题
main 代表页面的表示页面中的主要的内容
hgroup标题的一个分组

mark高亮文本
time时间

为什么要语义化

1.代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构
2.有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息
3.提升用户体验： 例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。
4.便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
5.方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

音频和视频

视频video
音频audio
	controls属性：向用户显示控件，比如播放按钮。控件可能不一样
	autoplay属性：自动播放。谷歌屏蔽了该功能
	loop属性：重复播放属性。
	muted属性：静音属性。
	poster属性：规定视频正在加载时显示的图像，直到用户点击播放按钮
<source></source>定义媒介资源,写在video里面
规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择
<video>
	<source src="myvideo.mp4" type="video/mp4"></source>
	<source src="myvideo.ogg" type="video/ogg"></source>
	<source src="myvideo.webm" type="video/webm"></source>
</video>
video支持的格式：mp4.ogg.webm(每个浏览器兼容性不同)
audio支持的格式：mp3.ogg

H5新增的表单元素

<input type=""/>
	Type=“email” 限制用户必须输入邮箱类型
	Type=“url” 地址类型
	Type=“range” 滑动条
	Type=“number”数字类型
	Type=“search” 搜索意义的表单
	Type=“color” 颜色选择的表单
	以下有兼容问题：
	Type=“time” 时间类型
	Type=“month” 月类型
	Type=“week” 周类型
	Type=“datetime-local” 选取本地时间
	Type=“date” 日期
<output></output>接收两个控件计算的值

	<form action="">
		<input type="email" />
		<input type="submit" value="提交"/>
	</form>

H5新增的属性

1.list属性
	<input type="url" list="url-lists"/>
	<datalist id="url-lists">
		<option value="http://www.baidu.com" label="百度"/>
		<option value="http://www.google.com" label="谷歌" />
		<option value="http://www.jd.com" label="京东" />
	</datalist>
2.placeholder 提示文本
3.autofocus
	页面中某一个控件自动获取焦点
4.required 必须填写
5.pattern 正则
	<input type="text" pattern="[0-9][A-Z]{3}"/>
6.min,max,step
	min最小值
	max最大值
	step步长
	<input type="number" min="0" max="100" step="5"/>
7.multiple多选
8.novalidate取消验证
9.autocomplete自动完成
	<form action="demo_form.asp" method="get" autocomplete="on">
	  First name:<input type="text" name="fname" /><br />
	  Last name: <input type="text" name="lname" /><br />
	  E-mail: <input type="email" name="email" autocomplete="off" /><br />
	  <input type="submit" />
	</form>

回顾

1.H5新增的语义标签
	section 区块
	article 文章、内容
	aside 侧边栏
	nav 导航
		<nav>
			<li></li>
		</nav>
	header 头部
	footer 底部
	main 主体
	hgroup 标题分组
	figrue 独立的流内容
	figcaption 流内容发标题
	mark 高亮文本
	time 时间
2.H5新增表单元素
	<input type=""/>
		email 邮箱
		url 地址
		number 数字
		range 滑块
		color 颜色
		search 搜索意义的表单
		date 日期
		week 周
		datetime-local 本地时间
		time 时间
		month 月
	<output></output>
3.音频视频
	视频video
	音频audio
4.新增属性
	placeholder 提示文本
	list 
	require 必须
	novalidate 取消验证
	autofocus 自动获取焦点
	autocomplete 自动完成
	pattern 正则
	min max step 
	multiple 多选

css3

渐进增强和优雅降级

渐进增强:针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级:一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

css3选择器

一、层级选择器
	E>F 子代选择器(非css3)
	E+F 匹配紧邻元素E的后面的元素F(非css3)
		相邻兄弟选择器
	E~F 选择前面有E元素的每个F元素
二、属性选择器
	1、E[attr]：只使用属性名，但没有确定任何属性值
	2、E[attr="value"]：指定属性名和属性值(值完整)
	3、E[attr~="value"]：指定属性名，并且具有属性值，
		此属性值是一个词列表，并且以空格隔开，
		其中词列表中包含了一个value词
	4、E[attr^="value"]：属性值是以value开头的(一部分也可以)
	5、E[attr$="value"]：属性值是以value结束的(一部分也可以)
	6、E[attr*="value"]：属性值中包含了value(一部分也可以)
	7、E[attr|="value"]：属性值是value或者以“value-”开头的值
		（比如说zh-cn）;
	***4/5/6是css3新增的选择器
三、伪类选择器
1.结构性伪类选择器
	X:first-child 匹配子集的第一个X元素(非css3)
	X:last-child 匹配子集的最后一个X元素
	X:only-child 匹配唯一的子元素
	X:nth-child(n) 匹配索引值为n的子元素,索引值从1开始
	X:nth-last-child(n) 从最后一个开始算索引
		(前五个是不区分类型)
	X:first-of-type 匹配同类型兄弟元素中的第一个X元素
	X:last-of-type 匹配同类型兄弟元素中的最后一个X元素
	X:only-of-type 匹配同类型中唯一元素X
	X:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素X
	X:nth-last-of-type(n) 匹配同类型中的倒数第n个兄弟元素X
		(这五个是区分类型的)
	X:root匹配文档的根元素
	X:empty匹配没有任何子元素,也没有文本的元素X
	
	.wrap>:nth-child(even){ 代表偶数
		background: red;
	}
	.wrap>:nth-child(odd){ 代表奇数
		background: yellow;
	}
	.wrap>:nth-child(3n){ 3的倍数
		background: yellow;
	}
2.目标伪类选择器
	E:target 选择匹配E的所有元素，且匹配元素被相关URL指向
3.语言伪类选择器
	E:lang(language) 指定了lang属性,而且其为language(非css3)
4.UI元素状态伪类选择器
	E:enabled 匹配（form表单）中处于可用状态的E元素
	E:disabled 匹配（form表单）中处于不可用状态的E元素
	E:checked 匹配（form表单）中处于选中状态的E元素
	E::selection 匹配E元素中被用户选中的部分
	
	启用状态<input type="text" enabled/>
	禁用状态<input type="text" disabled/>
	<input type="text" disabled/>代表元素禁用
	input:checked+span{ +相邻兄弟选择器
		background: pink;
	}
5.否定伪类选择器
	E:not(s) （IE6-8浏览器不支持）
	匹配所有不匹配简单选择符s的元素E
6.动态伪类选择器(非css3)
	E:link 超链接并未被访问过
	E:visited 超链接已被访问过
	E:active 元素被激活
	E:hover 鼠标停留在元素E上
	E:focus 元素获取焦点
	给元素设置轮廓outline: 1px solid blue;
	给元素去掉轮廓outline: none;

盒子阴影

box-shadow:水平阴影位置  垂直阴影位置  模糊距离  [阴影尺寸] 颜色  [内阴影inset];

文本阴影

text-shadow:水平阴影位置  垂直阴影位置  模糊距离   颜色 ;

文本换行的相关属性

word-wrap
	属性值：
	normal只在允许的断字点换行（浏览器保持默认处理）
	break-word允许长单词或 URL地址换行到下一行
word-break
	属性值：
	break-all直接进行单词内的断句
	keep-all文本不会换行，只能在半角空格或连字符处换行

背景新增的属性

1.background-origin背景原点
	padding-box 背景图像内填充的相对位置(默认值)
	border-box 背景图像边界框的相对位置
	content-box 背景图像的相对位置的内容框
2.background-clip背景裁切
	border-box 背景被裁剪到边框盒(默认值)
	padding-box 背景被裁剪到内边距框
	content-box 背景被裁剪到内容框
3.background-size背景尺寸
	cover把背景图像扩展至足够大，完全覆盖背景区域
	contain把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
	具体数值/百分比
4.多背景属性
	background:url(),url();

边框新增属性

1.border-image图片边框
	border-image-source 路径
	border-image-slice 图片边框向内偏移,不带单位px
	border-image-repeat:平铺(repeat)/铺满(round)/拉伸(stretch)
	border-image-outset 边框图像区域超出边框的量
简写形式 border-image:路径  偏移  平铺;
2.border-radius 圆角边框
	border-radius:5px;
	border-radius: 5px 10px 20px 50px;从左上角开始顺时针设置倒角
	border-radius: 30px/15px;倒椭圆形

轮廓

outline-offset轮廓向外偏移

回顾

1.css3选择器
	1.层级选择器
		div~p{}
	2.属性选择器
		[class^="a"]
		[class&="a"]
		[class*="a"]
	3.伪类
		:last-child
		:nth-child()
		:nth-of-type()
		:nth-last-child
		:empty
		:root
2.css3属性
	边框阴影box-shadow
	文本阴影text-shadow
	2d转换
	3d转换
	过渡
	动画
	渐变
	文本换行
	边框倒角
	图片边框
	背景原点background-origin
	背景裁切background-clip
	背景尺寸background-size
	多背景
	多列
	弹性盒

怪异盒子

盒模型：标准盒模型、怪异盒模型
触发怪异盒 box-sizing:border-box;
标准盒模型 box-sizing:content-box;默认值

怪异盒如何计算元素尺寸：
	width和height是包含内容、内边距、边框尺寸的
标准盒如何计算元素尺寸：
	width和height只是内容区域
移动端 *{box-sizing:border-box;}

弹性盒、flex布局

给父元素添加
1.display:flex/inline-flex;
	flex将对象作为弹性伸缩盒显示
	inline-flex将对象作为内联块弹性伸缩盒显示
2.flex-direction (主轴排列方向)
	row 默认，横向一行排列
  	row-reverse 反转横向排列
  	column 纵向排列
  	column-reverse 反转纵向排列
3.justify-content(主轴对齐方式)
	flex-start默认，顶端对齐
	flex-end末端对齐
	center居中对齐
	space-between两端对齐，中间自动分配
	space-around自动分配距离
	*默认元素在主轴上容不下不会换行，会被压缩
4.align-items(侧轴对齐方式)
	flex-start 侧轴起始边界
	flex-end 侧轴结束边界
	center 居中放置
	baseline 基线对齐
	stretch 默认值，项目被拉伸以适应容器
5.flex-wrap设置换行
	nowrap 容器为单行，该情况下子项可能会溢出容器
	wrap 容器为多行，子项内部会发生断行
	wrap-reverse 反转排列
6.align-content(行与行之间对齐方式)
	flex-start 没有行间距
	flex-end 底对齐没有行间距
	center 居中没有行间距
	space-between 两端对齐，中间自动分配
	space-around 自动分配距离
	stretch 默认值，项目被拉伸以适应容器
给子元素添加
1.align-self 灵活容器内被选中项目的对齐方式
	--可重写灵活容器的align-items属性
	auto 默认值，元素继承了它的父容器的align-items属性
	stretch	元素被拉伸以适应容器
	center 元素位于容器的中心
	flex-start 元素位于容器的开头
	flex-end 元素位于容器的结尾
2.order 排序优先级
	数字越大越往后排，默认为0，支持负数
3.flex-grow 项目的放大比例
	flex-grow:1;
	同flex:1;--放大比例
4.flex-shrink 项目的缩小比例
	flex-shrink:0;元素不缩小
5.flex-basis 项目的长度
6.flex为345的简写形式
	默认值 flex:0 1 auto;