CSS样式

选择器优先权：important>内联>id>类>标签|伪类|属性选择|伪元素>通配符>继承

可继承属性和不可继承属性

cursor：改变光标的形式
box-sizing:~~~~使padding往内
outline：外边框
focus：获取焦点
font-size：解决空格留白问题 0

浮动特点：
1.元素浮动后会脱离文档流
2.浮动以后元素会一直向父元素的最上方移动
3.直到遇到父元素的边框或者其他的浮动元素，会停止移动
4.如果浮动元素的上边是一个块元素，则浮动元素不会覆盖块元素
5.浮动元素不会超过他上边的浮动的兄弟元素，最多一边齐
6.浮动元素不会覆盖文字，文字会自动环绕在浮动元素的周围，可以通过浮动来实现文字环绕的效果

元素浮动后效果：
1.块元素：块元素脱离文档流以后（不会独占一行，宽度高度会被内容撑开）
2.内联元素：脱离文档流后变成块元素

伸缩布局 响应式布局

relative:相对于自己
1.开启元素的相对定位后，如果不设置偏移量元素不会发生任何变化
2.相对定位元素对于自身在文档流中的位置来定位
3.相对定位的元素不会脱离文档流
4.相对定位不会改变元素的性质，块元素还是块元素
5.相对定位的元素会提升一个层级
top left right bottom偏移

absolute：相对于父标签
1.同相对定位
2.最近的开启了定位的祖先元素进行定位，如果所有的祖先元素没开启定位，则相对于浏览器窗口进行定位
3.绝对定位的元素会完全脱离文档流
4.绝对定位会改变元素的性质。内联变块，块的高度和宽度都被内容撑开，并且不独占一行
5.绝对定位会使元素提升一个层级

fixed：相对于浏览器窗口
1.特殊的绝对定位，相对于浏览器窗口定位
2.永远相对于浏览器窗口进行定位，不会随滚动条滚动

层级：
1.定位元素>浮动元素>文档流中的元素
2.当元素开启了定位后，可以通过Z-index来设置层级
3.z-index值越高越优先显示
4.如果z-index值一样，或者都没有z-index则优先显示下边的元素
5.父元素永远不会盖住子元素

高度塌陷（解决）：
1.开启父元素的BFC（默认关闭）
2.在父元素最后添加一个DIV清除浮动
3.使用after伪类清除浮动

rem：根据屏幕的尺寸，来向用户展示更适合用户的布局，文字，图片，按钮
相对于根元素的字体大小的单位
根节点html font-size变化，rem也会随之变化
默认：1rem=16px
text-decoration：none//无下划线

字体图标：根据文字设置/font awesome Icon font

伸缩布局：个别低版本浏览器无法兼容
flex：弹性伸缩盒展示，用于块级元素
inline-flex：～～～～，用于行内元素
常用属性：
1.flex-direction 控制主轴
2.justify-content//主轴上的子项对齐方式
3.align-items//侧轴上的对齐方式
4.flex-wrap///指定flex子项是否换行
5.align-content///适用于多行，
6.align-self指定某个子项的对齐方式
复合属性flex
响应式布局

圣杯布局//两侧宽度固定，中间宽度自适应
双飞翼布局

CSS3属性：transform实现2D/3D转换（有许多常用方法）

bootstrap：
媒体查询：

resetCSS

CSS引入方式：
内链式：

少用 产生冗余代码
嵌入式：style设置 下方调用 较为方便
外部式： 常用