共计 1779 个字符，预计需要花费 5 分钟才能阅读完成。
前言
个人总结，收集，分享，如有纰漏，还请小伙伴留言指正！
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 是颜色的一种，这种颜色叫透明色，设置一个元素的颜色或背景色为它
