HTML + CSS 面试题常见知识点

1. offsetWidth = （内容宽度 + 内边距 + 边距），无外边距
2. margin 纵向重叠
   • 相邻元素的 margin-top 和 margin-bottom 会发生重叠
   • 空白内容也会重叠
3. margin 负值问题
   • margin-top 和 margin-left 负值，元素向上、向左移动
   • margin-right 负值，右侧元素左移，自身不受影响
   • margin-bottom 负值，下方元素上移，自身不受影响
4. BFC 理解与应用
   • Block format context，块级格式化上下文
   • 一块独立渲染的区域，内部元素的渲染不会影响边界以外的元素
   • 形成 BFC 的常见条件
     • float 不是 none
     • position 是 absolute 或 fixed
     • overflow 不是 visible
     • display 是 flex inline-block 等
5. 圣杯布局和双飞翼布局
   • 使用 float 布局
   • 两侧使用 margin 负值，以便和中间内容横向重叠
   • 防止中间内容被两侧覆盖，一个用 padding 一个用 margin
6. absolute 和 relative 定位
   • relative 依据自身定位
   • absolute 依据最近一层的定位元素定位
7. 水平居中
   • inline 元素：text-align: center;
   • block 元素：margin: auto;
   • absolute 元素：left: 50%; transform: translateX(-50%);
8. 垂直居中
   • inline 元素：line-height 的值等于 height 值
   • absolute 元素：top: 50%; transform: translateY(-50%);
   • absolute 元素：top，left，bottom，right = 0 + margin: auto
9. line-height 如何继承
   • 写具体数值，如 30px，则继承改值
   • 写比例，如 2，则继承该比例
   • 写百分比，如 200%，则继承计算出来的值