CSS 冷门知识点

Question

BFC 如何创建块级格式化上下文？有什么用？

1. 根元素
2. 浮动元素 float 不为 none
3. position absolute fixed
4. overflow 不为 visible
5. display 的取值为 inline-block table-cell flex inline-flex 之一的元素

用处

• 包含浮动元素
• 阻止父子元素的 margin 折叠

对 BFC 规范的理解

块级格式化上下文是一个独立的渲染区域，让处于 BFC 中的元素与外部元素隔离，是内外元素的定位不受影响

规则：

1. 属于一个 BFC

应用：

1. 阻止 margin 折叠
2. 可以阻止元素被浮动元素覆盖
3. 计算 BFC 的高度时，浮动子元素也参与计算
4. BFC 的区域不会与 float 的元素区域重叠
5. 文字层不会被浮动层覆盖，环绕于周围
6. 属于同一个 BFC 的两个相邻 Box 垂直排列

link @import 的区别

1. link 是 html 方式 @import 是 css 方式
2. link 最大限度支持并行下载 @import 过多嵌套导致串行下载 造成 FOUC
3. link 实现早于@import @import 在老式浏览器造成样式隐藏
4. link 通过 ref="alternate stylesheet" 指定候选样式
5. @import 必须在样式规则之前，可以在 css 文件中引用其他文件
6. link 优于 @import
7. 当解析到 link 时，页面会同步加载所引的 css，而 @import 所引用的 css 会等到页面加载完才被加载
8. @import 需要 IE5 以上才能使用

FOUC ( flash of unstyled content 文档样式短暂失效）

在用户定义样式表加载之前，浏览器采用默认样式显示文档，用户自定义样式表加载渲染好再显示新文档，造成页面闪烁

为啥要初始化 CSS 样式

因为浏览器兼容问题，不同浏览器对有些标签的默认样式不同，保证浏览器之间页面无差异

清除浮动的几种方式 各自的优缺点

1. 父级 div 定 height
2. 结尾处加空 div 元素 clear:both
3. 父级 div 定义伪元素:after zoom

display 有哪些值

• block
• inline
• inline-block 像行内元素一样显示 但其内容像块状元素一样显示
• table 此元素会作为块级表格来显示
• inherit 规定应该从父元素继承 display 属性的值
• flex
• grid

css 盒模型

dom 元素所采用的布局模型，通过 box-sizing 设定

IE W3C

IE content 包括 padding 和 border 算进去

display:none;
visibility:hidden

联系：它们都能让元素不可见

• display:none 渲染树元素消失 不占空间 不可点击，会引起重排，性能消耗较大
• visibility:hidden 不会从渲染树消失 占空间 不可以点击，会引起重绘，性能消耗较小
• opacity:0 不会从渲染树消失，占空间，可以点击，引起重绘，性能消耗较小
• display:none，opacity :0 是非继承属性，子元素消失是因为父元素消失
• visible 是继承属性，自元素消失是因为继承了父元素的 visible 属性，修改子元素的 visible 属性可以使子元素显现

css content 属性

伪元素中插入内容

伪类与伪元素的区别

• : 单冒号标示伪类 :: 双冒号标示伪元素
• 伪类表状态
• 伪元素是真的有元素
• CSS 中 ::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素
• CSS 伪元素 ::after 用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合 content 属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

清除浮动防止父元素高度坍塌

1. 尾部加一个空 div clear:both
2. :after 或者 br content: ''; clear: both; ​
3. 使父元素成为 BFC
4. 设定高度

CSS 预处理器

类 CSS 语言通过 webpack 编译成浏览器可读的 css，在这层编译上便可以赋予 css 更多更强大的能力：

• 嵌套
• 变量
• 循环语句
• 条件语句
• 自动前缀
• mix 复用

CSS animation 与 CSS transition 有何区别？

transition 关注的是 CSS property 的变化，property 值和时间的关系是一个三次贝塞尔曲线。

animation 作用于元素本身而不是样式属性，可以使用关键帧的概念，应该说可以实现更自由的动画效果。