布局

盒模型宽度计算

offsetWidth = （内容宽度 + 内边距 + 边框），无外边距
offsetWidth = 100 + 10 * 2 + 1 * 2 = 122px

补充：如果想让 offsetWidth 等于 100px，该如何做？
box-sizing: border-box;

margin 纵向重叠问题

AAA



BBB

• 相邻元素的 margin-top 和 margin-bottom 会发生重叠
• 空白内容也会重叠
• 答案是 15px

margin 负值问题

对 margin 的 top left right bottom 设置负值，有何效果？

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

BFC 理解与应用

什么是 BFC？如何应用？

• Block format context，块级格式化上下文
• 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

形成 BFC 的常见条件：

• float 不是 none
• position 是 absolute 或 fixed
• overflow 不是 visible
• display 是 flex inline-block 等

BFC 的常见应用：清除浮动

这是一段文字这是一段文字

  

这是一段文字这是一段文字

float 布局

如何实现圣杯布局和双飞翼布局？

圣杯布局和双飞翼布局的特点：

• 三栏布局，中间一栏最先加载和渲染（内容最重要）
• 两侧内容固定，中间内容随着宽度自适应
• 一般用于 PC 网页

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

• 使用 float 布局
• 两侧使用 margin 负值，以便和中间内容横向重叠
• 防止中间内容被两侧覆盖，一个用 padding 一个用 margin

代码示例：

圣杯布局：

这是header
这是center
这是left
这是right
这是footer

双飞翼布局：

这是 main
这是 left
这是 right

.col {float: left;
}
#main-wrap {margin: 0 190px;
}
#left {margin-left: -100%;
}
#right {margin-left: -190px;
}

手写 clearfix

.clearfix::after {content: '';display: table;clear: both;
}
.clearfix {*zoom: 1; /* 兼容 IE 低版本 */
}

flex 布局

flex 实现一个三点的色子
常用语法回顾：

• flex-direction
• justify-content
• align-items
• flex-wrap
• align-self

代码示例：

定位

absolute 和 relative 分别依据什么定位

• relative 依据自身定位
• absolute 依据最近一层的定位元素定位

定位元素：

• absolute relative fixed
• body

居中对齐有哪些实现方式

水平居中

• inline 元素：text-align: center
• block 元素：margin: auto
• absolute 元素: left: 50% + margin-left 负值 (必须知道宽度)

垂直居中

• inline 元素：line-height 的值等于 height 的值
• absolute 元素: top: 50% + margin-top 负值 (必须知道高度)
• absolute 元素: left: 50% top: 50% + transform(-50%, -50%) （兼容性需要考虑）
• absolute 元素: top left bottom right = 0 + margin: auto

图文样式

line-height 如何继承

AAA

答案是 20 * 200% = 40px

解析：

• 写具体数值，比如 30px，则继承该值
• 写比例，如 2或者1.5，则继承该比例
• 写百分比，如200%，则继承计算出来的值

响应式

rem 是什么

• px，绝对长度单位，最常用
• em，相对长度单位，相对于父元素，不常用
• rem，相对长度单位，相对于根元素，常用于响应式布局

响应式布局的常见方案

• media-query，根据不同的屏幕宽度设置根元素 font-size
• rem，基于根元素的相对单位

vw/vh

• rem 的弊端：“阶梯”性
  媒体查询可能需要写很多
• 网页视口尺寸
  1）window.screen.height // 屏幕高度
  2）window.innerHeight // 网页视口高度
  3）ducument.body.clientHeight // body 高度

• vw/vh
  1）vh 网页视口高度的 1/100
  2）vw 网页视口宽度的 1/100
  3）vmax 取两者最大值；vmin取两者最小值