css 准备 #24
Description
重绘 重排
水平居中
垂直居中
BFC 如何创建块级格式化上下文 有什么用
1. 根元素
2. 浮动元素 float不为none
3. position absolute fixed
4. overflow不为visible
5. display的取值为 inline-block table-cell flex inline-flex之一的元素
用处
1. 包含浮动元素
2. 阻止父子元素的margin 折叠
对BFC规范的理解
块级格式化上下文是一个独立的渲染区域，让处于BFC中的元素与外部元素隔离，是内外元素的定位不受影响
规则：
1. 属于一个BFC
应用:
1. 阻止margin折叠
2. 可以阻止元素被浮动元素覆盖
3. 计算 BFC 的高度时，浮动子元素也参与计算
4. BFC 的区域不会与 float 的元素区域重叠
5. 文字层不会被浮动层覆盖，环绕于周围
6. 属于同一个 BFC 的两个相邻 Box 垂直排列
link @import的区别
link 是 html 方式 @import 是css 方式
link 最大限度支持并行下载 @import 过多嵌套导致串行下载 造成FOUC
link 实现早于@import @import 在老式浏览器造成样式隐藏
link 通过ref="alternate stylesheet" 指定候选样式
@import必须在样式规则之前，可以在css文件中引用其他文件
link 优于 @import
当解析到link时，页面会同步加载所引的 css，而@import所引用的 css 会等到页面加载完才被加载
@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 作用于元素本身而不是样式属性，可以使用关键帧的概念，应该说可以实现更自由的动画效果。