前端面试 -【HTML+CSS】

1. 简述一下BFC

• BFC是Block FormattingContext块级格式化上下文，
• BFC的特点
  • BFC内部的盒子会垂直排列
  • 盒子垂直方向的距离由margin决定，相邻的像个元素垂直方向的margin会发生重叠
  • 盒子内的每个盒子左边和外面最大的盒子左边紧贴
  • BFC区域不会与浮动的区域发生重叠
  • 计算BFC的高度时，浮动元素也参与计算
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；
• BFC产生的条件
  • 页面根元素
  • float属性值不为nonde
  • position属性不为absolute和 fixed
  • overflow不为hidden

2. 简述一下盒模型

• 在CSS中，盒模型大的分类可以分为标准盒模型和怪异盒模型
  • 标准盒模型
    • width = margin(左右) + padding(左右) + border(左右) + content
    • height = margin(上下) + padding(上下) + border(上下) + content
  • 怪异盒模型
    • width = margin(左右) + content(padding(左右) + border(左右) + content)
    • height = margin(上下) + content(padding(上下) + border(上下) + content)
• 盒模型的切换
  • 通过 box-sizing 样式进行切换

  	box-sizing: border-box; /* 怪异盒模型 */
  	box-sizing: content-box; /* 标准盒模型 */
  

• 在有些时候，有些人将flex布局以及grid也成为是一种盒模型【flex盒模型 / 网格盒模型】

3. 怎么理解标签语义化？

• 通俗点来说，标签语义化就是用什么样的标签去干什么样的事
• 标签语义化之后，可以是页面解构更加的清晰，并且维护起来也比较方便
• H5新增了许多的语义化标签，例如
  • <header></header> 头部标签
  • <footer></footer> 页脚标签
  • <nav></nav> 导航标签
  • <aside></aside> 侧边栏标签
  • <main></main> 规定文档的主要内容
  • <section></section> 定义文档中的节或段
  • <article></article> 定义页面自成一体的内容区域
    …