By XuanHen —

<前端知识点总结>-CSS

前端基础知识点 - 弥补自己的一些细节差距

选择器

  • 元素选择器 p a
  • 类选择器 .class
  • ID 选择器 #id
  • 通配选择器 *
  • 属性选择器
    • [attibute] 带有attibute属性的元素
    • [attibute=value] 带有attibute属性、属性值等于value的元素
    • [attibute*=value] 带有attibute属性、属性值包含value的元素
    • [attibute~=value] 带有attibute属性、属性值以空格为间隔的值列表中至少有一个值为value的元素
    • [attibute^=value] 带有attibute属性、属性值以value开头的元素
    • [attibute$=value] 带有attibute属性、属性值以value结尾的元素
    • [attibute|=value] 带有attibute属性、属性值以value-开头的元素
  • 相邻兄弟选择器 p + a
  • 通用兄弟选择器 p ~ a 只匹配该元素之后的
  • 子类选择器 p > a 只匹配一层，不会匹配子类的子类
  • 后代选择器 p a p标签下面的所有a标签
  • 伪类选择器 :hover
  • 伪元素选择器 ::after

选择器优先级

!important > 内联样式 > ID选择器 > 类选择器 > 伪类选择器 > 属性选择器 > 后代选择器 = 兄弟选择器 = 子类选择器 > 元素选择器 > 通配选择器

重排 和 重绘

  1. 前端性能优化：细说浏览器渲染的重排与重绘 - 掘金

重排

由于浏览器渲染界面是基于流式布局模型的，也就是某一个 DOM 节点信息更改了，就需要对 DOM 结构进行重新计算，重新布局界面，再次引发回流，只是这个结构更改程度会决定周边 DOM 更改范围，即全局范围和局部范围，

  1. 全局范围: 就是从根节点html开始对整个渲染树进行重新布局，例如当我们改变了窗口尺寸或方向或者是修改了根元素的尺寸或者字体大小等；
  2. 局部布局: 可以是对渲染树的某部分或某一个渲染对象进行重新布局。

重绘

就是当页面中元素样式的改变并不影响它在文档流中的位置时，浏览器会将新样式赋予给元素并重新绘制的过程。

CSS Sprite 是什么，有什么优缺点

CSS Sprite 简称雪碧图（精灵图），是一种 CSS 图像合成技术，主要原理是基于 background-position 属性进行偏移

## 优点

  1. 加快网络请求，将多个小图片合并，只进行一次 HTTP 请求
  2. 增加图片重复利用率，提高了压缩比，减少图片体积
  3. 后期维护简单（可以通过 Webpack plugin 插件实现自动化）

link 和 @import 区别

link@import属于 XHTML 标签，可用于定义 RSS，rel 连接属性CSS 的一种加载方式在页面被加载的时候，引用的 CSS 会同时被加载等页面内容全部下载完后才被加载，容易引起 FOUC （文档样式短暂失效）

display: none 和 visibility: hidden 区别

display:nonevisibility:hidden从渲染树中消失，渲染时不占用空间，不可见不会从渲染树中消失，依然占用空间，不可见非继承性，子节点无法显示继承性，子节点可以通过 visibility: visible 可见修改 display 属性会引起文档重排修改 visibility 只会引起当前元素重绘

FOUC  是什么，如何避免

lash Of Unstyled Content 用户定义样式加载之前浏览器使用默认样式显示文档，在加载完自定义样式后重新渲染文档，造成页面闪动。

BFC 是什么，有什么用

W3C 定义

MDN 块格式化上下文

BFC的全称为 Block Formatting Contexts 块格式化上下文

Formatting Contexts 是页面中的一块渲染区域，拥有一套渲染规则，决定子元素将如何定位、和其他元素的关系和相互作用。

创建一个 BFC

  • 根元素 <html>
  • 浮动元素 ( 元素的 float 不是 none )
  • 绝对定位元素（position 为 absolute / flxed）
  • 不是块状的块容器
    • 行内块元素 （display: inline-block）
    • 表格单元格 （display: table-cell）
    • 表格标题 （display: table-caption）
    • 匿名表格单元格元素 （display: table | table-row | table-row-group | table-header-group | table-footer-group | inilne-table）
  • overflow 不为 visible 的块元素 （overflow 默认属性为 visible）
  • display: flow-root （生成一个块容器 CSS3 display flow root）
  • 弹性元素: display: flex | inline-flex
  • 网格元素：display: grid | inline-grid
  • contain 值为 layout | content | paint 的元素
  • 多列容器 （column-count | column-width 不为 auto 包括 column-count: 1 ）
  • column-span: all 会创建一个新的 BFC 即使该元素没有被包裹在一个多列容器中

BFC 的渲染规则

  1. 内部的块元素会从当前块元素的顶部开始垂直一个一个的放置
  2. 内部的块元素兄弟之间的垂直间距由 margin 决定 测试链接
  3. 相邻元素之间的垂直间距折叠，使用最长的 margin 作为间距，并且只会发生在属于同一 BFC 的块级元素之间，不同 BFC 的 margin 不会折叠
  4. 浮动不会影响其他 BFC 中元素的布局
  5. 清除浮动只能清除同一 BFC 中在它前面的元素的浮动

应用

  1. 清除浮动 clear: both

IFC 是什么，有什么用

IFC全称为 Inline Formatting Contexts 内联格式化上下文

MDN IFC

CSS盒模型

MDN CSS盒模型

  1. 标准盒模型 内容content、内边距padding、边框border和外边距margin 组成
  2. IE 盒模型 内容 content （包含 内边距padding 和 边框 border ） 和 外边距margin