一、基础选择器
标签： 标签名 { css属性名：属性值； }
类： .类名 { css属性名：属性值； }
id： #id属性值 { css属性名：属性值； }
通配符： *{ css属性名：属性值； }
二、选择器进阶
复合选择器（后代、子代）、并集选择器、交集选择器、hover伪类选择器
结构伪类选择器：
三、字体和样式a
字体样式：大小：font-size 粗细：font-weight 样式：font-style:italic 类型：font-family 类型：font属性连写
文本样式：
缩进：text-indent：2px
水平对齐方式（文本、span、a、input、img的父元素）：text-align
修饰：text-decoration：underline下划线/none清除装饰
行高：line-height：父元素高度 line-height : 1可以取消上下间距
四、背景bgc
背景色background-color、背景图background-image、背景平铺background-repeat：no-repeat、背景位置background-position 背景图大小background-size：cover/contain
连写：background：color image repeat position
展示图片的两种方法：
直接写上img标签即可：img标签是一个标签，不设置宽高默认会以原尺寸显示
div标签 + 背景图片：需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签
五、元素显示模式display
块级元素：
独占一行、内容决定高度、继承父宽、可设置宽高
div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……
行内元素：
一行显示多个、内容决定宽高、不可以设置宽高
a、span 、b、u、i、s、strong、ins、em、del……
行内块元素：
一行可以显示多个、可设置宽高
input、textarea、img、button、select……
元素显示模式转换
拓展1：HTML嵌套规范注意点
拓展2：居中方法总结
六、CSS 特性
继承性
继承性的特性是什么？
子元素有默认继承父元素样式的特点
有哪些常见属性可以继承？
color
font-style、font-weight、font-size、font-family
text-indent、text-align
line-height
常见应用场景：
可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小
层叠性
给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
优先级
特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
注意：!important不能提升继承的优先级
权重叠加计算：
七、盒子模型
CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是 盒子模型
标准(W3C)盒子模型：内容content+填充padding+边框border+边界margin
低版本IE盒子模型：内容（content+padding+border）+ 边界margin
box-sizing中比较常用的两个属性值为 content-box和 border-box，它可以改变盒子模型的解析计算模式。
当设置box-sizing:content-box时，采用标准模式进行计算，默认就是这种模式width=content；
当设置box-sizing:border-box时，采用怪异模式进行计算width=content+padding+border；
给margin和padding加属性顺序是上右下左
八、伪元素
元素：HTML 设置的标签
伪元素：由 CSS 模拟出的标签效果
注意点：
必须设置content属性才能生效
伪元素默认显示模式是行内元素
九、浮动
标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素常见标准流排版规则：
块级元素：从上往下，垂直布局，独占一行
行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行
浮动的作用是什么？
早期作用：图文环绕
现在作用：用于布局，让垂直布局的盒子变成水平布局，如：一个在左，一个在右
左浮动的属性是？右浮动的属性是？
左浮动：float : left
右浮动：float : right
浮动的特点
浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
相当于从地面飘到了空中
浮动元素比标准流高半个级别，可以覆盖标准流中的元素
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
浮动元素有特殊的显示效果
一行可以显示多个
可以设置宽高
注意点：
浮动的元素不能通过text-align:center或者margin:0 auto
浮动元素的特点有哪些？
浮动元素会脱标，在标准流中不占位置
浮动元素比标准流高出半个级别，可以覆盖标准流中的元素，可以清除浮动
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
浮动元素有特殊的显示效果：① 一行可以显示多个 ② 可以设置宽高
十、定位
网页常见布局方式
标准流：块级元素独占一行 → 垂直布局、行内元素/行内块元素一行显示多个 → 水平布局
浮动：可以让原本垂直布局的 块级元素变成水平布局
定位：可以让元素自由的摆放在网页的任意位置、 一般用于 盒子之间的层叠情况
静态定位static、相对定位（不脱标）relative、绝对定位（脱标）absolute、固定定位（脱标）fixed
子绝父相
子绝父相的含义是什么？
子元素：绝对定位
父元素：相对定位
子绝父相的应用场景是什么？
让子元素相对于父元素进行自由移动
子绝父相的好处是什么？
父元素是相对定位，则对网页布局影响最小
在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接子绝即可！
十一、样式补充
精灵图
精灵图的优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
使用精灵图的步骤是什么？
创建一个盒子
设置盒子大小为小图片大小
设置精灵图为盒子的背景图片
将小图片左上角坐标 取负值，设置给盒子的background-position：x y
文字阴影
属性text-shadow：
参数 作用
h-shadow 必须，水平偏移量。允许负值
v-shadow 必须，垂直偏移量。允许负值
blur 可选，模糊度
color 可选，阴影颜色
盒子阴影
属性box-shadow：
参数 作用
h-shadow 必须，水平偏移量。允许负值
v-shadow 必须，垂直偏移量。允许负值
blur 可选，模糊度
color 可选，阴影颜色
spread 可选，阴影扩大
inset 可选，将阴影改为内部阴影
过渡
面试题
- 让一个盒子居中常用方法：
margin固定宽高居中
子绝父相，上下左右0，margin：auto
子绝父相，left：50%，top50%，margin-left:-50%盒子宽度，margin-top：-50%盒子高度
子绝父相，transform居中，left: 50%，top: 50%，transform: translate(-50%,-50%);
子绝父相对，left: 25%，right: 25%，top: 25%，bottom: 25%，margin:auto;
flex布局，justify-content: center，align-items: center;
2.清除浮动的方法（最常用的4种）
给父盒子添加高度（不推荐）
父级添加overflow属性（父元素添加overflow:hidden）（不推荐）
额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）
使用after伪元素清除浮动（推荐使用）
使用before和after双伪元素清除浮动
