CSS高频面试题
1.行内元素有哪些?块级元素有哪些?空元素有哪些？CSS的盒模型?
- 块级元素：div, p, h1-h6,form, ul ,li
- 行内元素：a, b, br, span, i, input, select
- 行内块级元素：img , input
- 空元素：即没有内容的HTML元素，br, meta, hr, link, input, img
行内元素和块级元素互相转换：
- display: inline 强制将块级元素转换为行内元素
- display: block 强制将行内元素转换为块级元素 并不是实际意义上的块级元素，只是可以设置宽高 用
- display: inline-block 强制将块级元素转为行内元素。注意有3px间距。letter-spacing可以消除这个间距
css盒模型：标准盒模型和IE盒模型
标准盒模型转换为IE盒模型：box-sizing：border-box；
2.为什么要初始化CSS样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
3.如何清除浮动
clear: both
- 一是利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，
- 利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。
4.px，em，rem的区别
- px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。
- em得值不是固定的，并且em会继承父级元素的字体大小。
- rem的大小依赖于根元素 html，浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em
5.如何让文字强制换行，强制不换行
强制不换行 { white-space:nowrap; }
自动换行 { word-wrap:break-word; }
超出显示省略号 { text-overflow:ellipsis;overflow:hidden; }
6.css 隐藏元素的方法？
display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）
7.CSS 常见的伪类和伪元素有哪些，他们的区别？
- 伪元素主要是用来创建一些不存在原有dom结构树种的元素 ；伪类表示已存在的某个元素处于某种状态，但是通过dom树又无法表示这种状态，就可以通过伪类来为其添加样式
- 伪元素的操作对象是新生成的dom元素，而不是原来dom结构里就存在的；而伪类恰好相反，伪类的操作对象是原来的dom结构里就存在的元素。
- 伪元素与伪类的根本区别在于：操作的对象元素是否存在于原来的dom结构里
常见的伪类：
- :link 应用于未被访问过的链接
- :visited 应用于被访问过的链接
- :hover 应用于鼠标悬停到的元素
- :first-child 选择某元素第一个子元素
- :last-child 选择最后一个。。。。。
- :disabled 表单元素禁用
- :enabled 匹配没有被禁用的元素
常见的伪元素：
- ::first-letter 选择元素文本的第一个字
- ::first-line 选择元素文本的第一行
- ::before 在元素内容的最前面添加新内容。
- ::after 在元素内容的最后面添加新内容。
8.CSS引入的方式有哪些？使用Link和@import有什么区别？
内联，内嵌，外链，导入
- link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义RSS，定义 rel 连接属性等作用，无兼容性，支持使用javascript改变样式；
- @import是CSS提供的，只能用于加载CSS，不支持使用 javascript 改变样式；
- 页面被加载的时，link 会被同时加载，而@import 引用的CSS会等到页面加载完再加载；
- import是CSS2.1 提出的，CSS2.1以下浏览器不支持，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。