前端常见面试-css篇

随着疫情的不断好转，各地都开始逐步的复工，固然对咱们来讲，也立刻迎来所谓的金三银四跳槽季。在此，分享本身在前端领域中积累的一些经验，供本身温故知新。

对于前端来讲，涉及的知识面广，内容繁多，可是万变不离其宗，主要也就是围绕着html(5)，css(less,scss,sass,styus,css3),js(es5,es6),以及常见的几大热门框架vue，react等，话很少说，直接开始进入主题。

1.请说出几个html5新特性

答：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声明

2.z-index的使用

答：z-index是用于设置标签的层级关系，使用z-index的时候须要同时设置标签的position属性（如relative或者absolute或者fixed均可），标签的默认z-index为0，能够设置负数，值越大，越在顶部

3.position的属性以及使用方式

答：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 属性的值。

4.float的使用

答：属性定义元素在哪一个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素均可以浮动。浮动元素会生成一个块级框，而不论它自己是何种元素。具体以下：

float形成的效果

1. 使元素自己变成了相似于inline-block的元素
2. 使包裹它的元素忽略它的高度，即父元素没有了高度
3. 如：给子元素box设置了height:100px;此时的父元素height也是100px。

float的影响

1. float使元素脱离了文档流按照指定的方向发生了移动，直到它的外边缘碰到包含框或者另外一个浮动的边框为止。
2. 浮动只会影响他后面的元素，若是上面的元素不浮动，他也不会上去的
3.  若是父元素太窄，没法容纳全部的浮动元素，没法容纳的浮动元素会换行显示。
4. 以换行的那个元素为基准，若是有浮动元素的高度大于换行的那个元素，那么当换行元素换行时会被高的那个元素"卡住"

5.清除浮动影响的方式

答：float会形成文档流的破坏，所以，须要消除float所形成的影响通常有以下几种方案解决：

1. 针对子元素：给浮动的子元素后面再加一个元素，加上一个clear：both属性便可正常显示，缺点是随意添加了一个空元素，不符合代码规范
2. 针对父元素：给父元素后面添加一个相邻的空元素，设置clear属性，但只是让后面的元素正常显示，并无撑开父元素的高度
3. 针对父元素：给父元素设置高度，能够正常显示，但扩展性很差，由于通常都是由里面的内容来撑开高度
4. 针对父元素：给父元素设置display: inline-block，能够正常显示，但父元素的margin：auto失效了，并且会发现上下两个部分会出现间隙
5. 针对父元素：给父元素设置overflow: hidden，能够正常显示了，但须要配合宽度，不然会默认占满一行。

6.css动画属性（如使用css制动一个旋转三角形）

答：制做一个三角形能够直接使用border的属性，具体为能够设置盒子的高宽度为0px，而后设置对应宽度的不一样border的颜色属性，三角形对应的底边设置为具体的三角形颜色，其对应变不设置或者设置为宽度为0 另外两个斜边设置为transparent
旋转动画会涉及到css的两个属性，分别为：
1）transition：动画属性，能够写四个值 分别为对应动画的属性名称或者直接设置all、动画完成的时间（单位为s或者ms）、动画的变化曲线、动画开始的时间
2）transform：旋转属性 主要有rotate（弧度旋转分别还有rotate3d，rotateX，rotateY，rotateZ），translate（同理有四个），scale（同理有四个）

7.正规盒子模型和非正规盒子模型

答：盒子模型主要是计算标签的宽度或高度不一致，标准的盒子模型的包括：margin，border，padding以及内容的宽度，即：盒子的实际宽度=内容的左右margin+左右border+左右padding+内容的实际宽度；而在css3中引入了box-sizing属性，能够改变标准盒子模型的计算方式，具体为：设置box-sizing：border-box的时候，盒子的实际宽度=内容的左右margin+内容的实际宽度，固然能够直接设置box-sizing：content-box的时候便可恢复正常的标准盒子模型

8.flex弹性布局

答：1.设置盒子的display属性为flex，或者line-flex，其对应还有六个css属性，分别为：

1）flex-direction：设置子元素的排列方式（row，column，row-reverse，column-reverse）

2）flex-warp：设置子元素的是否换行（nowarp，warp，warp-reverse）

3）flex-flow：flex-direction和flex-warp的缩写，默认为row nowarp

4）justify-content：设置子元素的水平排列方式（flex-start，flex-end，center，span-around，span-between）

5）align-items：设置子元素的垂直方式（flex-start，flex-end，center，stretch，baseline）

6）align-content：设置多个轴线的排列方式（flex-start，flex-end，center，spand-around，spand-between，stretch）

2. 对应的子元素项目也拥有自身的六个css属性，分别为：

1）order：设置元素的排列权重 值越大越在后

2）flex-grow：设置元素的放大比例

3）flex-shrink：设置元素的缩小比例

4）flex-basis：设置多余空间项目主轴所占比例空间

5）flex：flex-grow和flex-shrink和flex-basis的缩写方式 默认为0 1 auto

6）align-self：设置子元素本身的垂直排列方式，默认为盒子的align-items的值

⚠️：设置flex布局后，子元素的float，clear，vertical-align都无效

9.grid网格布局

答：1. 设置盒子的网格布局须要设置display为grid或者line-grid，其对应包括如下属性：

1）grid-template-columns：定义每一列的宽度

2）grid-template-rows：定义每一行的高度

3）grid-row-gap：定义行之间的间隙

4）grid-column-gap：定义列之间的间隙

