盒子模型属性：box-sizing
标准盒子模型属性值:：center-box
怪异盒子模型属性值：border-box
标准盒子模型大小= 内容宽高+内边距+边框+外边距
怪异盒子模型大小=内容宽高（内容宽高包括了内边距和边框）+外边距
box-shadow 盒子阴影
x 偏移量 必须写的
y 偏移量 必须写的
px 模糊半径
px 扩展半径
阴影颜色
外部阴影
inset 内部阴影
多条阴影：
box-shadow:150px 150px 0px 0px #000,
300px 300px 0px 0px #f66;
多条阴影由逗号隔开，写在前面的阴影在上面，后面的在下面
阴影的移动都是相对于当前自己的盒子
float浮动：
1、将元素转成块级
2、能够设置元素水平的排列
3、能够元素并排
4、宽高默认是0，可以由内容撑开宽高
5、脱离文档流。浮到半空中，不占据文档流里的空间
6、父级没有高度------父级高度塌陷
7、浮动元素在遇到父级的边缘的时候会停下来
8、会挤出文字、行内元素、行内块
9、浮动元素会影响后面的元素
清除浮动：清除浮动带来的父级塌陷的问题，而不是不浮动
解决父级高度塌陷的问题：
1、给父级加高度-----扩展性不好
很多时候我们会由内容撑开盒子的高度，所以这种方法死板
2、overflow:hidden;------ 可能会导致想超出的东西显示不出来
我们要实现让元素内容超出隐藏的时候是不是必须得知道元素的宽高大小，
所以这个会强行计算浮动元素的高度，得到自身盒子的高度
3、给浮动元素的最后面加一个块级，设置clear属性清除浮动
4、用伪元素清除浮动---最主流的写法
.clear:after{
content:'';
display:block;
clear:both;
}
使用伪元素清除浮动的公共样式clearfix给谁加？
给浮动元素的父级
clear : 清除浮动
left 清除左浮动
right 清除右浮动
both 清除左右的浮动
只能用块级清除
外边距合并
在文档流中的块级，只要是垂直排列方向的块级，
他们垂直方向的外边距margin要是没有阻隔，就会发生合并
垂直方向的外边距margin：上下外边距
box的外边距为0
text的外边距为300
合并后以大的外边距为主 = 300
阻止外边距合并的方法：
1、增加第三者
2、父子级之间，给父级加边框或者padding都能阻止。
3、给父子级之间添加文本、第三者
4、变成行内块
5、变成浮动元素
定位
absolute：绝对定位，参考最近非 static 定位的父级进行定位。
A、使元素完全脱离文档流；
B、使inline支持宽高；
C、块属性标签内容撑开宽度；
D、没有定位父级则相对于body(整个文档)发生偏移；
E、绝对定位一般配合相对定位使用；
F、margin:auto失效；
fixed 固定定位，相对于浏览器窗口进行定位。与绝对定位的特性一致
Z-index：设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。（可负值）
注：只在定位元素上才能生效
定位元素：
定位元素有上下的堆叠顺序
后面的默认比前面的要高
position 定位属性
absolute 绝对定位
relative
fixed
static 没有定位
方位值： 距离参考对象的距离值
top
right
做定位元素参考对象必须满足的条件：
1、absolute的参考对象只能是absolute、relative、fixed
2、必须是直系父级
3、必须是除了static以外定位元素
会一直往上寻找参考对象，如果不符合条件，会继续往上找，
直到找到body。
判断是不是定位元素，看他的position属性
绝对定位会让元素变成块级
如果不定义宽高，默认会由内容撑开宽高
relative ：相对定位，只相对于自己
1、不改变元素的类型
2、不给方位值的时候还存在文档流里面
3、如果给了方位值，原本在文档流里的空间会保留，移动的地方不存在于文档流了
一般会配合绝对定位使用
方位值：只有定位元素才会生效
top
bottom
right
left
定位元素对margin:0 auto；会失效
fixed 固定定位
参考对象永远是窗口
absolute和fixed的唯一区别就是参考对象不同
z-index 设置定位元素的层级
同级定位元素，默认后面的比前面的层级要高,如果不是同级定位元素，不能直接比较层级，找你们能比较的定位元素的父级来比
vertical-align
所有具有内联特点的元素都具有一个默认的上下对齐方式
行内、行内块
想让多个内联元素对齐的时候就使用这个
vertical-align
baseline 默认值，基线对齐
top 元素的顶边与一行中最高元素的顶边对齐
bottom 元素的底边与一行中最高元素的底边对齐
middle 将元素中垂点放在父元素中部对齐。会有一丢丢误 差，能做到视觉上居中对齐。
使用的时候兄弟内联间都加这个属性
----会受到行高的影响
text-top 与父元素文本的顶端对齐
text-bottom 与父元素文本的底端对齐
----会受到文字大小的影响
图片的基线在图片的底边
行内元素的基线在小写字母x的底边
vertical-align对块级无效
消除img下方的间距：基线对齐造成
1、转块级
2、只要不是baseline都可以，最常用的是top去消除间距
像素值的时候，负值在基线下方，正值在基线上方
form 表单标签，块级
表单作用：收集用户输入的个人信息
action 提交地址
method 提交方式,get 和 post，post保密性好
表单是特殊重要的元素，所以都会给表单写ID
input 表单控件
type：
text 文本输入框
password 密码框
radio 单选框
submit 提交按钮
reset 重置按钮
image 图片提交按钮 很少用
file 上传文件
标签属性：
placeholder 提示文本
disabled 禁用当前表单控件
checked 默认选中
outline 控件的外框
具有和border一样的属性值
伪类：
:focus 选择获得焦点的元素.鼠标按下去
只有tab键能选中的元素，才对这个伪类生效
select 下拉选框
option 选项
标签属性：
size 设置能看到的选项数目
selected 默认显示哪一项选项
textarea多行文本框/文本域
cols 定义宽度
rows 定义高度
resize 设置调整文本域的尺寸
none 不许调整
vertical 可以调整高度
horizontal 可以调整宽度
table 表格
thead 表格的头部
tbody 表格的主要内容
tfoot 表格的脚部
tr 表格的行
td单元格:
文本垂直居中
th：表头的单元格
文本水平垂直居中，文字默认加粗
表格特点：
1、如果你只给表格写了高度，那么默认tbody占据比例是最大的
2、每一列中，以最宽的单元格宽度为整列单元格的宽度
3、每一行中，以最高的单元格高度为整行的高度
4、表格table定义的宽度，表格内部所有的元素都会根据这个宽度值来进行调整
5、如果内部元素加起来超过表格的宽度，那么会按照比例缩小
6、如果内部元素加起来小于表格的宽度，那么会按照比例放大
7、高度可以大不可以小
display : table 表格类型。对外是一种块级,对内是表格
thead、tbody、tfoot、tr:不支持padding和margin
th、td:不支持外边距margin
rowspan 跨行
colspan 跨列
border-collspan 合并单元格
表格：
1、改动一个地方就会导致整体布局变乱
2、表格适合用在后台
3、切忌不要用表格去布局
4、等宽、等高的特点
thead和tfoot很多时候可以不写，就写一个tbody。
要么不写thead和tfoot，要么全写
display
table 类似table
table-row 当前元素具有和表格的行tr一样的效果
table-cell 类似td和th
iframe
frameborder 框架的边框
0 不显示
1 显示
scrolling
no 不显示滚动条
yes 显示滚动条
auto 根据内容显示线条
属性继承
font、text文本类的属性都有继承性(包括line-height、color)
a标签不会继承父级的文字颜色
h标签不会完全按照继承的文字大小去显示
inherit 继承父级该属性的属性值
transition
过渡：从一种样式到另一种样式的变化（需要两种状态）
缺点： 1，需要触发。2，一次性的。3，只有开始和结束，中间无法控制。4，不能控制多个值
transition-property 你需要过渡的属性名称
all 所有能过渡的属性
transition-duration 过渡花费的时间
transition-timing-function 过渡的速度曲线
ease 慢速开始，然后加快，结束变慢
linear 匀速
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
transition-delay 延迟时间
能过渡的：大小、颜色、opacity、display
visibility 设置元素的可见方式
hidden 让元素不可见
visible 让元素可见
visibility:hidden 和 display:none的区别：
display:none 是完全消失，页面hover不到，并且会造成其他的属性没有过渡效果
visibility:hidden 也是消失，但是存在于页面上，也hover不到，并不会影响
别的属性的过渡效果。
CSS3选择器
div > p 匹配div直接后代为p的元素（孙子后面的不算）
div + p 匹配div后面的邻居为p的元素
div ~ p 匹配div后面的所有邻居为p的元素
[class = ’box’] 匹配具有class属性并且值等于box并且只有这个值的元素
[class ~= ’box’] 匹配具有class属性并且值等于box的元素
[class |= ’box’] 匹配具有class属性并且值等于box或者以box-开头的元素
[src ^= ‘image’] 匹配具有src属性并且值以image开头的元素 模糊匹配
[src $= ‘png’] 匹配具有src属性并且值以png结尾的元素 模糊匹配
[src *= ‘gi’] 匹配具有src属性并且值里面包含gi的元素 模糊匹配
伪类选择器
类型杂乱的时候，用type，因为无视其他元素，找到我需要的元素。
类型差不多的时候，用child，因为我就要选中那个位置的什么元素
li :first - of - type{} 选中li是其父元素的第一个li的元素，无视其他子元素
li : first - child{} 选中其父元素的第一个子元素并且是li元素，不无视其他子元素
li :last - of - type{} 选中li是其父元素的最后一个li的元素，无视其他子元素
li : last- child{} 选中其父元素的最后一个子元素并且是li元素，不无视其他子元素
li : only - of - type{} 选中其父元素只有一个li类型的子元素 ，其他子元素可以多个 但li必须只有一个, 当li有两个以上时无法匹配
li : only - child{} 选中其父元素只有一个li的子元素，独生子，有其他子元素则无法匹配
li : nth-of-type(3){} 选中其父元素里的第三个li元素，无视其他子元素
li : nth-child(3){} 选中其父元素的第三个元素且必须是li元素，不无视其他子元素
li : nth-last-of-type(2){} 其父元素倒数第二个li元素，无视其他子元素
li : nth-last-chile(2){} 其父元素倒数第二个li元素，不无视其他子元素
P : first - line{} p元素里的第一行
P : first - letter{} p元素里的第一个字（可以做首字母大写）
P :: selection{} p元素里被选中的文字
P : empty{} 为空的p元素 里面什么都不能有，空格都不能有
P : not(:first-child){} 除了最后一个子元素之外的p 取反
input : enabled{} 所有启用的input元素
input : disabled{} 所有禁用的input元素
CSS3新增背景属性
background-size cover:覆盖 让背景图片刚好充满盒子
contain:包含 背景图片在盒子里完全展示
都是等比缩放和放大
背景关联
background-attachment:fixed;会使下面的失效
background-origin:;背景图片显示的起始位置
padding-box 从padding区域开始显示
border-box 从border区域开始显示
content-box 从content区域开始显示
background-clip:;
content-box 内容以外的全部剪掉
border-box border以外的全部剪掉
padding-box padding以外的全部剪掉
新增颜色
background-color:hsla(360,100%,50%,0.5);
hue 色调 0-360 0红色 120 绿色 240 蓝色
saturation 饱和度 0%-100%
lightness 亮度 0%-100%
线性渐变
渐变实际上是image的一种类型
linear-gradient()线性渐变
渐变方向：
deg 正值变大顺时针变化 减小逆时针变化
关键词 to left 270deg to right 90deg to bottom 180deg to top 0
颜色范围 具体像素值 百分数
background:-webkit-linear-gradient(to bottom, red ,orange ,yellow);
/*to是去到哪*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#000000’,endColorstr=’#ff0000’,GradientType=’0’);
/*颜色不能简写 1代表上下 0 左右*/
兼容写法和标准写法 不同点
1.兼容不加to
2.相差90deg
3.兼容写法正值变大逆时针变化 减小顺时针变化
径向渐变
background:radial-gradient(at top,red,black,blue);
/*at 是在哪开始*/
background:-webkit-radial-gradient(top,red,black,blue);
/*兼容写法不加at*/
radial-gradient()径向渐变
形状 circle圆形 ellipse椭圆
圆心位置 加上at top left bottom right center
渐变的大小 具体的像素值 半径一个代表x轴半径 一个代表y轴半径 、
当设置的是圆形，但是两个值不一样的时候，是失效。
farthest-corner 圆心到最远的角的距离为半径 默认
closest-corner 圆心到最近的角的距离为半径
farthest-side 圆心到最远的边的距离为半径
closest-side 圆心到最近的边的距离为半径
重复渐变
重复径向渐变repeating-radial-gradient()
重复线性渐变repeating-linear-gradient()
倒影和遮罩
-webkit-mask-image:url('images/2.png');
-webkit-mask-size:50%;
-webkit-mask-repeat:no-repeat;
-webkit-mask-position:center;
-webkit-mask:url('images/2.png') repeat center/25%
倒影不占位置
位置direction above 上面 below下面 left right
offset 图像和倒影之间的距离 可以为负值
mask-box-images 遮罩图像 只能放透明图片 png
-webkit-mask-size:50%;遮罩图像的大小
-webkit-mask-repeat:no-repeat;遮罩图像的平铺
弹性盒模型
容器属性
flex-direction:;定义主轴方向
row 主轴水平方向 从左往右排列
row-reverse 主轴水平方向 从右往左排列
column 主轴竖直方向 从上到下排列
column-reverse 主轴竖直方向 从下到上排列
flex-wrap:;定义交叉轴方向 是否换行
nowrap 默认不换行
wrap 换行
wrap-reverse 交叉轴反方向
flex-flow:flex-direction flex-flow;复合属性
justify-content:;定义项目在主轴上的对齐方式
flex-start 以主轴起点对齐
flex-end 以主轴终点对齐
center 在主轴上居中对齐
space-between 两端对齐，轴线之间的间隔平均分布
space-around 每个项目两侧的间隔都相等
align-items:;定义项目在交叉轴上的对齐方式 单行
stretch 默认值 当项目没有高度时，撑满交叉轴的空间
flex-start 以交叉轴轴起点对齐
flex-end 以交叉轴终点对齐
center 在交叉轴上居中对齐
baseline 基线对齐
align-content:;定义项目在交叉轴上的对齐方式 多行
stretch 默认值 当项目没有高度时，撑满交叉轴的空间
flex-start 以交叉轴轴起点对齐
flex-end 以交叉轴终点对齐
center 在交叉轴上居中对齐
space-between 两端对齐，轴线之间的间隔平均分布
space-around 每个项目两侧的间隔都相等
项目属性
order 伸缩项目的排列顺序
数字越小，排名越靠前 支持负值
flex-grow:; 伸缩项目应该占用容器内的空间
0 不占用容器空间 由内容撑开 1 平分占用
部分li 2 部分是1 前者分的空间更大
flex-shrink 伸缩容器宽度不够得时候,伸缩项目对应缩小得空间
1 会缩放 0 不缩放
部分li 2 部分是1 前者缩小空间更大
flex-basis 项目初始得宽度
flex:1 1 auto;=flex:auto;
会放大 会缩小 自动
flex:0 0 auto;=flex:none;
不放大 不做小 自动
flex:1;
align-self:;定义单个项目在交叉轴上的对齐方式
stretch 默认值 当项目没有高度时，撑满交叉轴的空间
flex-start 以交叉轴轴起点对齐
flex-end 以交叉轴终点对齐
center 在交叉轴上居中对齐
baseline 基线对齐
过渡：从一种样式到另一种样式的变化（需要两种状态）