CSS问题汇总

水晶球鞋钉

已于 2022-08-17 12:25:25 修改

阅读量90

点赞数 1

文章标签： css css3

于 2022-06-06 11:08:16 首次发布

本文链接：https://blog.csdn.net/smallkure/article/details/125143145

版权

本文总结了CSS中的格式化上下文概念，包括BFC、IFC、FFC和GFC，强调了BFC的作用。此外，讨论了使元素水平垂直居中的多种方法，并对比了隐藏元素的display:none、visibility:hidden和opacity:0的区别。最后，提到了CSS选择器的优先级和多行文本溢出省略的实现，以及CSS阻塞与优化策略。

摘要由CSDN通过智能技术生成

1.格式化上下文是什么？

格式化上下文既Formatting Context，简称FC。指的是元素在页面中的渲染环境，它更像一个容器，决定了其与相邻元素，子元素之间的布局关系。

通常格式化上下面分为以下四类

块格式化上下文（BFC：Block Formatting Context）；
内联格式化上下文（IFC：Inline formatting context）；
弹性布局格式化上下文（FFC：Flex Formatting Context）；
网格布局格式化上下文（GFC：GridLayout Formatting Context）

以BFC为例，通常，BFC的元素具有以下几个特点

包含内部浮动，让浮动的内容和周围的内容等高
将元素放置在不同的BFC的元素中可以解决元素外边距重叠的问题
BFC的元素不会与浮动元素发生重叠
BFC是个独立的容器，内外元素互不影响

可以产生BFC的常见情况有以下几种

根元素：<html>
浮动元素：float 值不为 none 的
绝对定位元素：position 值为 absolute 、fixed 的
overflow 值不为 visible 、clip 的块级元素
弹性元素，网格元素：指直接父元素是display 的值为 flex、grid ，且自身不是flex、grid、table的元素

2.实现div水平垂直居中有哪几种方式?

布局分两种情况，一种是子元素宽高固定，另一种是宽高不定的情况。
宽高固定
父元素相对定位，子元素绝对定位，子元素可以通过设置left，top为50%，并设置margin-left，margin-top的值为子元素的宽高的一半即可实现居中；
父元素相对定位，子元素绝对定位，子元素可以使用calc方法动态计算left，top的值实现居中

宽高不定
父元素相对定位，子元素绝对定位，子元素可以使用transform：translate(-50%,-50%)实现居中。需要注意的是，这里的-50%是基于子元素的宽度进行计算的；
父元素相对定位，子元素绝对定位，子元素可以通过设置top，left，bottom，right的值为0，且 margin：0 auto；
④通过display：flex、grid、table实现居中；

参考资料：Centering in CSS: A Complete Guide

注意：能实现宽高不定的元素水平居中的方法，那么都可以实现以上两种情况的水平居中对齐

3.设置元素隐藏的方式有哪几种？它们之间都有哪些区别？

display: none
DOM 结构：Render Tree会过滤掉display:none 的元素，因此浏览器不会渲染此元素，体现在界面上就是不会占据任何的空间；
事件监听：无法进行 DOM 事件监听；
性能：动态改变此属性时会引起重排，性能较差；
继承：不会被子元素继承，毕竟子类也不会被渲染；
transition：transition 不支持 display

visibility: hidden
DOM 结构：元素会被渲染，且占据一定空间，只是在界面上不可见而已；
事件监听：无法进行 DOM 事件监听；
性能：动态改变此属性时会引起重绘，性能一般；
继承：会被子元素继承，子元素可以通过设置 visibility: visible; 来取消隐藏；
transition：transition 支持 visibility

opacity: 0
DOM 结构：设置为0，元素隐藏，且占据空间；
事件监听：可以进行 DOM 事件监听；
性能：动态改变此属性时会引起重绘，由于will-change支持opacity属性，我们可以手动开启GPU硬件加速来创建新的Layer从而避免重绘操作，这样使用性能较好；
继承：会被子元素继承,但是，子元素不能通过设置opacity: 1 来使其显示；
transition：transition 支持 opacity

4.CSS选择器的优先级是什么？

在css中优先级高的选择器所对应的样式会被渲染到视图上，而css的优先级是用来衡量CSS选择器有效性的一个指标。权重值比较是我们度量优先级的方法，常见的选择器权重值如下所示