CSS 高频面试题

1、css 盒模型

盒模型是计算一个标签在网页中所占面积，是网页布局最基本的技术点，主要有四个组成部分，从内向外的话是内容区域的宽高，内边距padding，边框，外边距margin。

盒子模型分两种W3C标准盒模型和IE怪异盒模型。

在W3C标准盒模型中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在怪异模式下，IE的宽度和高度还包含了padding和border

标准模式和怪异模式的区别？
①盒模型：IE下标准模式为：盒模型的宽高一般是content。怪异模式下的宽度是包含了内边距和边框的
②怪异模式中IE6/7/8都不识别！important声明
③设置行内元素宽高，标准模式下不生效，怪异模式下生效
④margin:0 auto,在标准模式下会水平居中，怪异模式下不会

我们可以使用box-sizing 属性让盒模型在两种模式之间转换，box-sizing ：content-box 是标准盒模型，设置为border-box时是怪异模式

2、行内元素和块级元素的区别

1、所占空间上的区别：块级元素会占据一行，垂直方向排列；行内元素不会独占一整行而是在同一行水平方向排列
2、包含前台关系的区别：块级元素可以包含行内元素和块级元素，而行内元素只能包含行内元素，不能包含块级元素
3、边距属性的区别：块级元素的margin上下左右都生效，而行内元素上下设置不能生效，左右可以生效；

除了这两种还有行内块元素，行内块元素是xxxx（看下面的解释）常见的行内标签有xxx，行内块标签有xxx，块级标签有xxx，可以通过display属性进行转换，将块标签设置display：inline-block 标签就变成了行内块。

3、行内块元素有什么特点呢？

行内块元素相当于是以行的形式展示块级元素，和块级元素一样可以设置宽高内外边距，同时内部也可以包含块级和行内元素；

4、常见的行内元素和块级元素有哪些呢

常见的行内元素：
<span>：用于对文本进行分组，并对其应用样式。
<a>：用于创建超链接。
<label>: 关联输入框并获取焦点

行内块元素：
<img>：用于插入图像。
<input>：用于创建输入控件。
<button>：用于创建按钮。
<textarea>：用于创建多行文本输入框。
常见的块级元素：
div、p、h1-h6、ul、li、table等

5、css 几种定位的区别

css 定位的作用是控制元素在页面中的位置和布局，
通过定位可以将元素放在指定的位置，css定位有五种方式
1、相对定位 postion:relative相对元素在原文档流中的位置定位，设置相对定位不会脱离文档流，元素位置的变化不会影响其他元素
2、绝对定位position:absolute，绝对定位参考的是它的包含块，如果这个元素没有脱离文档流那么它的包含块就是父元素；如果脱离了文档流，就会找第一个拥有定位属性的祖先元素，如果没找到就以浏览器的视口为参考，设置了绝对定位后元素会脱离文档流，会对后面的兄弟元素和父元素有影响。
3、固定定位postion:fixed，相对于浏览器视口定位，会脱离文档流；
4、粘性定位postion：sticky它基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起 10 像素）为止，此后它就变得固定了，不会脱离文档流，参考点是距离它最近的一个拥有滚动机制的祖先元素
5、static 静态定位，默认的定位方式，元素按正常的文档流布局

6、css的选择器和优先级

css 选择器d的作用就是选择需要指定样式的标签，并能让css样式在对应的标签生效。
css选择器有通配符选择器、id选择器、类选择器、属性选择器、后代选择器、子元素选择器、并集选择器。。。
css 选择器的优先级是如何计算的，根据选择器的权重
权重如何计算？格式：（a，b，c）
a: id 选择器的个数
b：类、伪类、属性选择器的个数
c：标签、伪元素选择器的个数
每一项逐一比较，如（0,2，1），比（0,2，0）权重更高。
当权重相同时，如何选中？ 后来者居上，后写的优先
所以css选择器的优先级排序分别是：
0、！important
1、行内样式
2、id选择器
3、类、属性、伪类选择器（权重相同）
4、标签、伪元素选择器（权重相同）

7、隐藏元素的方法和区别

一、display: none：会将元素从正常的文档流中移除，并且不会占据任何空间，但其实该元素在HTML代码中仍然存在，只是它不会在页面上显示。不会响应绑定的监听事件，设置为none 后会影响页面布局。
二、visibility: hidden：元素设置了这个属性后会隐藏但是页面依然占据中空间，所以不会改变页面的布局，但是不会响应绑定的监听事件。
三、opacity: 0：元素设置了透明度为 0后会隐藏但是页面依然占据中空间，所以不会改变页面的布局，并且能够响应元素绑定的监听事件。
四、position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏，绑定的事件将不会响应。
五、z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。
六、rgba(0,0,0,0)：将背景颜色透明，会继续在文档流中占位，所以触发重绘。由于只作用于颜色或背景色，所以子元素不会继承，透明后可以触发点击事件。

8、css3新特性

css3 是css2 的升级版本&#x