11. 传统布局与定位体系

11.1 传统网页布局的三种方式

11.1.1 普通流（标准流）

• 所谓的标准流: 就是标签按照规定好默认方式排列
• 块级元素会独占一行，从上向下顺序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
• 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素：span、a、i、em 等

11.1.2 浮动

• float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
• 浮动可以改变元素标签默认的排列方式
• 浮动最典型的应用：可以让多个块级元素一行内排列显示
• 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
• 在使用行内块转换时盒子之间是有空隙的

.left {
  float: left;
}
.right {
  float: right;
}

浮动重点：

• 浮动元素会脱离标准流(脱标：浮动的盒子不再保留原先的位置)
• 浮动的元素会一行内显示并且元素顶部对齐
• 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
• 浮动的元素会具有行内块元素的特性：①浮动元素的大小根据内容来决定；②浮动的盒子之间没有缝隙(行内元素有了浮动，则不需要转换块级\行内块元素就可以直接给高度和宽度)
• 行内块元素如果没有设置宽度，则盒子大小受内容影响，内容多则就宽

设计策略：先用标准流父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准侧

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流

.left {
  float: left;
}
.right {
  float: right;
}

11.1.3 定位

11.1.3.1 使用场景

①某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子

②当我们滚动窗口的时候，盒子是固定屏幕某个位置的

11.1.3.2 定位组成

定位 = 定位模式 + 边偏移

1. 定位模式： 用于指定一个元素在文档中的定位方式通过 position属性定义元素的 定位模式

.box {
  position: relative;  /* 定位模式 */
  top: 10px;           /* 边偏移：上 */
  left: 20px;          /* 边偏移：左 */
}

（1）静态定位：

• 静态定位是元素的 默认定位方式 ， 无定位的意思 。它相当于 border 里面的none，静态定位static，不要定位的时候用
• 语法：

.box {
  position: relative;  /* 定位模式 */
  top: 10px;           /* 边偏移：上 */
  left: 20px;          /* 边偏移：左 */
}

• 静态定位 按照标准流特性摆放位置，它没有边偏移,可以理解为静态定位就是标准流
• 静态定位在布局时我们几乎不用的

（2）相对定位

• 相对定位是元素在移动位置的时候，是相对于它自己 原来的位置 来说的（自恋型）
• 语法：

.box {
  position: relative;  /* 定位模式 */
  top: 10px;           /* 边偏移：上 */
  left: 20px;          /* 边偏移：左 */
}

• 相对定位的特点：
    ①它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
    ② 原来 在标准流的 位置 继续占有，后面的盒子仍然以标准流的方式对待它，原来的位置和现在的位置都不影响后面盒子的位置
    ③因此， 相对定位并没有脱标 。它最典型的应用是给绝对定位当爹的,相对定位是用来限制绝对定位的

（3）绝对定位

• 绝对定位 是元素在移动位置的时候，是相对于它 祖先元素 来说的（拼爹型）
• 语法：

.box {
  position: relative;  /* 定位模式 */
  top: 10px;           /* 边偏移：上 */
  left: 20px;          /* 边偏移：左 */
}

• 绝对定位的特点：
    ①如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
    ②如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
    ③绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的。可以理解为绝对定位比浮动飘的更高（脱标）
    (4)固定定位
• 固定定位 是元素 固定于浏览器可视区的位置 。（认死理型）
• 主要使用场景：可以在浏览器页面滚动时元素的位置不会改变
• 语法:

.box {
  position: relative;  /* 定位模式 */
  top: 10px;           /* 边偏移：上 */
  left: 20px;          /* 边偏移：左 */
}

• 特点:
    ①.以浏览器的可视窗口为参照点移动元素,跟父元素没有任何关系,不随滚动条滚动
    ②固定定位不再占有原先的位置,完全脱标
• 固定在版心位置的方法:
    ①让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心） 的一半位置
    ②让固定定位的盒子 margin-left: 版心宽度的一半距离。 多走版心宽度的一半位置
    实例：

.box {
  position: relative;  /* 定位模式 */
  top: 10px;           /* 边偏移：上 */
  left: 20px;          /* 边偏移：左 */
}

(5)粘性定位

• 粘性定位可以被认为是相对定位和固定定位的混合
• 语法：

