再战CSS样式

前言

• 最近面试，发现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 特性

继承性

继承性的特性是什么？

• 子元素有默认继承父元素样式的特点

有哪些常见属性可以继承？

1. color
2. font-style、font-weight、font-size、font-family
3. text-indent、text-align
4. 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

浮动的特点

1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置

• 相当于从地面飘到了空中

2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4. 浮动元素有特殊的显示效果

• 一行可以显示多个
• 可以设置宽高

注意点：
浮动的元素不能通过text-align:center或者margin:0 auto

浮动元素的特点有哪些？

• 浮动元素会脱标，在标准流中不占位置
• 浮动元素比标准流高出半个级别，可以覆盖标准流中的元素，可以清除浮动
• 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
• 浮动元素有特殊的显示效果：① 一行可以显示多个 ② 可以设置宽高

十、定位

网页常见布局方式

标准流：块级元素独占一行 → 垂直布局、行内元素/行内块元素一行显示多个 → 水平布局

浮动：可以让原本垂直布局的 块级元素变成水平布局

定位：可以让元素自由的摆放在网页的任意位置、 一般用于 盒子之间的层叠情况

• 静态定位static、相对定位（不脱标）relative、绝对定位（脱标）absolute、固定定位（脱标）fixed

子绝父相

子绝父相的含义是什么？

• 子元素：绝对定位
• 父元素：相对定位

子绝父相的应用场景是什么？

• 让子元素相对于父元素进行自由移动

子绝父相的好处是什么？

• 父元素是相对定位，则对网页布局影响最小

在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接子绝即可！

十一、样式补充

精灵图

精灵图的优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度

使用精灵图的步骤是什么？

1. 创建一个盒子
2. 设置盒子大小为小图片大小
3. 设置精灵图为盒子的背景图片
4. 将小图片左上角坐标 取负值，设置给盒子的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双伪元素清除浮动