风尚云网-css相关综合面试题(不看后悔系列)持续更新...

风尚云网

已于 2022-05-30 15:00:17 修改

阅读量546

点赞数 9

分类专栏：总结的一部分前端面试题文章标签： css css3 html 风尚云网面试

于 2022-02-09 20:39:59 首次发布

本文链接：https://blog.csdn.net/zsx0806/article/details/122848966

版权

总结的一部分前端面试题专栏收录该内容

12 篇文章 0 订阅

订阅专栏

说一下CSS 用 top left 定位和 transform 的区别？

请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？

display:none与visibility：hidden的区别？

清除浮动的方式：

设置元素浮动后，该元素的display值是多少？

移动端的布局用过媒体查询吗？

使用 CSS 预处理器吗？

CSS优化、提高性能的方法有哪些？

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

display:inline-block 什么时候会显示间隙？

有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度

CSS属性overflow属性定义溢出元素内容区的内容会如何处理?

阐述一下CSS Sprites

持续更新，敬请关注

说一下CSS 用 top left 定位和 transform 的区别？

1.使用 top left 定位是直接改变元素真实位置的

但是你用 transform:只是改变了视觉位置，元素本身位置还是在 0px，

2.left top在选择%计算时候，是按照父节点的长宽来位移，

而transform的%是按照自身节点的宽高来位移。

请简述一下CSS 盒子模型?

一个盒子中主要的属性就5个：width、height、padding、border、margin

大致分为标准盒模型和IE盒模型

CSS3的box-sizing属性

border-box;是怪异盒模型= width、height、border
content-box;是标准盒模型 =width、height、padding、border、margin

如何实现一个最大的正方形？

用 padding-bottom 去撑开边距
div { width:100%; padding-bottom: 100%; background: red; }

如何实现文本一行水平居中，多行居左?

<div><span>我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。</span></div>
<div><span>我是一行文字</span></div>

<style>
div{text-align: center;}
div span{display: inline-block;text-align: left;}
</style>

如何实现水平垂直居中？

16种方法实现水平居中垂直居中 - 掘金

请用css画三角形?

.sanjiao {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 50px solid transparent;
	border-bottom: 50px solid blue;
	background: white;
}

说一下你对BFC理解？

BFC触发条件：

根元素，即html
float的值不为none（默认）
position的值为absolute或fixed
overflow的值不为visible（默认）
display的值为inline-block、table-cell、table-caption

BFC特性：

内部的Box会在垂直方向上一个接一个放置。
Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
每个元素的margin box 的左边，与包含块border box的左边相接触。
BFC的区域不会与float box重叠。（可用于清浮动）
BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
计算BFC的高度时，浮动元素也会参与计算。

rem适配了解吗？

rem是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数的一个css单位，也就是我们
前端常说的适配单位rem。因为rem的特性相对长度单位，

常被用来做移动适配，pc端页面不推荐使用rem。

你了解重绘与回流吗？

重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性
（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式（跳过了上图所示的回流环节）。
回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化
（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）。

回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流。比如以下情况：

添加或删除可见的DOM元素
元素的位置发生变化
元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
页面一开始渲染的时候（这肯定避免不了）
浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

注意：回流一定会触发重绘，而重绘不一定会回流

根据改变的范围和程度，渲染树中或大或小的部分需要重新计算，有些改变会触发整个页面的重排，比如，滚动条出现的时候或者修改了根节点。

CSS中避免回流、重绘

尽可能在DOM树的最末端改变class
避免设置多层内联样式
动画效果应用到position属性为absolute或fixed的元素上
避免使用table布局
使用css3硬件加速，可以让transform、opacity、filters等动画效果不会引起回流重绘

JS操作避免回流、重绘

避免使用JS一个样式修改完接着改下一个样式，最好一次性更改CSS样式，或者将样式列表定义为class的名称
避免频繁操作DOM，使用文档片段创建一个子树，然后再拷贝到文档中
先隐藏元素，进行修改后再显示该元素，因为display:none上的DOM操作不会引发回流和重绘
避免循环读取offsetLeft等属性，在循环之前把它们存起来
对于复杂动画效果,使用绝对定位让其脱离文档流，否则会引起父元素及后续元素大量的回流

display有哪些值？说明他们的作用?

inline（默认）–内联
none–隐藏
block–块显示
table–表格显示
list-item–项目列表
inline-block 行内块

定位中position的值？

static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。

CSS3有哪些新特性？

RGBA和透明度
background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
word-wrap（对长的不可分割单词换行）word-wrap：break-word
文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
font-face属性：定义自己的字体
圆角（边框半径）：border-radius 属性用于创建圆角
边框图片：border-image: url(border.png) 30 30 round
盒阴影：box-shadow: 10px 10px 5px #888888
媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性

请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

display:none与visibility：hidden的区别？

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

清除浮动的方式：

父级div定义height
最后一个浮动元素后加空div标签并添加样式clear:both。
包含浮动元素的父标签添加样式overflow为hidden或auto。
父级div定义zoom

设置元素浮动后，该元素的display值是多少？

自动变成display:block

移动端的布局用过媒体查询吗？

通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。

<head>里边<link rel=”stylesheet” type=”text/css” href=”xxx.css” media=”only screen and (max-device-width:480px)”>
CSS : @media only screen and (max-device-width:480px) {/css样式/}

使用 CSS 预处理器吗？

Less sass

CSS优化、提高性能的方法有哪些？

避免过度约束
避免后代选择符
避免链式选择符
使用紧凑的语法
避免不必要的命名空间
避免不必要的重复
最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
避免！important，可以选择其他选择器
尽可能的精简规则，你可以合并不同类里的重复规则

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。

display:inline-block 什么时候会显示间隙？

有空格时候会有间隙解决：移除空格
margin正值的时候解决：margin使用负值
使用font-size时候解决：font-size:0、letter-spacing、word-spacing

有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度

外层div使用position：relative；

高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left: 0

CSS属性overflow属性定义溢出元素内容区的内容会如何处理?

参数是scroll时候，必会出现滚动条。
参数是auto时候，子元素内容大于父元素时出现滚动条。
参数是visible时候，溢出的内容出现在父元素之外。
参数是hidden时候，溢出隐藏。

阐述一下CSS Sprites

将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。

利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。

....................................