Web培训

热门话题:

Web前端培训 > Web职场 > Web前端面试 > 正文

2020年Web前端面试问题总结之CSS问题

发布：Web前端培训
来源：Web前端面试
时间：2020-09-25 16:25

今天小编要跟大家分享的文章是关于2020年Web前端面试问题总结之CSS问题。准备参加Web前端面试的小伙伴们来和小编一起看一看吧，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助。

Web前端面试问题总结

CSS问题

1.flex布局

display:flex; 在父元素设置，子元素受弹性盒影响，默认排成一行，如果超出一行，按比例压缩 flex:1; 子元素设置，设置子元素如何分配父元素的空间，flex:1,子元素宽度占满整个父元素align-items:center 定义子元素在父容器中的对齐方式，center 垂直居中justify-content:center 设置子元素在父元素中居中，前提是子元素没有把父元素占满，让子元素水平居中。

学习Web前端有困难，遇到疑惑可以加群，里面都是Web前端初学者，有问题直接发群里，会有人帮你解答，每日还会分享笔记资料视频面试题等。

2.css3的新特性

transtion transition-property 规定设置过渡效果的 CSS 属性的名称。

transition-duration 规定完成过渡效果需要多少秒或毫秒。

transition-timing-function 规定速度效果的速度曲线。

transition-delay 定义过渡效果何时开始。

animation属性可以像Flash制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。

ainimation实现动画效果主要由两部分组成：

通过类似Flash动画中的帧来声明一个动画;

在animation属性中调用关键帧声明的动画。

translate 3D建模效果

3.img中alt和title的区别

图片中的 alt属性是在图片不能正常显示时出现的文本提示。alt有利于SEO优化

图片中的 title属性是在鼠标在移动到元素上的文本提示。

4.用纯CSS创建一个三角形

<style>

div {

width: 0;

height: 0;

border-top: 40px solid transparent;

border-left: 40px solid transparent;

border-right: 40px solid transparent;

border-bottom: 40px solid #ff0000;

}

</style>

</head>

<body>

</body>

5.如何理解CSS的盒子模型?

标准盒子模型：宽度=内容的宽度(content)+ border + padding

低版本IE盒子模型：宽度=内容宽度(content+border+padding)

6.如何让一个div水平居中

已知宽度，block元素，添加添加margin:0 auto属性。

已知宽度，绝对定位的居中，上下左右都为0，margin:auto

7.如何让一个div水平垂直居中

div {

position: relative / fixed; /* 相对定位或绝对定位均可 */

width:500px;

height:300px;

top: 50%;

left: 50%;

margin-top:-150px;

margin-left:-250px;

外边距为自身宽高的一半 */

background-color: pink; /* 方便看效果 */

}

.container {

display: flex;

align-items: center; /* 垂直居中 */

justify-content: center; /* 水平居中 */

}

.container div {

width: 100px; /* 可省 */

height: 100px; /* 可省 */

background-color: pink; /* 方便看效果 */

}

8.如何清除浮动?

clear清除浮动(添加空div法)在浮动元素下方添加空div,并给该元素写css样式 {clear:both;height:0;overflow:hidden;}

给浮动元素父级设置高度

父级同时浮动(需要给父级同级元素添加浮动)

父级设置成inline-block，其margin: 0 auto居中方式失效

给父级添加overflow:hidden 清除浮动方法

万能清除法 after伪类清浮动(现在主流方法，推荐使用)

float_div:after{

content:".";

clear:both;

display:block;

height:0;

overflow:hidden;

visibility:hidden;

}

.float_div{

zoom:1

}

9.css3实现三栏布局，左右固定，中间自适应

圣杯布局/双飞翼布局

<style>

* {

margin: 0;

padding: 0;

}

.middle,

.left,

.right {

position: relative;

float: left;

min-height: 130px;

}

.container {

padding: 0 220px 0 200px;

overflow: hidden;

}

.left {

margin-left: -100%;

left: -200px;

width: 200px;

background: red;

}

.right {

margin-left: -220px;

right: -220px;

width: 220px;

background: green;

}

.middle {

width: 100%;

background: blue;

word-break: break-all;

}

</style>

</head>

<body>

</div>

</body>

10.display:none 和 visibility: hidden的区别

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。

visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

11.CSS中 link 和@import 的区别是?

link属于HTML标签，而@import是CSS提供的页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载

import只在IE5以上才能识别，而link是HTML标签，无兼容问题

link方式的样式的权重高于@import的权重.

12.position的absolute与fixed共同点与不同点

共同点：改变行内元素的呈现方式，display被置为block 让元素脱离普通流，不占据空间默认会覆盖到非定位元素上

不同点：absolute的”根元素“是可以设置的 fixed的”根元素“固定为浏览器窗口。当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

13..transition和animation的区别

Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from .... to，而animation可以一帧一帧的。

transition 规定动画的名字规定完成过渡效果需要多少秒或毫秒规定速度效果定义过渡效果何时开始 animation 指定要绑定到选择器的关键帧的名称

14.CSS优先级

不同级别：总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

1.属性后面加!import 会覆盖页面内任何位置定义的元素样式

2.作为style属性写在元素内的样式

3.id选择器

4.类选择器

5.标签选择器

6.通配符选择器(*)

7.浏览器自定义或继承

**同一级别：后写的会覆盖先写的**

css选择器的解析原则：选择器定位DOM元素是从右往左的方向，这样可以尽早的过滤掉一些不必要的样式规则和元素