html + css基础问题

如何理解html语义化？

1、让人更容易读懂（增加代码可读性

2、让搜索引擎更容易读懂（SEO）

盒模型宽度

box-sizing

margin负值的问题

margin-top 和 margin-left ,元素向上，向左移动

margin-rightf负值,右侧元素左移动,自身不受影响

margin-bottom 负值下方元素上移,自身不受影响

什么是BFC？有什么应用？

* block format context ,块级格式化上下文 

* 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

BFC形成的常见条件

* float 不是none

*posotion 是absolute 或fixed

*overflow 不是 visible

 *display 是flex inline-block等

BFC常用来清除浮动

float 圣杯布局和双飞翼布局的技术总结

1、使用float布局

2、两侧使用margin负值，以便和中间内容横向重叠

3、防止中间内容被两侧覆盖，一个用padding一个用margin

手写clearfix

.clearfix:after{

　　content:";

　　display:bolck;

　　clear:both

}

 flex布局

1、flex-direction

2、justify-content

3、align-items

4、flex-wrap

5、align-self

absolute和relative定位

relative依据自身定位

absolute依据最近一层的定位元素定位

居中对齐实现方式

水平居中

1、inline:text-align:center

2、block:margin:auto

3、absolute:left:50%+margin-left负值自身的宽度的一半

垂直居中

1、inline、line-height的值等于height

2、absolute:top50%+margin-top负值

3、absolute：transform(-50%，-50%)

4、absolute：top、left、bottom、right=0+margin:auto

css图文样式

line-height如何继承

写具体数值（30px），继承该值

比列(2/1.5)，继承比列

百分比，（200%）继承计算完后的值

css-响应式

rem 是什么？

px（绝对长度单位）

em (相对父元素的长度单位)

rem （相对根元素font-size的长度单位，常用于响应式布局）

响应式布局的常见方案

1、media-query + rem基于根元素(阶梯性)

2、vw+vh （网页视口的1/100）