5）grid-gap：定义行和列之间的间隙缩写

6）grid-teamplate-areas：定义一个区域由多个单元格组成

7）grid-auto-flow：定义容器排列顺序

8）justify-items：定义子元素的内容水平排列顺序

9）align-items：定义子元素的内容垂直排列顺序

10）place-items：定义子元素的内容水平和垂直顺序的缩写方式

11）justify-content：定义容器（网格）的水平排列顺序

12）align-content：定义容器（网格）的垂直排列顺序

13）place-content：定义容器的水平和垂直排列顺序的缩写方式

2. 子元素的属性包括：

1）grid-column-start：列开始的位置

2）grid-column-end：列结束的位置

3）grid-row-start：行开始的位置

4）grid-row-end：行结束的位置

5）grid-column：列开始和结束位置

6）grid-row：行开始和结束的位置

7）grid-area：定义元素放置在哪一个区域

8）justify-self：定义元素本身的水平排列方式

9）align-self：定义元素本身的垂直排列方式

10）place-self：定义元素本身的水平和垂直排列方式

⚠️：当设置为网格布局后，子元素的float，inline-block，table-cell，column-*属性所有失效

10.常见居中方案

答：1. 行内元素水平居中：直接使用text-align：center

2. 行内元素垂直居中：vertical-align：middle并设置父级元素的行高为父级元素的高度

3. 固定宽度的元素 水平居中使用：magin：0 auto

4. flex弹性布局：设置justify-content：center水平居中，align-items：垂直居中

5. 经过padding属性进行垂直居中

6. 设置父级元素为：display：table-cell，vertical-align：middle

7. 经过伪元素设置垂直居中：设置父级元素一个伪元素 并设置其为inline-block，同时设置vertical-align：middle

8. 高度肯定的时候：绝对定位+margin来垂直居中

9. 高度不肯定的时候：绝对定位+transform，具体为：设置须要垂直居中的元素为：position：absolute，top：50%，transform：translateY(-50%)

10. 经过flex-duration：column来垂直居中：display：flex，flex-duration：column，justify-content：center

水平垂直居中方法：

1. 父级元素高度已知，子元素高宽固定（高度可不固定）：text-align：center，line-height：父级高度

2.绝对定位+margin实现垂直水平居中，须要知道子元素高宽度

3. 绝对定位+transform实现垂直水平居中，能够不知道子元素高宽度：position：absolute；top：50%；left：50%；transform：translate（-50%，-50%）

4. 使用display为table，子元素为display：table-cell；vertical-align：center；text-align：center子子元素设置为vertical-align：center

5. 使用父元素的伪元素进行垂直居中（父元素须要知道高度），设置伪元素的高度为100%，并设置vertical-align：middle，display：inline-block；子元素设置vertical-align：center；display：inline-block（子元素水平居中能够采用text-align：center或者margin：0 auto）

6. 子元素设置为margin：auto；position：absolute；top：0；left：0；right：0；bottom：0；

11.伪元素的使用

1. 常见伪类——:hover,:link,:active,:target,:not(),:focus。
2. 常见伪元素——::first-letter，::first-line，::before，::after，::selection

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。
这些添加不会出如今DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。
因此不要用:before或:after展现有实际意义的内容，尽可能使用它们显示修饰性内容，例如图标

12.css选择器

答：通配符选择器，标签选择器，类选择器，id选择器，属性选择器，空格选择器 大于选择器 加号选择器

13.div设置padding为100%的表现形式

答：不论是标准模式仍是box-sizing模式下，padding都为元素的总宽度是部分，因此此时div的表现为对应div的颜色

14.em、rem、px的用法

1. em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
2. rem相对的只是HTML根元素的font-size的大小来进行计算
3. px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

15.margin的用法及注意事项

答：margin在使用的时候由于会出现相邻两个标签之间的margin进行合并，即设置上下两个标签的margin-top和margin-bottom的时候，会进行自动的合并，以最大的那个属性值为二者之间的实际间隔

16.列举几个常见的css3的属性及用途

答：常见的有：border-radius:设置标签的圆角；box-shadow：设置阴影，box-sizing：改变盒子模型等

17.less和sass的用比较

不一样之处

Less环境较Sass简单

Sass的安装须要安装Ruby环境，Less基于Javascript，是须要引入Less.js来处理代码输出css到浏览器，也能够在开发环节使用Less，而后编译成css文件，直接放在项目中。

Less使用较Sass简单

　Less并无裁剪CSS原有的特性，而是在现有CSS语法的基础上，为CSS加入程序式语言的特性。

Sass功能较Less强大

一、sass有变量和做用域

二、sass有函数的概念

三、进程控制：条件、循环遍历、继承、引用

四、数据结构：数组、map

Less和Sass处理机制不同

前者是经过客户端处理的，后者是经过服务端处理，相比较之下前者解析会比后者慢一点。

关于变量在Less和Sass中的惟一区别就是Less用@，Sass用$

相同之处

Less和Sass在语法上有些共性，好比下面这些：

一、混入(Mixins)——class中的class；
二、参数混入——能够传递参数的class，就像函数同样；
三、嵌套规则——Class中嵌套class，从而减小重复的代码；
四、运算——CSS中用上数学；
五、颜色功能——能够编辑颜色；
六、名字空间(namespace)——分组样式，从而能够被调用；
七、做用域——局部修改样式；
八、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

固然，在涉及到css的时候还会询问有关css预处理语言，如less，scss等，可自行查看相应的资料，在此不作过多的讲解