随着CSS的不断的发展，现在出现了CSS3，CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块；CSS3的新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。 提示：以下是本篇文章正文内容，下面案例可供参考
1、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？？ 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2、box-sizing属性？ 用来控制元素的盒子模型的解析模式，默认为content-box context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽 border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽 3、CSS选择器有哪些？优先级顺序？哪些属性可以继承？ CSS选择器： id选择器(#myid)、 类选择器(.myclassname)、 标签选择器(div, h1, p)、 相邻选择器(h1 + p)、 子选择器（ul > li）、 后代选择器（li a）、 通配符选择器（*）、 属性选择器（a[rel=“external”]）、 伪类选择器（a:hover, li:nth-child）
CSS选择器优先级顺序： -!important > 行内样式（比重1000）> ID 选择器（比重100） > 类选择器（比重10） > 标签（比重1） > 通配符 > 继承 > 浏览器默认属性
CSS可以继承属性： font-size, font-family, color
CSS不可以继承属性： border, padding, margin, width, height
什么是 !important： CSS 中的 !important 规则用于增加样式的权重； !important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。
4、垂直居中几种方式有哪些？ 单行文本: line-height = height 图片: vertical-align: middle; absolute 定位: top: 50%;left: 50%;transform: translate(-50%, -50%); flex: display:flex; margin:auto(自由水平居中） 5、display:none和visibility:hidden的区别？ display:none ：隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。 visibility:hidden ：隐藏对应的元素，但是在文档布局中仍保留原来的空间。 6、position的值， relative和absolute分别是相对于谁进行定位的？ relative:相对定位，相对于自己本身在正常文档流中的位置进行定位。 absolute:生成绝对定位，相对于最近一级定位不为static的父元素进行定位 fixed: 固定定位，相对于浏览器窗口或者frame进行定位。（老版本IE不支持） static:默认值，没有定位，元素出现在正常的文档流中。 sticky:生成粘性定位的元素，容器的位置根据正常文档流计算得出。 7、常见兼容性问题？ 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。 Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决. 8、CSS3新增伪类有那些? p:first-of-type 选择属于其父元素的首个元素 p:last-of-type 选择属于其父元素的最后元素 p:only-of-type 选择属于其父元素唯一的元素 p:only-child 选择属于其父元素的唯一子元素 p:nth-child(2) 选择属于其父元素的第二个子元素 :enabled :disabled 表单控件的禁用状态。 :checked 单选框或复选框被选中 9、display有哪些值？说明他们的作用? inline（默认）–内联 none – 隐藏 block – 块显示 table – 表格显示 list-item – 项目列表 inline-block – 与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。 10、CSS3有哪些新特性？ 文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色） font-face属性：定义自己的字体 圆角（边框半径）：border-radius 属性用于创建圆角 边框图片：border-image: url(border.png) 30 30 round 盒阴影：box-shadow: 10px 10px 5px #888888 11、 position跟display、overflow、float这些特性相互叠加后会怎么样？ display属性规定元素应该生成的框的类型； position属性规定元素的定位类型； float属性是一种布局方式，定义元素在哪个方向浮动。 类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。
11、BFC 是什么？ BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于普通流，即：元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。 可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。 只要元素满足下面任一条件即可触发 BFC 特性
body 根元素 浮动元素：float 除 none 以外的值 绝对定位元素：position (absolute、fixed) display 为 inline-block、table-cells、flex overflow 除了 visible 以外的值 (hidden、auto、scroll) 12、DIV布局的三种方式？ 常规流式布局：
元素按照自身HTML元素定义的位置显示（怎么写的怎么显示） 元素按照自身的常规显示特性显示 浮动布局： 左浮动 float:left; 右浮动 float:right; 定位布局： 静态定位：position:static;（默认值），不写position相当于写上position:static;以前没学定位的时候其实都是静态定位，元素在它原本的位置显示，即使加了top、left等也不起作用。 相对定位：position: relative;相对定位是相对于自身的原始位置进行平移，如果设置position：relative；表示相对定位。z-index:值越大越在上面 注意：z-index必须加在已经定位的元素上才起作用。
绝对定位： position: absolute;子容器相对于父容器的定位，如果没有父容器，则相对于body定位。 13、设置元素浮动后，该元素的display值是多少？ 自动变成display:block 13、全屏滚动的原理是什么？用到了CSS的哪些属性？ 原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现
overflow：hidden； transition：all 1000ms ease； 14、 ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用？ 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。 ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。 :before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after 15、你对line-height是如何理解的？ 行高是指一行文字的高度，具体说是两行文字间基线的距离。 CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。 单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。 多行文本垂直居中：需要设置display属性为inline-block。 总结 以上就是今天要整理的CSS3面试内容，本文仅仅简单介绍了当前CSS3面试的一部分的面试题，并且还有很多关于前端CSS3面试题还有很多，希望大家多多交流探讨，喜欢的可以点赞加关注，后续我会更新更多关于前端开发编程的内容
