【面试】前端面试之css篇

如何让一个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.magin:auto;

.parent{
	position:relative;
.children{
	position:absolute;
	magin:auto;
	top:0;
	left:0;
	right:0;
	bottom:0;
	}
}

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

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

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

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

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

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

.clearfix {
 *zoom: 1;
}

5. 双伪元素清除法

.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%）