1. 盒子模型
- w3c 盒模型
- IE 盒模型
2. 清除浮动
3. 块元素水平垂直居中
4. FLex 布局总结
5. CSS 选择器优先级
- ！important 最高。（尽量避免使用）
- 内联样式：1000
- id 选择器：100
- 类选择器：10
- 元素选择器：1
- 通配选择器：0
优先级相同时采用覆盖原则，谁靠后用谁。
6. position
- static：默认值。
- relative：相对定位。相对元素本身的位置。不脱离文档流。
- absolute：绝对定位。相对于最近的开启定位的祖先元素定位。脱离文档流。
- fixed：固定定位。相对于浏览器窗口定位。脱离文档流。
7. 写一个三角形
.triangle {
height: 0;
width: 0;
border-style: solid;
border-width: 5px;
border-color: transparent red transparent transparent;
}
8. CSS 预处理器
- 基本思想：用一种专门的编程语言，为 CSS 增加一些编程的特性，将 CSS 作为目标生成文件。
- 预处理器例如：LESS、Sass、Stylus，增强了css代码的复用性，还有层级、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。
9. CSS Sprites
- 是一张组合的图片。利用 CSS 的 background-image-position 进行背景定位。
- 优点：
- 减少HTTP请求数，极大地提高页面加载速度。
- 增加图片信息重复度，提高压缩比，减少图片大小。
- 更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现。
- 缺点：
- 图片合并麻烦。
- 维护麻烦，修改一个图片可能需要重新布局整个图片，样式。
10. 常见的元素隐藏方式
- display:none;
- 渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
- visibility:hidden;
- 元素在页面中仍占据空间，但是不会响应绑定的监听事件。
- opacity:0;
- 将元素的透明度设置为 0。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
- 通过使用绝对定位将元素移除可视区域内。
- 通过 z-index 负值，来使其他元素遮盖住该元素。
- 通过 clip/clip-path 元素裁剪的方法来实现元素的隐藏
- 这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
- 通过 transform:scale(0,0)来将元素缩放为 0。
- 这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
11. 文字省略号显示
white-space
- 用于设置空白处理和换行规则
- normal：合并所有连续的空白，允许单词超屏时自动换行。
- nowrap：合并所有连续的空白，不允许单词超屏时自动换行。
text-overflow
- 用于设置文字溢出时的行为（处理不可见部分的内容）
- clip：溢出内容直接裁剪掉
- ellipsis：溢出那行的结尾处用省略号表示
- 该属性生效的前提是 overflow 不是 visible。
- 思考：如何让一个有固定宽度的元素永远只显示一行文字，并且溢出结尾处显示省略号？
.box {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
- 显示两行
.box {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
}
