高频面试题 —— css

link @import
css 居中问题
使用css实现一个三角形
css 布局，左边定宽右边自适应
浮动
rem em px
display有哪些值
margin塌陷
css动画

link @import

建议使用link，慎用@import

（1）@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

（2）加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

（3）import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

（4）js操作DOM，可以使用link改变样式，无法使用@import的方式使用样式。

（5）在link标签引入的 CSS 文件中使用@import时，相同样式将被该 CSS 文件本身的样式层叠。

css 居中问题

1. 父元素：flex

display: flex;
justify-content: center;
align-items: center;

2. 子元素：绝对定位 + margin

给子元素设置绝对定位，让子元素相对父元素向右、向下移动父元素宽高的50%，
然后再用margin-top和margin-left的负值，往回拉子元素自己宽高的50%
/* 父元素相对定位 */
position: relative;
/* 给子元素设置： */
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;

3. 子元素：绝对定位 + transform 位移

transform的translate设置的百分比，是相对于子元素本身的，所以我们可以给子元素设置 -50% ，来解决上一个方法的坑。
/* 父元素相对定位 */
position: relative;
/* 子元素设置一下属性 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

4. 子元素绝对定位 + 上下左右为0 + margin为auto

/* 父元素相对定位 */
position: relative;
/* 子元素设置绝对定位   上右下左都为0   margin为auto */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;

使用css实现一个三角形

通过border宽度和颜色来设置三角形
当一个盒子小到一个只有边框的正方形的时候，就可以设置三条边为透明

.box{
   width: 0;
   height: 0;
   border:50px solid;
   border-color: aqua transparent transparent transparent;
}

css 布局，左边定宽右边自适应

1. float+margin-left

.left{
	float: left;
	width: 200px;
}
.right {
	margin-left: 200px;
}

2. flex

.father{
	display: flex;
}

.left{
	width: 200px;
}
.right {
	flex: 1;
}

3. table

.father{
	width: 100%;
	display: table;
}

.left{
	width: 200px;
	display: table-cell;
}
.right {
	display: table-cell;
}

4. float+overflow

.left{
	float: left;
	width: 200px;
}
.right {
	overflow: hidden;
}

5. absolute + margin-left

.father{
	position: relative;
}

.left{
	width: 200px;
	position: absolute;
	left: 0;
	top: 0;
}
.right {
	margin-left: 200px;
}

6. absolute

.father{
	position: relative;
}

.left{
	width: 200px;
	position: absolute;
	left: 0;
	top: 0;
}
.right {
	position: absolute;
	left: 200px;
	top: 0;
	width: 100%;
}

7. grid

.father{
	display: grid;
	grid-template-rows: 400px;
	grid-template-columns: 200px auto;
}

浮动

浮动的元素从左到右（从右到左）紧密排列
浮动的元素具有块级元素的特征（可以设置宽高、margin、padding），但没有换行符
浮动的元素不存在margin塌陷问题
浮动的元素脱离了标准流，不再占有原来的位置–>子元素设置浮动之后，父元素如果没有设置高度，会呈现塌陷的效果
浮动的元素自适应宽度为包裹内容的宽度

清除浮动

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

rem em px

利用 px 设置字体大小及元素宽高等比较稳定和精确。Px 的缺点是其不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。
em 相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（一般为16px,可以在body选择器中声明Font-size=62.5%；）。
rem 是 CSS3 新增的一个相对单位（root em，根 em）。与 em 的区别在于使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素。
em 的大小与父元素的font-size有关，rem 的大小与根元素html的font-size有关

display有哪些值

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。
flex	布局方式。
table	此元素会作为块级表格来显示，表格前后带有换行符。

margin塌陷

当父元素包裹着一个子元素的时候，当给子元素设置margin-top属性时，此时只是想让子元素的边框距离父元素边框有一段距离，而却出现了父元素的顶端距离body这个边框出现了位移，这就是 margin 塌陷的现象。
不过只有上下外边距才会有塌陷，左右外边距不会出现这种问题。

（1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合。
（2）为父盒子添加overflow：hidden；
（3）为父盒子设定padding值。

css动画