CSS面试题整理（仅供参考）

1. css盒模型？

答：盒子模型的概念

盒子模型（box model）。网页中，每一个元素都占有一定的空间，无论是div、h1~h6、还是p，都可以看成是盒子。

盒子模型的组成

元素的内容（content）

元素的内边距（padding），内容与边框之间的距离

元素的边框（border）

元素的外边距（margin），边框与外部元素之间的距离

盒子模型的分类

分为 ： W3C标准盒子 、IE盒子

box-sizing的取值来切换盒模型，它的取值可以为content-box、border-box；

W3C标准盒子（content-box）：又称内容盒子，是指块元素box-sizing属性为content-box的盒模型。

在这种盒模型下，我们所说的元素的 width ，实际上只包含 content

盒子总宽度 = margin + border + padding + width

IE盒子（border-box）：又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型。

在这种盒模型下，我们所说的元素的 width ，实际上包含了 content + padding + border

盒子总宽 = margin + width

2. css布局相关ifc、bfc？

答：1.BFC（块格式化上下文）

【1】根元素，即HTML元素

【2】float的值不为none

【3】overflow的值不为visible

【4】display的值为inline-block、table-cell、table-caption

【5】position的值为absolute或fixed

规则：

1.BFC的区域不会与float box重叠。

2.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

3.计算BFC的高度时，浮动元素也参与计算。

用途：

1.自适应两栏布局

2.可以阻止元素被浮动元素覆盖

3.可以包含浮动元素——清除内部浮动

4.分属于不同的BFC时可以阻止margin重叠

2.IFC（行级格式化上下文）

【1】 font-size

【2】line-heigh

【3】heigh

【4】vertical-aligin

特点：

1.水平方向根据direction依次布局

2.不会在元素前后换行

3.受white-space属性的影响

4.margin/padding 在竖直方向无效，水平方向有效的

5.white/height 对非替换行内元素无效，宽度由元素内容决定。（替换元素在下面解释

6.非替换行内元素的行框高由line-height决定而替换行内元素的行框高则是由height，padding，border，margin决

7.浮动或者绝对定位会转化为bloc

8.vertical-align属性生效

input a img span 以及display 属性值为inline-block的元素

替换元素：<img><input><textarea>,<select><object>等这些都是替换元素。

3. css布局一（上面定高，左下定宽，右下充满）：

答：

<div class="wrap">

<div class="A">

AAAAAAAAAAAAA

</div>

<div class="B">

<div class="leftp">

bbbbbbbbbbbbbbb

</div>

<div class="rightp">

ccccccccccccccc

</div>

</div>

</div>

html, body {

height: 100%;

padding: 0;

margin: 0;

}

.wrap {

height: 100%;

position: relative;

}

.A {

height: 100px;

background: #BBE8F2;

}

.B {

background: #D9C666;

width: 100%;

position: absolute;

top: 100px ;

left: 0 ;

bottom: 0;

}

.leftp {

width:300px;

height:100%;

background-color:red;

float:left;

}

.rightp {

margin-left:300px;

height:100%;

}

4. css布局二（上面定高，下面充满）：

答：

<div class="box">

<div class="box1">

</div>

<div class="box2">

</div>

</div>

/* 1. 定位 */

* {

padding: 0;

margin: 0;

}

html, body {

height: 100%;

}

.box {

height: 100%;

position: relative;

}

.box1 {

height: 100px;

background-color: red;

}

.box2 {

width: 100%;

position: absolute;

top: 100px;

left: 0;

bottom: 0;

background-color: aqua;

}

/* 2. 计算高度 */

*{

margin:0;

padding:0;

}

.box{

height: 100vh;

}

.box1{

height:100px;

background-color: red;

}

.box2{

height: calc(100vh - 100px);

background-color: aqua;

}

5. css布局三（上下左右居中布局）：

答：

<div class="box">

<div class="content"></div>

</div>

/* 1. 定位居中 */

.box {

width: 200px;

height: 200px;

border: 1px solid red;

position: relative;

}

.content {

width: 50px;

height: 50px;

background: aqua;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

/* 2. flex居中 */

.box {

width: 200px;

height: 200px;

border: 1px solid red;

display: flex;

justify-content: center;

align-items: center;

}

.content {

width: 50px;

height: 50px;

background: aqua;

}

后续会继续补充呐~~