目录
- CSS盒模型
- CSS选择器优先级
- Flex
- BFC
- 定位
- 外边距合并
- 清除浮动
- img默认inline却可以设置宽高
- 背景颜色填充
- calc属性
- z-index属性
- 重绘和重排
- 元素隐藏的方法和区别
- link标签和import标签的区别
- transition和animation的区别
- block、inline、inline-block的区别
- js动画和css3动画的差异性
- 三栏布局
- 两列等高布局
- 水平垂直居中
- 用CSS画三角形
- 用CSS实现正方体旋转效果
- 多行元素文本省略号
CSS盒模型
IE盒模型： widht = padding + content + border
标准盒模型： width = content
CSS3引入的box-sizeing可以统一盒子模型
CSS选择器优先级
| 选择器 | 权重 |
|---|---|
| style | 1000 |
| id | 0100 |
| class、伪类、属性 | 0010 |
| 标签、伪元素 | 0001 |
| 通配符、子选择器、相邻选择器 | 0000 |
!important：优先级最高，当一个元素同时拥有两个!important时，运用计算权重
权重相加比较只适用于同级别，跨级则不适用，如：11 * class < 1 * id
Flex
BFC
块级格式上下文，是一个独立的渲染区域，有一定的布局规则
可以用于清除浮动，消除外边距合并
BFC是页面上一个独立容器，子元素不会影响到外面
计算BFC高度时，浮动元素也会参与计算
生成BFC的条件：
- 根元素
float不为none的元素position为fixed或absolute的元素display为inline-block,table-cell,table-caption,flex,inline-flex的元素overflow不为visible的元素
定位
position: fixed：相对浏览器窗口定位
position: relative：不脱离文档流，占据其原有位置
position: absolute：相对最近已定位父元素定位，如没有则相对<html>，相对点为相对元素padding至border左上角交界处
position: sticky：开始随文档流布局，超过特定的阈值后固定
float:left：脱离文档流，与absolute的区别是，float脱离文本会环绕
外边距合并
块元素（父子，兄弟）间margin在垂直方向上会重叠
重叠效果为：
相邻外边距都是正数，取最大值
相邻外边距都是负数，取最小值
相邻外边距一正一负，取两者和
清除浮动
- 添加
clear: both - 利用BFC
img默认inline却可以设置宽高
img标签默认是inline元素，但是其本身是 可替换元素 ，因此展现效果不是由CSS来控制。即CSS可以影响可替换元素的位置，但是不会影响可替换元素自身的内容。
可替换元素 拥有内置宽高，性质与 inline-block 一致，这些元素的内容都不是通过在标签内添加文本展示，而是通过某个属性或者JS控制显示
典型的可替换元素有
- iframe
- video
- embed
- img
背景颜色填充
填充content、padding、border(未单独设置颜色)
calc属性
可以计算任何CSS支持的长度值，如：width: calc(100% - 10px + 1rem)；
z-index属性
只对定位元素适用，决定元素间的覆盖关系
定位规则：
- 父元素决定子元素，即父元素小于其他元素，子元素大于也无效
- 负值只在父元素z-index: auto时隐藏子元素
- 值相同时，后定义的元素在上
重绘和重排
DOM的变化影响到了页面的布局，比如宽高的变化会重新计算元素的几何属性，其他的元素的也会受到影响，因此浏览器需要重新构建渲染树，这个过程称为重排
浏览器将受影响的部分重新绘制在屏幕上的过程称为重绘
重绘不一定导致重排，重排必定导致重绘
元素隐藏的方法和区别
opacity = 0： 透明度为0，不会改变布局，会事件触发
visibility = hidden：可见性为隐藏，不会改变布局，不会触发事件
display: none：不渲染元素，会改变布局，不触发事件
link标签和import标签的区别
link 属于html标签，@import是css提供的
页面加载时，link会同步加载，而@import引用的css会等到页面加载结束后加载
注：页面加载结束指DOM构建完成，即DOMContentLoaded触发，无论@import写在css文件中何处，都是如此
transition和animation的区别
transition需要事件触发，animation不需要
block、inline、inline-block的区别
block：独占一行，有自动填满父元素，可以设置margin和padding以及高度和宽度
inline：不会独占一行，width和height会失效，并且在垂直方向的padding和margin会失效
inline-block：展示类似inline，内容类似block。元素会排成一行显示，可以设置宽高以及边距
js动画和css3动画的差异性
渲染线程分为 main thread 和 compositor thread
main thread 维护一棵 LayerTreeHost 树
compositor thread 维护了一棵 LayerTreeHostImpl 树
两个线程可以互不干扰
如果CSS动画只改变transform和opacity时，动画可以只在 compositor thread 上完成且不layout和paint
因此，在大部分应用场景下，效率角度更值得关注的还是下列问题
- 是否导致
layout repaint的面积- 是否是有高消耗的属性（
css shadow等） - 是否启用硬件加速
最低0.47元/天 解锁文章
141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
