# html与css相关面试题

# 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。