前端常见css的面试问题

随着疫情的不竭好转，各地都开端逐渐的复工，当然对我们来说，也立刻迎来所谓的金三银四跳槽季。在此，分享本人在前端领域中积存的一些经历，供本人数往知来。

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

专题引荐：2020年CSS面试题汇总（最新）

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造成的结果使元素本身变成了相似于inline-block的元素使包裹它的元素忽略它的高度，即父元素没有了高度如：给子元素box设定了height:100px;此时的父元素height也是100px。float的影响float使元素离开了文档流依照指定的标的目的发生了移动，直到它的外边沿碰到包括框或者另一个浮动的边框为止。浮动只会影响他后面的元素，假如上面的元素不浮动，他也不会上去的 假如父元素太窄，没法容纳所有的浮动元素，没法容纳的浮动元素会换行显示。以换行的阿谁元素为基准，假如有浮动元素的高度大于换行的阿谁元素，那么当换行元素换行时会被高的阿谁元素"卡住"5.清除浮动影响的方式

答：float会造成文档流的毁坏，因此，需要消弭float所造成的影响一样有如下几种方案解决：

针对子元素：给浮动的子元素后面再加一个元素，加上一个clear：both属性即可正常显示，缺陷是随便增加了一个空元素，不相符代码标准针对父元素：给父元素后面增加一个相邻的空元素，设定clear属性，但只是让后面的元素正常显示，并没有撑开父元素的高度针对父元素：给父元素设定高度，可以正常显示，但扩展性不好，由于一样都是由里面的内容来撑开高度针对父元素：给父元素设定display: inline-block，可以正常显示，但父元素的margin：auto失效了，并且会发明上下两个部分会显现间隙针对父元素：给父元素设定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的值

:warning:：设定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：定义元素本人的水安然平静垂直摆列方式

:warning:：当设定为网格规划后，子元素的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.伪元素的使用

答：

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

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部增加内容。

这些增加不会显现在DOM中，不会改动文档内容，不成复制，仅仅是在css渲染层参加。

所以不要用:before或:after展现有实际意义的内容，尽量使用它们显示润饰性内容，例如图标

12.css选中器

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

13.p设定padding为100%的展现情势

答：不管是标准模式还是box-sizing模式下，padding都为元素的总宽度是部分，所以此时p的展现为对应p的色彩

14.em、rem、px的用途

答：

em是相对长度单位。相关于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设定，则相关于阅读器的默许字体尺寸。rem相对的只是HTML根元素的font-size的大小来停止运算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强大

1、sass有变量和作用域

2、sass有函数的概念

3、进程操纵：前提、轮回遍历、继承、援用

4、数据构造：数组、map

Less和Sass处置机制不一样

前者是通过客户端处置的，后者是通过效劳端处置，比拟较之下前者解析会比后者慢一点。

关于变量在Less和Sass中的独一不同就是Less用@，Sass用$雷同之处

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

1、混入(Mixins)——class中的class；

2、参数混入——可以传递参数的class，就像函数一样；

3、嵌套规则——Class中嵌套class，从而减少反复的代码；

4、运算——CSS中用上数学；

5、色彩功效——可以编纂色彩；

6、名字空间(namespace)——分组样式，从而可以被调取；

7、作用域——部分修改样式；

8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

当然，在触及到css的时候还会扣问有关css预处置说话，如less，scss等，可自行查看响应的材料，在此不做过多的讲解

相关教程引荐：CSS视频教程

以上就是前端常见css的面试问题的具体内容，更多请关注百分百源码网其它相关文章！