更多课程 选择中心

Web培训
达内IT学院

400-111-8989

Web培训

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

  • 发布:Web前端培训
  • 来源:web前端面试
  • 时间:2020-07-28 14:19

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

web前端面试题总结之CSS问题篇

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>

<div></div>

</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 class='container'>

<div class='middle'></div>

<div class='left'></div>

<div class='right'></div>

</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元素是从右往左的方向,这样可以尽早的过滤掉一些不必要的样式规则和元素

15.雪碧图:

多个图片集成在一个图片中的图

使用雪碧图可以减少网络请求的次数,加快允许的速度

通过background-position,去定位图片在屏幕的哪个位置

以上就是小编今天为大家分享的2020年web前端面试题总结之CSS问题篇的文章,希望本篇文章能够对正准备参加web前端面试的小伙伴们有所帮助,想要了解更多web前端知识记得关注达内web培训官网,最后祝愿小伙伴们工作顺利,成为一名优秀的web前端工程师

【免责声明:本文图片及文字信息均由小编转载自网络,旨在分享提供阅读,版权归原作者所有,如有侵权请联系我们进行删除。】

预约申请免费试听课

填写下面表单即可预约申请免费试听!怕钱不够?可就业挣钱后再付学费! 怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可全国推荐就业!

上一篇:2020年Web前端面试题总结之JS篇
下一篇:Web前端常见面试笔试题分享

2020年前端面试题汇总之算法和应用

2020年前端面试题汇总之常见性能优化

2020年前端面试题汇总之Webpack

Web前端面试必备面试题整理

选择城市和中心
黑龙江省

吉林省

河北省

贵州省

云南省

广西省

海南省