HTML语义化？

1. 提高了代码的可读性。
2. 有利于SEO
3. 有利于内容的结构化。

   常见的语义化标签有header footer main article section aside nav

块级元素与行内元素

块级元素：

1. 总是从新的一行开始。
2. 宽高可控。
3. 宽度没有设置时，默认100%。
4. 块级元素可以包含块级元素和行内元素

行内元素：

1. 和其他元素都在一行。
2. 宽高、内边距都是不可控。
3. 宽高就是内容的宽高，不可以改变。
4. 行内元素只能包含行内元素，不能包含块级元素。

类型转化

1. 转换为块元素：display:block;
2. 转换为行内元素：display:inline;
3. 转换为行内块：display: inline-block;

常见的块级元素与行内元素

1. 块级元素有：body from select textarea h1-h6 html table button hr p ol ul dl cnter div。
2. 行内元素有：heda meat title lable span br a style em b i strong。
3. 行内块元素常见的有： img input td。

BFC？

1. 定义：块级格式化上下文，独立的渲染区域，不会影响边界外的元素。
2. 形成条件：

   1. flaot
   2. position
   3. overflow
   4. display

3. 布局规则：

   1. 区域内box从上到下排列
   2. box垂直方向的距离由margin决定
   3. 同一个bfc内box margin会重叠
   4. bfc不会与flaot重叠
   5. bfc计算高度 也会计算float元素

样式优先级的规则是什么？

!important > 内联样式（style） > ID选择器（id） > 类选择器(class) > 标签选择器 > 通配符

浮动

1. 脱离文档流、盒子塌陷、 影响其他元素排版。
2. 解决塌陷：

   1. 给父元素设置高度
   2. 给父元素设置overflow：hidden
   3. 在下方创建一个空白div，添加样式clear：both
   4. 父级添加after伪类 father：：after{ content：''； display：table； clear：both }

CSS尺寸设置的单位

1. px：绝对像素
2. rem：相对于根元素像素
3. em：相对于父元素像素
4. vw：视口宽度
5. vh：视口高度

未知宽高元素水平垂直居中方法

1. 设置元素相对父级定位position:absolute;left:50%;right:50%，让自身平移自身高度50% transform: translate(-50%,-50%);，这种方式兼容性好，被广泛使用的一种方式
2. 设置元素的父级为弹性盒子display:flex，设置父级和盒子内部子元素水平垂直都居中justify-content:center; align-items:center ，这种方式代码简洁，但是兼容性ie 11以上支持，由于目前ie版本都已经很高，很多网站现在也使用这种方式实现水平垂直居中
3. 设置元素的父级为网格元素display: grid，设置父级和盒子内部子元素水平垂直都居中justify-content:center; align-items:center ，这种方式代码简介，但是兼容性ie 10以上支持
4. 设置元素的父级为表格元素display: table-cell，其内部元素水平垂直都居中text-align: center;vertical-align: middle; ，设置子元素为行内块display: inline-block;，这种方式兼容性较好

三栏布局的实现方案

1. 左右浮动 设置宽高 中间设置高 宽度自适应
2. bfc：左右浮动 中间overflow：hidden
3. flex布局 父元素设置flex 中间元素 设置flex-grow：1

盒模型？

CSS盒模型定义了盒的每个部分包含 margin, border, padding, content 。 根据盒子大小的计算方式不同盒模型分成了两种，标准盒模型和怪异盒模型。

1. 盒模型分为两类，

   1. 标准盒模型(W3C 盒模型)。
   2. 怪异盒模型(IE 盒模型)。
   3. 一般我们的盒子默认是标准盒模型。

2. 两者区别

   1. 标准盒模型的实际宽高会把padding和border计算在内。(包括内边距和边框)
   2. 怪异盒模型不会。(只包括内容)

3. 形成怪异盒模型的条件是box-sizing:border-box；
4. 形成标准盒模型的条件box-sizing:content-box。