CSS的一些知识点（一）

CSS 的选择器

比较常用的几种

1. *：通配符选择器，用于清除浏览器默认样式
2. ID 选择器：一个页面里面的 id 是不能重复的
3. Class 选择器：一个页面里面的类是可以重复的，一个元素可以有多个类，分基类和扩展类
4. 标签选择器
5. 后代选择器

其他几种选择器

6. 子代选择器
7. 交集选择器
8. 并集选择器
9. 兄弟选择器
10. 伪类选择器：用冒号（:）表示不同状态下的样式
11. 伪元素选择器：用双冒号（::）或冒号（:）表示，分 after 和 before
12. 属性选择器：用中括号（[]）追加属性，input[name=”username”]
13. 结构选择器

CSS 的盒子模型

页面布局的本质是盒子（box），是 CSS 布局的对象和基本单位，一个页面就是由 n 个盒子组成的。
一个基本的盒模型，包括 content（width/height）、padding、border、margin
盒模型分成两类：标准盒子模型和 IE 盒子模型
标准盒模型的 width 是只指 content
IE 盒模型的 width 包括 content、padding、border

盒子模型的设置

标准盒模型：box-sizing: content-box;
IE盒模型：box-sizing: border-box;

什么是图片精灵以及它的优点和缺点

精灵图是一种网页图片的应用技术，它把背景图片（通常是很多小图标）都整合到一张图片上，再利用 background-position 进行图片定位。
优点：有效减少 http 请求，减少图片加载时间
缺点：合成比较麻烦，需要精准定位

display:inline-block 什么时候会显示间隙？如何解决咧？

1. 相邻的 inline-block 元素之间有换行或空格分隔的情况下会产生间距
2. 非 inline-block 水平元素设置为 inline-block 也会有水平间距
3. 可以在父级加 font-size：0; 在子元素里设置需要的字体大小，消除垂直间隙
4. 把 li 标签写到同一行可以消除垂直间隙，但代码可读性差

display: none; 与 visibility: hidden; 的区别

1. display: none;让元素完全从渲染树中消失，渲染时不占据任何空间；visibility:hidden;不会让元素从渲染树消失，继续占据空间，只是内容不可见
2. display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden;是继承属性，子孙节点消失由于继承了 hidden，通过设置 visibility: visible;可以让子孙节点显式
3. 修改常规流中元素的 display 通常会造成文档重排。修改 visibility 属性只会造成本元素的重绘
4. 读屏器不会读取 display: none;元素内容；会读 visibility: hidden 元素内容

为什么会出现浮动？何时需清除浮动?清除浮动的方式?

浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上

浮动带来的问题

• 父元素的高度无法被撑开，影响与父元素同级的元素
• 与浮动元素同级的非浮动元素（内联元素）会跟随其后
• 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

清除浮动的方式

1. 父级 div 定义伪类：after 和 zoom

<style>
.clearfloat::after{ 
 display: block; 
 clear: both; 
 content:""; 
 visibility: hidden; 
 height:0 
} 
.clearfloat{zoom:1} 
</style>

2. 在结尾处添加空 div 标签 clear: both
3. 父级 div 定义 height
4. 父级 div 定义 overflow: auto
5. 父级 div 定义 overflow: hidden
6. 父级 div 也一起浮动
7. 父级 div 定义 display: table

rgba()和 opacity 的透明效果的区别

opacity 作用于元素以及元素内的所有内容（包括文字）的透明度
rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果

CSS 优化、提高性能的方法有哪些

• 多个 CSS 合并，尽量减少 HTTP 请求
• 将 CSS 文件放在页面最上面
• 移除空的 CSS 规则
• 避免使用 CSS 表达式
• 选择器优化嵌套，尽量避免层级过深
• 充分利用 CSS 继承属性，减少代码量
• 抽象提取公共样式，减少代码量
• 属性值为 0 时，不加单位
• 属性值为小于 1 的小数时，省略小数点前面的 0
• CSS Sprite

line-height 三种赋值方式有何区别

• 带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
• 纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px；
• 百分比：将计算后的值传递给后代