移动端布局（一）—— 基础知识

一、基础知识

1. 移动端和 PC 端 的区别

• PC屏幕大，网页固定版心
• 手机屏幕小，网页宽度多数为100%

2、 分辨率

• 物理（硬件）分辨率：生产时就固定的，不可改变
• 逻辑分辨率：软件（驱动）决定；前端代码中的分辨率

移动端的分辨率:

• 一般设计稿是参考 iPhone6/7/8 进行设计的，其中的物理分辨率 ：逻辑分辨率 = 2：1

3. 视口

• 使用 meta 标签设置视口宽度，制作不同设备宽度的网页，使网页宽度和设备宽度（分辨率）相同
• 移动端必须要有 meta 标签

4. 二倍图

• 设计稿中的尺寸一般是物理分辨率（750）
• 网页一般以二倍图居多
• 可以通过 像素大厨 等测量二倍图中的元素尺寸

5. 百分比布局

• 也称 流式布局
• 宽度自适应，高度固定的布局

二、 布局中的尺寸与位置

1. CSS 盒模型

• 所有元素都可以看做是一个盒子，每个盒子都由：内容区（content）、内边距（padding）、边框（border）、外边距（margin） 四个部分组成
• padding 不能为负值，但是 margin 可以设置负值
• 背景色会平铺到非 margin 的区域，边框也会有背景色，但如果边框设置了颜色会覆盖掉背景色
• margin-top 的传递现象：在内层子元素设置了margin-top 时，会带动父元素一起移动。
  • 子元素设置padding
  • 父元素设置边框，边框设置为透明的
  • BFC 格式化上下文
  • 弹性布局/网格布局
• margin 上下叠加的现象
  • 只给一个元素设置margin
  • BFC 格式化上下文
  • 弹性布局/网格布局

2. 块级盒子和内联盒子

2.1 块级盒子

• 独占一行
• 支持所有样式
• 不写宽度时，宽度和父容器宽度一致
• 主要用于做布局

2.2 内联盒子

• 盒子不会产生换行
• 有些样式不支持，如：width、height、margin/padding的上下值
• 不写宽度时，盒子宽度由内容撑开
• 所占的区域不一定是矩形
• 主要用于元素修饰

3. 自适应盒模型

• 自适应盒模型：当子元素盒子不设置宽度时，子元素宽度自适应

4. 标准盒模型与怪异盒模型

4.1 标准和模型

• 给盒子设置的宽（width）、高（height），实际是指内容区（content）的宽高。
• 整个盒子的大小 = 设置的宽高
• box-sizing:content-box

4.2 怪异盒模型

• 怪异盒模型中，所有的宽度都是可见宽度
• 盒子的大小 = 设置的宽高 + padding + border
• box-sizing:boder-box

5. 浮动

• 浮动的元素会脱离文档流

5.1 清除浮动的方案

1. clear 属性
   • 清除上下关系
   • clear:left/right/both
2. BFC
   • 清除嵌套关系
3. 空标签
   • 空标签设置 clear:both
4. 伪类

.clearfix::before, 
.clearfix::after { 
    content: ''; 
    display: table; /* 解决外边距重叠问题 */ 
    clear: both; /* 解决高度塌陷问题 */ 
    }

5.2 浮动的特点

• 只会影响后面的元素
• 文本不会被浮动元素覆盖，可以利用这个特性实现文字环绕的效果
• 具备内联元素的特性：宽度由内容决定
• 具备块级元素的特性：支持所有样式
• 浮动元素放不下时，会自动换行

6. 定位

• position : absolute/relative/static/fixed/sticky
• 默认是 position : static

6.1 相对定位

• 开启相对定位： position: relative;
• 开启相对定位后，如果不设置偏移量，则元素不会有变化
• 相对定位是参照自身在文档流的位置进行定位
• 相对定位会提高元素层级，但不会脱离文档流

6.2 绝对定位

• 开启绝对定位：position: absolute;
• 开启绝对定位后，如果不设置偏移量，则元素不会有变化
• 绝对定位会使元素脱离文档流
• 绝对定位的行内元素会变为块级元素，此时行内的宽高会被内容撑开
• 绝对定位会提升元素层级
• 绝对定位是参照其包含块进行定位

包含块：

• 正常情况下，包含块就是离当前元素最近的祖先块元素
• 开启绝对定位后，包含块就是离当前绝对定位元素最近的开启了定位的祖先元素；如果所有祖先元素都没有开启定位，则相对于根元素（html）

6.3 固定定位

• 开启固定定位：position: fixed;
• 固定定位是一种特殊的绝对定位
• 固定定位的特点和绝对定位基本相同，但是固定定位是参照浏览器视口进行定位，不会被祖先元素影响
• 固定定位的元素不会随滚动条滚动

6.4 粘滞定位

• 开启粘滞定位：position: sticky;
• 粘滞定位指当元素到达某个位置时就固定不动
• 粘滞定位存在兼容性问题，不推荐使用

6.5 元素层级

• 开启定位的元素，可以通过 z-index 设置元素层级，数字越大级别越高，层级越高越优先显示
• 当层级相同时，则优先显示靠下的元素
• 祖先元素的层级不会覆盖后代元素