css面试常见知识点总结

1. 如何理解html语义化？

• 增加代码可读性
• 让搜索引擎更易读懂（seo）

2. 块状元素和内联元素

• display:black/table; 有div h1 h2 table ul ol p等
• display:inline/inline-block;有span img input button等

3. 盒模型宽度计算

• offsetWidth = (content+padding+border)，无外边距
• box-sizing:border-box;

4. margin纵向重叠

• 相邻元素margin-top和margin-bottom会发生重叠
• 空白内容<p></p>元素也会重叠

5. margin负值问题

• margin-top 和 margin-left 负值，元素向上、向左移动
• margin-right负值，右侧元素左移，自身不受影响
• margin-bottom负值，下方元素上移，自身不受影响

6. BFC理解与应用

• block formart context ，块级格式化上下文
• 一块独立渲染区域。内部元素的渲染不会影响边界以外的元素
• 形成bfc的条件（float:left/right;position:absoult/fixed;overflow:hidden;display:flex/inline-block）
• bfc的常见应用，清除浮动。

7. float布局

• 圣杯布局和双飞翼布局技术总结
• 使用float布局
• 两侧使用margin负值，以便和中间内容横向重叠
• 防止中间内容被两侧覆盖，一个用padding一个用margin
• 手写clearfix

.clearfix:after{
    content:"";
    display:table;
    clear:both;
}

8. flex 布局

• 常用语法：

// 容器属性
flxe-direction；//主轴方向
justify-content；//主轴对齐方式
aligin-items; //子元素垂直对齐方式
flxe-warp //是否换行
//子元素属性
align-self //子元素垂直对齐方式

9. 水平居中实现方式

• inline元素：text-align：center
• block元素：margin：auto
• absolute元素：left：50%+margin-left负值

10. 垂直居中

• inline元素：line-height的值等于height值
• absolute元素：top：50%+margin-top负值
• absolute元素：transform:translate（-50%,-50%）
• absolute元素：top,left,bottom,right = 0 + margin:auto

11. rem布局

• em是根元素字体的单位，比如 html{font-size:16px;} ，1rem相当于16px。
• 通过动态设置html的font-size 来改变rem的大小，从而达到自适应