【面试】前端面试之css篇

一颗甜橙树

已于 2022-03-02 18:50:21 修改

阅读量309

点赞数

分类专栏：前端面试 Css 文章标签： css 前端面试

于 2020-11-23 22:57:05 首次发布

本文链接：https://blog.csdn.net/kikikiuu/article/details/110010100

版权

前端面试同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

Css

13 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

1.如何让一个div盒子实现垂直水平居中？有几种方法？

<div class='parent'>
<div class='children'><div>
<div>

.parent{
	width:600px;
	height:600px;
	background:blue;
.children{
	width:300px;
	height:300px;
	background:pink;
}

1.flex布局（垂直和水平都居中）

.parent{
	display:flex;
	justify-content:center;
	align-item:center;
.children{}
}

2.定位

.parent{
	position:relative;
.children{
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-150px;
	margin-left:-150px;}
}

3.transfrom;

.parent{
	position:relative;
.children{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	}
}

2.清除浮动的方法有哪些?

给父级元素单独定义高（height）

给元素设置overflow：hidden（或者是除了visible其他的属性）

额外的标签法（有浮动的父级元素的末尾插入了一个没有内容的块级元素div 给其设置clear:both的样式）

使用after伪元素清除浮动（推荐使用）

.clearfix:after {
 visibility: hidden;
 clear: both;
 display: block;
 content: ".";
 height: 0;
}

.clearfix {
 *zoom: 1;
}

双伪元素清除法

.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}

3.CSS3的新特性有哪些？

1.颜色：新增RGBA,HSLA模式
2.文字阴影（text-shadow）
3.边框：圆角（border-radius）、边框阴影（box-shadow）
4.盒子模型：box-sizing
5.背景：background-size 设置背景图片的尺寸 background-origin设置背景颜色的原点 background-clip设置背景图片的裁切区域、以“,”分割可以设置多个背景，用于自适应的布局
6.渐变：linear-gradient、radial-gradient
7.过渡：transition ,可实现的动画
8.自定义动画
9.在css3中唯一引入的伪元素是::selection
10.媒体查询，多栏布局
11.border-image
12.2D转换：transfrom:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
13.3D转换

4.新增选择器有哪些？

1.属性选择器语法特点：：[] e[attr]具有某属性的标签 e[attr=’’]属性值完全等于某个值的标签 e[attr*=""]属性值里包含某个值的标签 e[attr$=""]属性值以某个值结尾的标签
e[attr^=""]属性值以某个值开头的标签
2.伪类选择器(位置伪类） e:first-child 父元素的第一个子元素 e:last-child 父元素的最后一个子元素 e:nth-child(n）n是乘法因子，理解为变量，n从0开始取值 e:nth-child(even)偶数
e:nth-child(odd)奇数 e:nth-child(n)倒数第n个元素
3.目标伪类 e.target结合锚点使用

<a href='#box"></a>
<div id='box'></div>

调用#box:target{}
4.伪元素选择器 ::before ::after

5.讲下CSS的盒子模型是怎样的？

一个盒子由外到内可以分成四个部分：margin（外边距）、border(边框)、padding(内边距)、content(内容)。而
margin、border、padding是css的属性，因此可以通过这三个属性来控制盒子的三个部分，而content则是html元素的内容。
而盒子模型也包括两种，IE 盒子模型、标准 W3C 盒子模型。标准 W3C 盒子模型的宽和高都包括了padding、和boder

6.px和em的区别？

相同点：px和em都是长度单位
异同点：px的值是固定的，指定是多少就是多少，计算比较容易，em的值就不是很固定，并且em会继承父级元素的字体大小

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合：1em=16px.那么12px=0.75em，10px=0.625em

7.什么是流式布局？

特点：屏幕分辨率变化时，页面里元素的大小会变化但布局不变
缺点明显：主要问题是如果屏幕尺寸跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。

rem布局 rem是css的长度单位，它是相对于元素的font-size的相对值，假设html{font-size：20px}，那么1rem就等于20px

8.除了流式布局外，还有什么其他的布局方式？请简述？

1.flex弹性布局 flex是flexible Box的缩写，意为‘弹性布局’，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为flex布局。
2.响应式布局
布局特点：每个屏幕分辨率下面都有一个布局样式，即元素位置和大小都会便
设计方法 ：媒体查询+流式布局
缺点：工作量不小，设计也需要多个版本
3.静态布局
优点：这种布局方式读设计师和css编写者都是最简单的，也没有兼容性问题。
缺点：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。当前，大部分网站，大部分企业的Pc宣传站点都采用了这种布局方式。
4.自适应布局 视图宽度的百分比（1vw代表视图的宽度为1%）

9.引入5个css 会重排多少次？

我们先讲一下会触发重排的条件：任何页面布局和几何属性的改变都会触发重排

页面渲染初始化(无法避免)
添加或删除可见的DOM元素
元素位置的改变，或者使用动画
元素尺寸的改变——大小，外边距，边框
浏览器窗口尺寸的变化
填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变

要根据引入css的类型进行判断，
假如引入的5个css都只是单纯的改变外观的属性，那答案是重排0次，重绘5次
假如引入的5个css有改变元素位置or改变元素尺寸的，那答案是重排5次，重绘5次
根据字面上的意思，重排就是重新的排列布局，重绘就是重新的绘制，重排一定要导致重绘，重绘不一定会导致重排

10.pc端怎么适配不同大小的屏幕？

方法一：通过媒体查询meta
方法二：通过现有框架bootstrap
方法三：巧用百分、vw、vh单位以及固定宽度作为版心
方法四：运用px2rem和lib-flexible插件进行适配
lib-flexible适配大屏方案（附移动端适配）
vue项目PC端随屏幕分辨率与窗口大小自适应

11.display:none和visible:hidden的区别是什么?

display:none:不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不着，切换的时候会造成回流
visible:hidden:使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到，切换的时候会造成重绘

12.请简述flex属性，例如flex=1

flex:flex-grow、flex-shrink、flex-basis
flex-grow:flex容器中剩余空间的多少应该被分配给项目。值number，默认值0
flex-shrink：指定了lflex元素的收缩规则。flex元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩量的大小是依据flex-shrink的值
flex-basis：用于设置或检索弹性盒伸缩基准值，number，一个长度单位或百分比，规定灵活项目的初始长度。
解析flex属性：flex：1究竟是什么