**
CSS重要知识点 (不定期更新)
**
1.display: none;
与 visibility: hidden;
的区别:
联系:它们都能让元素不可⻅
区别:
display:none ;
会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden
;不会让元素从渲染树消失,渲染时元素继续占据空间,只是内容不可⻅display: none ;
是⾮继承属性,visibility: hidden; 是继承属性 修改常规流中元素的 display
通常会造成⽂档重排。修改 visibility 属性只会造成本元素的重绘。
2.link 与 @import 的区别:
- link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;而@import属于CSS范畴,只能加载CSS;
- link引用CSS时,在页面载入时同时加载;而@import需要页面网页完全载入以后加载。
- link是XHTML标签,无兼容问题;而@import是在CSS2.1提出的,低版本的浏览器不支持。
- link支持使用Javascript控制DOM去改变样式;而@import不支持。
- @import可以在CSS文件中再次引入其他样式表;而link不支持。
3.什么是FOUC?如何避免:[link]
浏览器渲染原理:浏览器一边解析 HTML,一边构建渲染树,构建一部分,就会把当前已有的元素渲染出来。
Flash Of Unstyled Content :指的是网页渲染时,外部样式还没加载好,就以浏览器默认样式短暂地展示了部分内容,等到外部样式加载完成,又恢复正常的这个页面闪烁的过程。
解决方法:
- 将 JavaScript 资源尽量放到
<head>
中,只保留最后一个包含主逻辑的脚本在<body>
中,因为它很可能要往<body>
上挂载元素。这可以解决上面提到的<script>
标签导致的多次渲染问题。 - 第一次渲染,不论是 Vue、React 还是 VanillaJS,一定要同步放到主逻辑中,确保发生在 DCL 之前。
- 避免对 DOM 进行不必要的读操作,因为他们会带来的额外的绘制。
4.什么是BFC?如何创建?BFC有什么用?[link]
BFC 即 Block Formatting Contexts (块级格式化上下文),它是一个独立的渲染区域,容器里面的元素不会在布局上影响到外面的元素。
创建规则:
- body 根元素
- 浮动元素:float 除 none 以外的值
- 绝对定位元素:position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
作⽤:
- 可以包含浮动元素(清除浮动)
- 不被浮动元素覆盖
- 阻⽌⽗⼦元素的 margin 折叠
5.为什么要清除浮动?清除浮动的几种方式:
本质:清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后, 父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了
清除浮动的几种方式:
- ⽗级 div 定义 height
- 结尾处加空 div 标签
clear:both
(添加无意义标签,语义化差) - ⽗级 div 定义伪类 :after 和 zoom
- ⽗级 div 定义
overflow:hidden
(内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素)
6.为什么要初始化CSS样式? (消除浏览器默认边距)
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对 CSS 初始化往往会出现浏览器之间的⻚⾯显示差异。
当然,初始化样式会对 SEO 有⼀定的影响,但⻥和熊掌不可兼得,在⼒求影响最⼩的情况下初始化
7.CSS层叠优先级:
- 优先级就近原则,同权重情况下样式定义最近者为准
- 载⼊样式以最后载⼊的定位为准
- 优先级为: !important > id > class > tag ; !important ⽐内联优先级⾼
8.什么是外边距重叠?重叠的结果是什么?
外边距重叠就是margin-collapse。在CSS当中,相邻的两个盒⼦(可能是兄弟关系也可能是祖先关系)的外边距折叠成⼀个单独的外边距。
- 两个相邻的外边距都是正数时,折叠结果是它们两者之间较⼤的值。
- 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较⼤值。
- 两个外边距⼀正⼀负时,折叠结果是两者的相加的和。
9.px、em和rem的区别:
- px是固定的像素,一旦设置了就无法因为适应页面大小而改变。
- em是相对于其父元素来设置字体大小的,一般都是以的“font-size”为基准。
- rem是相对于根元素,只需要在根元素确定一个参考值。