前端押题之CSS1.两种盒模型分别说一下分为两种：ie盒模型和w3c盒模型盒模型：内容(content)、填充(padd

1.两种盒模型分别说一下

分为两种：

ie盒模型和w3c盒模型

盒模型：内容

(content)、填充(padding)、边界(margin)、边框(border)；

区别：

IE的content部分把 border 和 padding计算了进去;

box-sizing:content-box(W3C)

浏览器默认

box-sizing:border-box(IE)

我一般用border-box

2.如何垂直居中

table自带功能

position+margin-top

position+margin-top+transform: translate

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

3.flex怎么用和常用属性

1 display:flex;属性

.box{

display: -webkit-flex; /* Safari或者chrome*/

display: flex;}

**注意：**

设为

Flex布局以后，子元素的float

clear

和

vertical-align

属性

将失效。

同时，需要加上

-webkit-

前缀，兼容

-webkit-低版本写法。

2 flex-direction属性

flex-direction

属性决定主轴的方向（即容器内子元素的排列方向）。

.box {

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

3 flex-wrap属性

默认情况下，子元素都排在一条线（又称

”轴线”）上, 不换行。flex-wrap

属性定义是否换行

, 以及换行方式

.box{

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

4 justify-content属性

justify-content

属性定义了项目在主轴上的对齐方式。

.box {

justify-content: flex-start | flex-end | center | space-between | space-around;}

5 align-items属性

align-items

属性定义项目在交叉轴上如何对齐。

.box {

align-items: flex-start | flex-end | center | baseline | stretch;}