前端面试总结(第三天)

前端面试总结(第三天)

1.css盒模型

css盒模型包括IE盒模型和标准的W3C盒模型。

这两者最主要的区别就是width的包含范围。其中，IE盒模型的宽度指的是content宽度+padding+margin,

w3c盒模型的宽度指的是content的宽度。

在CSS3中，引入了box-sizing属性。box-sizing的属性有border-box,content-box,padding-box。

包含什么，宽度就从什么算起。

2.transition 和 animation 的区别

Animation 和 transition 大部分属性是相同的，他们都是随时间改变元素的属性值，他们

的主要区别是 transition 需要触发一个事件才能改变属性，而 animation 不需要触发任何

事件的情况下才会随时间改变属性值，并且 transition 为 2 帧，从 from … to，而 animation

可以一帧一帧的。

3.flex布局

父元素：

3.1 flex-direction

​ 决定了主轴的方向。（即子item的排列方法）

flex-direction: row | row-reverse | column | column-reverse;

3.2 flex-wrap

​ 子元素item超出是否换行

flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow为上面两项的总写

flex-flow: <flex-direction> || <flex-wrap>;

3.3 justify-content,align-items

分别是水平方向与垂直方向的对其方式。

子元素：

3.4 order

默认为0，可以定义项目的排列顺序。顺序越小，排列越靠前。

3.5 flex-grow,flex-shrink

默认为0，可以定义这一项的放大或缩小比例。

3.6 flex-basis

只有定义了flex-basis之后，才会分配放大和缩小的空间。

以上可以用 flex: 2来表示放大两倍无需写那么多。

3.7 align-self

允许单个项目与其他项目有不一样的对齐方式。

4.你对BFC怎么看

BFC 全称为block format context(块级格式上下文)，相当于是一个独立的块级区域。

作用是用于清除浮动，防止margin重叠。

发生场所是：

​ 1.使用了绝对定位和固定定位的元素。

​ 2.使用了float: left 和float: right的元素。

​ 3.使用display: flex,table-cell,inline-block的元素。

​ 4.使用overflow:hidden的元素。

5.元素垂直居中的方法

1. margin: auto法

 div{ width: 400px; height: 400px; position: relative; border: 1px solid #465468; }img{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; }

2. margin负值法

   .box_top{
   	width:500px;
   	height:400px;
   	position:relative;
   }
   .box_bottom{
   	width:200px;
   	height:250px;
   	position:absolute;
   	top:50%;
   	left:50%;
   	margin-left:-250px;//height的一半
   	margin-top:-200px;//width的一半
   }
   

   3.利用flex布局

   .father{
   	display:flex;
   	justify-content:space-between;
   	align-items:center;
   }
   

   6.单行文本显示省略号

   .css{
   overflow:hidden;
   text-overflow:ehplsis;
   white-space:no-warp;
   }
   

   7.多行文本显示省略号

   .css{
   	display: -webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp: overflow:hidden;
   }