CSS高频面试题

面试题"/>

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有什么区别？

 内联，内嵌，外链，导入

1. link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义RSS，定义 rel 连接属性等作用，无兼容性，支持使用javascript改变样式；
2. @import是CSS提供的，只能用于加载CSS，不支持使用 javascript 改变样式；
3. 页面被加载的时，link 会被同时加载，而@import 引用的CSS会等到页面加载完再加载；
4. import是CSS2.1 提出的，CSS2.1以下浏览器不支持，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。