1 - CSS 面试题

HTML 相关

1 对 H5语义化的理解
------------------------------------------------------------------------------------
1 让浏览器更好的理解网页结构
2 搜索引擎优化(SEO), 搜索引擎爬虫会根据不同的标签来赋予不同的权重
------------------------------------------------------------------------------------

2 常见语义化标签: header - nav - footer - audio - video

CSS 布局相关

1 块级格式化上下文 BFC
------------------------------------------------------------------------------------
1 理解:
  1 它一块独立的渲染区域   //隔绝了内部渲染和外部的联系
  2 它规定了常规流块盒的布局方式   //只有在这个区域里面, 常规流块盒的排列规则才是有效的

2 BFC 的特性:
  1 创建了BFC的元素, 不会再无视浮动元素了  //高度自动时, 要考虑浮动元素; 排列布局也会考虑到浮动元素
  2 处在不同的BFC中的元素, 它们的外边距是不可能合并的  //解决外边距合并的问题

2 创建-BFC-的条件:
  1 html 元素内部 == BFC 区域
  2 浮动和绝对定位元素内部 == BFC 区域
  3 overflow 的属性值不等于默认值 visible 的元素内部 == BFC 区域;
  4 display: inline-block, table-cell, table-caption, flex, inline-flex; 的元素内部 == BFC 区域
------------------------------------------------------------------------------------

2 元素居中的各种方式
------------------------------------------------------------------------------------
水平居中: 
  1 行元素: text-align: center
  2 块元素: 定宽 -> 左右 margin 设置为 0
  3 绝对定位: 定宽 -> 左右定位距离设置为 0 -> 左右 margin 设置为 auto 

垂直居中: 
  1 行元素: line-height: 50px;  //行高为父元素的高度 50px
  2 绝对定位: 定高 -> 上下定位距离设置为0 -> 上下 margin 设置为 auto 

水平垂直居中: 
  1 绝对定位: 定宽定高 -> 左右上下定位距离设为0 -> 左右上下margin为 auto 
  2 绝对定位: 定宽定高 -> 上左定位距离设置为0 -> 向上向左移动自身高度的一半 (CS3移动属性可以, 无需知道宽度)

flex 布局可以实现以上所有的情况
------------------------------------------------------------------------------------