前端面经-css篇

1、画一条0.5px 的线

采用meta viewport的方式
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

采用transform:scale()的 方式
trasform：scale(0.5,0.5);

为什么不直接设置为0.5px?
其中Chrome把0.5px四舍五入变成了1px，而firefox/safari能够画出半个像素的边

2、link标签和import标签的区别（重要）

• link属于html标签，而@import是css提供的。
• 页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
• llink是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
• link方式样式的权重是高于@import的。

3、动画transition和animation的区别

transition

<div class="box"></div>
.box{
   
	width: 200px;
    height: 200px;
    margin: 50px auto;
    background-color: #00b3f1;
    /* transition: 哪个属性动 运动在多长时间完成 延迟时间 运动类型；*/
	transition:all .5s linear;
}

animation

.box {
   
	width: 200px;
    height: 200px;
    margin: 50px auto;
    background-color: #00b3f1;
        
    animation-duration: 1s;                 /* 动画时间 */
    animation-name: fillout;                /* 通过name使用 */
    animation-iteration-count: infinite;    /* 循环次数，infinite（无限次循环） */
}

@keyframes fillout{
   
	from{
   
		width:200px;
		height:200px;
	}
	to{
   
		width:400px;
		height: 400px;
	}
}

主要区别：

• transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下会随着事件改变属性值。
• transition触发一次播放一次；而animation则是可以设置很多的属性，比如循环次数，动画结束的状态等等。

4、Flex布局

文章连接

Flex 布局教程：语法篇
Flex 布局教程：实例篇

理解

flex弹性布局，用来为盒子模型提供最大的灵活度。采用flex布局的容器，它的所有子元素自动成为容器成员，称为flex项目，容器默认存在两根轴：水平的主轴和垂直的交叉轴。项目默认沿着主轴排列。单个项目占据主轴空间叫做main size，占据的交叉轴空间叫做cross size

flex:1的原理
​flex是flex-grow、flex-shrink、flex-basic的缩写。flex-grow属性指定了flex容器剩余空间的多少应该分配给项目，默认为0不扩大。flex-shrink属性指定了flex的收缩规则，默认为1。flex-basic指定了flex元素在主轴方向上的初始大小。flex的默认值是flex：0 1 auto。flex：1相当于设置了flex：1 1 auto。表示该元素会占据容器所有的剩余空间，所以可以做到footer元素一直保存在底部的效果。

如何用flex布局实现grid布局

容器div的css样式

.grid-box{
   
  display:flex;
  flex-flow: row wrap;
  width:100%;
}

容器内item的css样式
.grid-box-item{
   
  width:calc(calc(100% / 3) - 12px); //使用calc实时计算width
  height: 60px;
  margin: 6px;
  box-sizing: border-box;//为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制
  border-radius:15px;
}
为了使item内部的内容水平垂直居中，同样也使用flex布局方式，具体如下：
  display: flex;
  /*在交叉轴上如何对齐*/
  align-items: center;
  /*在主轴上的对齐方式*/
  justify-content: center;

5、BFC(重要）

概述
BFC是block formatting context,也就是块级格式化上下文，是用于布局块级盒子的一块渲染区域
作用
BFC是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。
1）避免外边距重叠问题
2）清除浮动，高度塌陷
3）阻止元素被浮动元素覆盖
如何创建BFC
1）根元素html
2）浮动元素，float的值不为none
3）绝对定位元素，position的值不为relative和static
4）display的值为table-cell，table-caption,inline-block,flex等中的任何一个。
5）overflow的值不为visible
6）contain值为layout、content、paint

6、盒子模型（重要）

在标准的盒子模型中，width指content部分的宽度，在IE盒子模型中，width表示content+padding+border这三个部分的宽度
标准盒子模型和IE盒子模型互换

box-sizing:content-box,表示安装标准的盒子模型显示
box-sizing:border-box,表示安装IE盒子模型来显示

7、display:none, visibility:hidden和opcatity:0的区别

display:none 隐藏后不占据额外空间，他会产生回流和重绘。
而visibility:hidden和opacity:0元素虽然隐藏了，但他仍然占据空间，这两个只会引起页面重绘。

8、回流（重排）与重绘

回流（重排)
浏览器渲染页面默认采用的是流失布局模型（Flow Based Layout）

所谓回流（重排），实际上是根据渲染树上的每个渲染对象的信息，计算出各自渲染对象的几何信息（DOM对象的位置和尺寸大小），并将其安置在界