基本CSS技巧，可当作面经

• 清除浮动的几种方式

1.父级div定义 height

• 原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
• 优点：简单、代码少、容易掌握
• 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

2.结尾处加空div标签 clear:both

• 原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
• 优点：简单、代码少、浏览器支持好、不容易出现怪问题
• 缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

3，父级div定义 伪类:after 和 zoom

• 原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
• 优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
• 缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持

4，父级div定义 overflow:hidden

• 原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
• 优点：简单、代码少、浏览器支持好
• 缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

• css选择器有哪些，选择器的权重的优先级

选择器类型

1、ID#id
2、class.class
3、标签p
4、通用*
5、属性　　[type="text"]
6、伪类　　：hover
7、伪元素::first-line
8、子选择器、相邻选择器

权重计算规则

1. 第一等：代表内联样式，如: style=””，权值为1000。
2. 第二等：代表ID选择器，如：#content，权值为0100。
3. 第三等：代表类，伪类和属性选择器，如.content，权值为0010。
4. 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
6. 继承的样式没有权值。

•  解释css sprites ，如何使用？

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

CSS Sprites为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要加载更多的图片

• 隐藏元素的方法

1. visibivisibility: hidden 隐藏仍占空间
2. opacity: 0 透明 仍占空间
3. position: absolute;
left: -1000;
top: -9000;  在视口不可见，仍占空间
4. display: none; 隐藏，不占空间
5. reansform: scale(0) 缩小到不可见，原来位置被保留
6. H5 的hidden attribute <p hidden></p> =display:none
7. height:0;
overflow: hidden; 无高度，位置保留
8. filter: blur(0) 模糊度=0

• css3一个冒号和两个冒号的区别

单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素，目的是区分伪类和伪元素，css2前无区分，全都是单冒号(:)，对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。

• 列举所有的伪元素

:before :after  :first-line  :first-letter

• 所有伪类

:active	向被激活的元素添加样式。	
:focus	向拥有键盘输入焦点的元素添加样式。	
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	
:link	向未被访问的链接添加样式。	
:visited	向已被访问的链接添加样式。	
:first-child	向元素的第一个子元素添加样式。	
:lang		
:last-child
:nth-child(n/odd/even)

• css的link和import区别

有4种方式可以在 html 中引入 css。分别为：内联方式、嵌入方式、链接方式、导入方式，其中链接方式使用link引入，导入方式使用import引入。

link和import两者都是外部引用CSS的方式，但是存在一定的区别：

1. 区别1：link是Xhtml标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
2. 区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载（不阻塞）。
3. 区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
4. 区别4：link支持使用JavaScript控制DOM去改变样式；而@import不支持。

• div+css显示两行或三行文字

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; //需要控制的文本行数
overflow: hidden;

适用范围： 因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端。

margin重叠问题

同向margin的重叠：

1图片的margin-top与3图片的margin-top发生重叠，2图片的margin-bottom与3图片的margin-bottom发生重叠。这时候重叠之后的margin值由发生重叠两片的最大值决定；如果其中一个出现负值，则由最大的正边距减去绝对值最大的负边距，如果没有最大正边距，则由0减去绝对值最大的负边距。

解决同向重叠的方法：

1. 在最外层的div中加入overflow:hidden;zoom:1;
2. 在最外层加入padding:1px; (但会影响整体样式的准确性）
3. 在最外层加入：border:1px solid #cacbcc;

异向重叠问题：

1图片的margin-bottom与2图片的margin-top发生重叠，这时候重叠之后的margin值由发生重叠两图片的最大值的决定的。

解决异向重叠问题：

• float:left（只能解决IE6浏览器中的异向重叠问题，可以解决IE8以上、chorme、firefox、opera下的同向重叠问题）