css面试八股文

盒模型

1. 一个盒子包含content、padding、border、margin 
2. 盒子模型可以分为 W3C标准盒模型 和 IE怪异盒模型

W3C标准盒模型  （默认）

width和height只包含content

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

IE怪异盒模型

width和height 指的是 content + padding + border

盒子总宽度 = width + margin 

box-sizing

定义一个盒子的总宽度和总高度

box-sizing : content-box | border-box | inherit

1. content-box 默认值 标准盒模型

2. border-box 怪异盒模型
3. 从父元素继承box-sizing的值

BFC

块级格式上下文

BFC目的是形成一个相对于外界完全独立的空间，让内外部元素不会相互影响。

触发条件

触发 BFC的条件包含不限于:

1. 根元素，即HTML元素
2. 浮动元素: float值为left、right
3.  overflow值不为 visible，为 auto、scroll、hidden
4. display的值为inline-block、inltable-cell、table-caption、table、inline-table flex、inlineflex、grid、inline-grid
5. position的值为absolute或fixed

BFC可以 ：

1. 防止margin重叠
2. 清除内部浮动，解决内部浮动元素溢出
3. 自适应多栏布局，BFC区域不会与浮动盒子重叠，会自动变窄。

响应式设计及基本原理

是一种网络页面设计布局，页面的设计与开发根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的相应和调整。

响应式特点：

同时适配PC、平板、手机；

网站的布局会根据视口来调整模块大小和位置

实现方式：

响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有 meta 声明 viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum
-scale=1, user-scalable=no”>

属性对应如下
width=device-width: 是自适应手机屏幕的尺寸宽度maximum-scale:是缩放比例的最大值
inital-scale:是缩放的初始化
user-scalable:是用户的可以缩放的操作

可以通过下面的方式实现响应式布局：

1. 媒体查询
2. 百分比
3. vw/vh  1vw等于视口宽度的1%
4. rem  根元素设置的font-size大小

元素水平垂直居中的方法

利用定位+margin：auto

子元素需要设置宽高，否则会占满整个父级

利用定位+margin：负值

绝大多数情况下，设置父元素为相对定位。子元素移动自身50%实现水平垂直居中，需要知道子元素的宽高

利用定位+ transform

和margin+负值实现效果一样，不需要知道自身元素的宽高。

table布局

设置父元素为display：table-cell，利用vertical-align和text-align让行内块级元素水平垂直居中;

子元素为display：inline-block

flex布局

父元素设置

display：flex；

justify-content: center;

align-items: center;

grid栅格布局

兼容性较差

display：grid；

justify-content: center;

align-items: center;

两栏布局，右侧自适应；三栏布局，中间自适应

两栏布局

1、左边用float、右边用margin-left

2、flex弹性布局，最优方案，代码少，使用简单。

三栏布局

1. 两边使用float，中间使用自适应  中间使用margin值控制两边间距。
2. 两边使用absolute,中间使用margin
3. 两边使用float和负margin 
4. display：table实现
5. flex实现
6. grid栅格布局

z-index失效原因及解决方法

z-index只有在页面发生重叠的情况才使用，当：

1、设置position属性

2、设置float属性

会导致页面重叠，所以，z-index属性依赖于position属性的设置。如果不设置position属性，z-idnex就不起效。

z-index失效情况：

1.没有设置position属性

解决方法：添加position属性（如relative,absolute等）

2.父元素的position属性设置为relative

解决方法：父元素改为绝对定位

position:absolute

3.float属性与z-index冲突

解决方法：清除浮动

4.父级元素的z-index比子级元素的z-index小

解决方法：提高父级z-index