- IE盒子模型：设置的宽高值包括content,padding和border值。设置box-sizing:border-box。
- 标准的W3C盒子模型：设置的宽高值只包括content。设置box-sizing:content-box。
- 定义：BFC是块级格式化上下文,一个独立的渲染区域,只有块级元素参与,规定了内部块级元素的布局方式,且该区域与外部无关。
- 原理：
- 内部的box会在垂直方向，一个接一个的放置
- 每个元素的margin box的左边，与包含块的左边相接触（对于从左往右的格式化，否则相反）
- box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠
- BFC的区域不会与浮动区域的box重叠
- BFC是一个页面上的独立的容器，外面的元素不会影响BFC里的元素，反过来，里面的也不会影响外面的
- 计算BFC高度的时候，浮动元素也会参与计算
- 创建BFC的方法
- float属性不为none（脱离文档流）
- position为absolute或fixed
- display为inline-block,table-cell,table-caption,flex,inline-flex
- overflow不为visible
- 根元素
- 应用场景
- 自适应两栏布局
- 清除内部浮动
- 防止垂直margin重叠
- 外部样式表: link标签引入一个外部css文件，或@import引入
- link和页面同步加载，@import会等到页面加载完再加载
- link是XHTML标签，可以定义rss其他事务，@import只能加载css
- link无兼容问题，@import在ie5以下不兼容
- 内部样式表:将css代码放在标签内部
- 内联样式:将css样式直接定义在HTML元素内部
id>class/attr>tag
- 字体系列：font，font-family，font-weight，font-size，font-style
- 文本系列：text-align，line-height，direction（字体书写方向），color（除了a标签）
- 其他：visibility，opacity，cursor
DTD声明定义了标准文档的类型，会使浏览器使用相应的方式加载网页并显示，决定浏览器解析CSS解析模式。忽略DTD声明,将使网页进入怪异模式。 浏览器解析CSS的两种模式：
- 标准模式(strict mode)：浏览器按W3C标准解析执行代码
- 怪异模式(quirks mode)：使用浏览器自己的方式解析执行代码
- 完全隐藏：元素从渲染树中消失，不占据空间
display: none<div hidden></div>：hidden是HTML5新增属性，相当display:none
- 视觉上的隐藏：屏幕中不可见，占据空间
- 移出可视区域：position设置为absolute或fixed，修改top和left；设置margin为超小负数，并且元素高度为0
- 缩放：
transform:translate(-99999px);height:0; - 设置宽高、字体大小为0
opacity:0;：设置透明度为0visibility:hidden;z-index:-9999;position:relative;clip-path: polygon(0 0, 0 0, 0 0, 0 0);
- 语义上的隐藏：读屏软件不可读，但正常占据空间，可见
<div aria-hidden="true"></div>
- 伪类与伪元素都是用于向选择器加特殊效果
- 伪类与伪元素的本质区别就是是否抽象创造了新元素
- 伪类只要不是互斥可以叠加使用；伪元素在一个选择器中只能出现一次，并且只能出现在末尾
- 伪类与伪元素优先级分别与类、标签优先级相同
- 伪类表示的是一种“状态”比如hover，active等等，而伪元素表示文档的某个确定部分的表现，比如::first-line 伪元素只作用于你前面元素选择器确定的一个元素的第一行。