书写顺序：布局定位属性：display/position/float/clear/visibility/overflow
自身属性 width/height/margin/padding/border/background
文本属性：color/font/text-decoration/text-align/
其他属性: content/cursor/border-radius/box-shadow/text-shadow
字体：font-size 字号
Font-family字体
Font-weight 字体粗细加粗700，正常400
Font-style 央视斜体italic 正常normal
Vertical-align 文字垂直对齐方式
Baseline父元素基线
Top顶部
Middle父元素中部
Bottom元素顶端与行中最低的元素对齐
定位组成：定位模式+边偏移
定位模式：静态定位static 不脱标 不能使用边偏移
相对定位relative 占有位置 相对于自身位置移动
绝对定位absolute 不占 带有定位的父元素
固定定位fixed 不占 浏览器可视区
粘性定位sticky 占位置 浏览器可视区
静态定位：默认的定位方式，没有边偏移，按照标准流来摆放位置
相对定位：relative相对于原来的位置进行移动，
特点：原来的位置继续保有，后面的标准盒子不能覆盖他
绝对定位absolute：是元素在移动位置来说，相对于它祖先元素来说的，
特点：不占有原位置，已有定位的父元素为参考点移动位置
固定定位：不随滚动条滚动，和父元素没有关系，以浏览器的可视窗口为参照点移动元素，不占用原有位置
定位叠放次序：z-index
数值可以为0，1负数，数值越靠上盒子越靠上，属性值相同按照先后顺序
只有定位的盒子才有z-index属性
定位拓展：
绝对定位：固定定位会压住盒子
海报模式：第一步：超出部分隐藏 overflow：hidden
第二步：white-space：nowrap；
第三步：text-overflow:ellipsis超出部分用省略号表示
伪元素选择器：利用css创建标签元素，不需要html标签
：：before 在元素内部的前面插入内容
：：after 在元素内部的后面插入内容
Before和after创建的元素都是行内元素，
在文档中找不到所以是伪元素，
before和after必须都有content属性，before在父元素的内容前面创建标签，after在父元素的后面插入元素，伪元素选择器和标签选择器一样权重为1.
伪元素的使用场景：伪元素字体图标
p::before{
position：absolute；
right：20px；
top：10px；
content：‘\e91e’,
font-size:20px;
}
伪元素清除浮动
.clearfix:after{
content:””;伪元素必须写得属性
display:block;插入元素必须是块级
height:0;不看见这个元素
clear:both;核心代码清除浮动
visibility:hiddn;看不见这个元素
}
两种伪元素清除浮动额外的标签法
.clearfix:before , .clear:after{
content:””;
display:table转为块级元素一行显示
}
.clearfix:after{
clear:both;
}
清除浮动：
本质：清除浮动的本质是清除浮动元素脱离标准流造成的影响
如果父盒子本身有高度，则不需要清除浮动，清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度就不会影响下面的标准流了
清除浮动的策略：闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的盒子
额外标签法：隔墙法，就是在最后一个浮动的子元素后面添加一个额外标签，清除浮动样式
为什么需要清除浮动，父级没高度子盒子浮动影响下面布局，清除浮动
额外标签法也称为隔墙法，w3c推荐做法
额外标签法会在浮动元素末尾添加一个空的标签，例如<div>style=:”clear:both”></div>,或者其他标签</br>这个元素必须是块级元素，闭合浮动不影响父盒子外面的其他盒子
优点：通俗易懂，书写方便
缺点：添加了多余的无意义的标签，结构化差
父级添加overflow属性,其属性值设置为hidden、auto、scroll
优点：代码简洁
缺点：无法显示溢出部分
父级添加after伪元素
优点：没有增加标签，结构简单，百度，淘宝，网易
缺点：低版本的浏览器不兼容,父级添加双伪元素 ie6-7不兼容
CSS盒子模型的新特性：通过box-sizing来指定盒模型，两个值
box-sizing：content-box盒子大小为width+padding+border（以前默认）
box-sizing ：border-box，盒子大小为width也就是padding和border不会撑大盒子
flex布局
display：flex；
flex-wrap:wrap; 默认不包裹所有内容往一行放，如果选择wrap，需要给内容宽度就不会在一行上显示
justify-content:space-around;均等分
