前言
- 最近面试，发现CSS层叠样式表很多细节已经忘得差不多了。
- 写样式，画界面是一个前端工程师最基础的素养。
一、基础选择器
标签： 标签名 { 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 特性
继承性
继承性的特性是什么？
- 子元素有默认继承父元素样式的特点
有哪些常见属性可以继承？
colorfont-style、font-weight、font-size、font-familytext-indent、text-alignline-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 可选，将阴影改为内部阴影
过渡
面试题
1. 让一个盒子居中常用方法：
- 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双伪元素清除浮动