.box {
  position: relative;  /* 定位模式 */
  top: 10px;           /* 边偏移：上 */
  left: 20px;          /* 边偏移：左 */
}

• 粘性定位的特点：
    ①以浏览器的可视窗口为参照点移动元素（固定定位特点）
    ②粘性定位占有原先的位置（相对定位特点）
    ③必须添加 top 、left、right、bottom 其中一个 才有效
    ④跟页面滚动搭配使用。 兼容性较差，IE 不支持

.box {
  position: relative;  /* 定位模式 */
  top: 10px;           /* 边偏移：上 */
  left: 20px;          /* 边偏移：左 */
}

(6)总结

2. 边偏移 则决定了该元素的最终位置

• 注意：
    ① 边偏移 需要和 定位模式 联合使用， 单独使用无效 ；
    ②top和bottom不要同时使用
    ③left和right不要同时使用

11.1.3.3 定位口诀-子绝父相

子级是绝对定位的话，父级要用相对定位

• 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
• 父盒子需要加定位限制子盒子在父盒子内显示
• 父盒子布局时，需要占有位置，因此父亲只能是相对定位
• 子绝父相不是永远不变的，如果父元素不需要占有位置， 子绝父绝 也会遇到

11.1.3.4 堆叠顺序(z-index)

• 在使用 定位 布局时，可能会 出现盒子重叠的情况 。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)
• 语法：

.box {
  position: relative;  /* 定位模式 */
  top: 10px;           /* 边偏移：上 */
  left: 20px;          /* 边偏移：左 */
}

• z-index的特性
    ① 属性值 ： 正整数 、 负整数 或 0 ，默认值是 0，数值越大，盒子越靠上；
    ②如果 属性值相同 ，则按照书写顺序， 后来居上 ；
    ③数字后面 不能加单位
    ④z-index 只能应用于相对定位,绝对定位和固定定位的元素,其他标准流,浮动和静态定位无效(只有定位的盒子才有z-index属性)

11.1.3.5 绝对定位盒子居中

加了绝对定位/固定定位的盒子不能通过设置margin:auto;设置水平居中

方法:

• left: 50%; 让 盒子的左侧 移动到 父级元素的水平中心位置
• margin-left: -100px; 让盒子 向左 移动 自身宽度的一半

11.1.3.6 定位特殊特性

1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度
2. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小

也就是说绝对定位和固定定位和浮动类似

3. display 是显示模式， 可以改变显示模式有以下方式:

• 可以用inline-block 转换为行内块
• 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
• 绝对定位和固定定位也和浮动类似， 默认转换为行内块

一个行内的盒子,如果加了浮动,固定定位和绝对定位,不用转换,就可以给这个盒子直接设置宽度和高度等

11.1.3.7 绝对定位(固定定位)会完全压住盒子

1. 浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字
2. 绝对定位（固定定位）会压住下面标准流所有的内容
3. 浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。 文字会围绕浮动元素
4. 以前浮动就是为了文字环绕效果，现在已经经常用于布局了

.left {
  float: left;
}
.right {
  float: right;
}

11.1.3.8 轮播图

1. 制作顺序:

• 大盒子我们类名为： tb-promo 淘宝广告
• 里面先放一张图片
• 左右两个按钮 用链接就好了。 左箭头 prev 右箭头 next
    ①左按钮样式（border-radius：左上，右上，右下，左下）
    ②右按钮定位，提取左右按钮共同的样式代码（并集选择器）
• 底侧小圆点ul 继续做。 类名为 promo-nav
    ①中间长方形椭圆 ul的定位（水平居中，离底部15px）
    ②长方形需要五个小圆点，ul无序列表，li浮动，椭圆中小圆点的样式

2. 代码模块

/* 绝对定位：相对于最近的有定位的祖先元素移动 */
.son {
  position: absolute;
  top: 0;
  left: 0;
}
/* 父元素需要加 relative（子绝父相） */
.father {
  position: relative;
}

总结收获:主要学习的地方是相同属性使用并集选择器

11.1.4 定位数值的移动

✨ 黄金口诀：

"TOP正下负上，LEFT正右负左"

"RIGHT正左负右，BOTTOM正上负下

可以理解为正数就是相反方向移动，负值相同方向移动

✨ 简单记：

margin的四个方向，正值都是增加该方向的外边距（即向外推开），负值都是减少外边距（即向内拉近）