这期内容当中小编将会给大家带来有关前端有哪些常见css的面试题目，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
对于前端来说，涉及的知识面广，内容繁多，但是万变不离其宗，主要也就是围绕着html(5)，css(less,scss,sass,styus,css3),js(es5,es6),以及常见的几大热门框架vue，react等，话不多说，直接开始进入主题。
答：html5增加的新特性具体为：
1、新增的语义/结构化标签，如增加了footer，article，main，nav等；
2、新增的input的type类型和属性，如：email，tel，number等；
3、HTML5专有的API 地理位置 本地存储 缓存等
4、新的图形标签 svg canvas 二者区别
5、新的多媒体标签 video audio source
6、废弃的一些元素标签，如：font
7、自定义元素标签
8、DOCTYPE 和字符编码charset声明
答：z-index是用于设置标签的层级关系，使用z-index的时候需要同时设置标签的position属性（如relative或者absolute或者fixed都可），标签的默认z-index为0，可以设置负数，值越大，越在顶部
答：position是css的定位属性，其主要包括以下几个不同的属性值，具体如下：
absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，”left:20” 会向元素的 left 位置添加 20 像素。
static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit
规定应该从父元素继承 position 属性的值。
答：属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。具体如下：
float造成的效果使元素本身变成了类似于inline-block的元素使包裹它的元素忽略它的高度，即父元素没有了高度如：给子元素box设置了height:100px;此时的父元素height也是100px。float的影响float使元素脱离了文档流按照指定的方向发生了移动，直到它的外边缘碰到包含框或者另一个浮动的边框为止。浮动只会影响他后面的元素，如果上面的元素不浮动，他也不会上去的 如果父元素太窄，无法容纳所有的浮动元素，无法容纳的浮动元素会换行显示。以换行的那个元素为基准，如果有浮动元素的高度大于换行的那个元素，那么当换行元素换行时会被高的那个元素"卡住"5.清除浮动影响的方式
答:浮动会造成文档流的破坏,因此,需要消除浮所造成的影响一般有如下几种方案解决:
针对子元素:给浮动的子元素后面再加一个元素,加上一个明确:既属性即可正常显示,缺点是随意添加了一个空元素,不符合代码规范针对父元素:给父元素后面添加一个相邻的空元素,设置明确属性,但只是让后面的元素正常显示,并没有撑开父元素的高度针对父元素:给父元素设置高度,可以正常显示,但扩展性不好,因为一般都是由里面的内容来撑开高度针对父元素:给父元素设置显示:inline-block,可以正常显示,但父元素的保证金:汽车失效了,而且会发现上下两个部分会出现间隙针对父元素:给父元素设置溢出:隐藏,可以正常显示了,但需要配合宽度,否则会默认占满一行。6。css动画属性(如使用css制动一个旋转三角形)
答:制作一个三角形可以直接使用边界的属性,具体为可以设置盒子的高宽度为0 px,然后设置对应宽度的不同边界的颜色属性,三角形对应的底边设置为具体的三角形颜色,其对应变不设置或者设置为宽度为0另外两个斜边设置为透明的
旋转动画会涉及到css的两个属性,分别为:
1)过渡:动画属性,可以写四个值分别为对应动画的属性名称或者直接设置,动画完成的时间(单位为年代或者ms),动画的变化曲线,动画开始的时间
2)变换:旋转属性主要有旋转(弧度旋转分别还有rotate3d, rotateX, rotateY, rotateZ),翻译(同理有四个),规模(同理有四个)
答:盒子模型主要是计算标签的宽度或高度不一致,标准的盒子模型的包括:保证金,边境,填充以及内容的宽度,即:盒子的实际宽度=内容的左+右缘左+右边界左右填充+内容的实际宽度;而在css3中引入了box-sizing属性,可以改变标准盒子模型的计算方式,具体为:设置box-sizing: border-box的时候,盒子的实际宽度=内容的左+右缘内容的实际宽度,当然可以直接设置box-sizing:内容框的时候即可恢复正常的标准盒子模型
