前端面试之CSS

前言

个人总结，收集，分享，如有纰漏，还请小伙伴留言指正！

1.CSS中的标准盒模型和IE盒模型有什么不同？

盒模型：
(1)有两种盒子模型：IE盒模型(border-box)、W3C标准盒模型(content-box)
(2)盒模型：分为内容(content)、填充(padding)、边界(margin)、边框(border)四个部分

IE盒模型和W3C标准盒模型的区别：
(1)W3C标准盒模型：属性width，height只包含内容content，不包含border和padding
(2)IE盒模型：属性width，height包含content、border和padding，指的是content
+padding+border。

在ie8+浏览器中使用哪个盒模型可以由box-sizing(CSS新增的属性)控制，默认值为content-box，即标准盒模型；如果将box-sizing设为border-box则用的是IE盒模型。如果在ie6，7，8中DOCTYPE缺失会将盒子模型解释为IE盒子模型。若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。

2.::before 和:after 中双冒号和单冒号有什么区别？解释一下这两个伪元素的作用

区别：
在css3中使用单冒号来表示伪类，用双冒号来表示伪元素。但是为了兼容已有的伪元素的写法，在一些浏览器中也可以使用单冒号
来表示伪元素。
伪类一般匹配的是元素的一些特殊状态，如hover、link等，而伪元素一般匹配的特殊的位置，比如after、before等。
作用：
想让插入的内容出现在其它内容前，使用::before，否则，使用::after；
在代码顺序上，::after生成的内容也比::before生成的内容靠后。
如果按堆栈视角，::after生成的内容会在::before生成的内容之上。

3.CSS中哪些属性可以继承？

每一个属性在定义中都给出了这个属性是否具有继承性，一个具有继承性的属性会在没有指定值的时候，会使用父元素的同属性的值
来作为自己的值。

一般具有继承性的属性有，字体相关的属性，font-size和font-weight等。文本相关的属性，color和text-align等。
表格的一些布局属性、列表属性如list-style等。还有光标属性cursor、元素可见性visibility。

当一个属性不是继承属性的时候，我们也可以通过将它的值设置为inherit来使它从父元素那获取同名的属性值来继承。

4.display 有哪些值？说明他们的作用。

block：块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
none：元素不显示，并从文档流中移除。
inline：行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block：默认宽度为内容宽度，可以设置宽高，同行显示。
list-item：像块类型元素一样显示，并添加样式列表标记。
table：此元素会作为块级表格来显示。
inherit：规定应该从父元素继承display属性的值。
flex：设置子元素弹性布局

5.常见的元素隐藏方式？

(1)使用 display:none;隐藏元素，渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。

(2)使用 visibility:hidden;隐藏元素。元素在页面中仍占据空间，但是不会响应绑定的监听事件，是继承属性，若子元素使用了 visibility:visible，则不继承，这个子孙元素又会显现出。

(3)使用 opacity:0;将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。

(4)通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。

(5)通过 z-index 负值，来使其他元素遮盖住该元素，以此来实现隐藏。

(6)通过 transform:scale(0,0)来将元素缩放为 0，以此来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

6.设置透明度的方式，以及区别？

rgba 只会改变当前颜色的透明度
opacity，元素内部只要元素相关的颜色都会跟着透明
transparent 是颜色的一种，这种颜色叫透明色，设置一个元素的颜色或背景色为它

7.