【前端布局规范与方案】三种传统布局方式

三种传统布局方式

网页布局的本质实际上就是：用CSS来摆盒子，将盒子摆到相应的位置。

CSS 提供了三种传统的布局方式，即盒子如何进行排列：

1. 标准流/文档流
2. 浮动
3. 定位

而在实际开发中，往往一个页面中这三种方式都会使用到。

1.标准流/文档流

标准流：即标签按照规定好的默认方式排列，是最基本的网页布局方式。

1. 块级元素会独占一行，从上向下顺序排列。
2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

2.浮动

浮动可以让多个块级元素在一行内排列显示。

由此可以得到两个网页布局的准则：

1. 多个块级元素纵向排列 — 标准流

   多个块级元素横向排列 — 浮动

2. 先设置盒子的大小，再设置盒子的位置。

浮动的语法如下：

选择器 {
	float: none | left | right
}

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。其具体值如下：

• none(默认) — 元素不浮动
• left — 向左浮动
• right — 向右浮动

2.1 浮动元素的特性

添加浮动后的元素，会具有很多特性：

1. 浮动元素会脱离标准流，即元素不再占据其原先在标准流中的位置。
2. 浮动元素会在一行内显示，并且将元素的顶部对齐(若父级元素的宽度装不下这些浮动元素，则会换行对齐)。
3. 浮动元素会具有行内块元素的特性，即对于块级盒子而言，若其没有设置宽度，则其宽度默认和父级元素一样，而添加浮动后，元素的大小根据其内容来决定！

2.2 浮动的常用设计模式

浮动元素和处于标准流父级搭配使用。

即，先用处于标准流的父级元素确定上下位置，然后内部子元素采取浮动确定其左右位置。

2.3 注意点

浮动元素只会影响其后面的标准流，而不会影响其前面的标准流。

2.4 清除浮动

为什么要清除浮动？

由于父盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后导致父盒子高度为 0，即父元素高度塌陷，就会影响下面的标准流盒子。

清除浮动的语法如下：

选择器 {
	clear:属性值;
}

其属性值如下：

1. left — 不允许左侧有浮动元素
2. right — 不允许右侧有浮动元素
3. both — 同时清除左右两侧浮动的影响

在实际开发中，基本上只会使用 clear：both。

而实际上，BFC也可以解决父元素高度塌陷的问题。

3.定位

前面说过，浮动可以让多个块级的盒子在同一行中没有缝隙地排列显示，因此常用于横向排列盒子。

而定位则可以让盒子自由的在某个盒子内移动，或者固定在屏幕中的某一位置，并且可以压住其它盒子。

3.1 定位的组成

定位 = 定位模式 + 边偏移

• 定位模式 — 用于指定一个元素在文档中的定位方式
• 边偏移 — 决定该元素的最终位置

3.2 定位模式

定位模式通过 CSS 的 position 属性来进行设置：

1. static — 静态定位
2. relative — 相对定位
3. absolute — 绝对定位
4. fixed — 固定定位

3.3 边偏移

• top — 顶端偏移量，定义元素相对于其父元素上边线的距离
• bottom — 底端偏移量，定义元素相对于其父元素下边线的距离
• left — 左侧偏移量，定义元素相对于其父元素左边线的距离
• right — 右侧偏移量，定义元素相对于其父元素右边线的距离

3.4定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况。可以使用z-index来控制盒子得前后次序（Z轴）。

语法如下：

选择器 {
	z-index: 1;
}

其中：

• 数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上。
• 如果属性值相同，则按照书写顺序，后来居上。
• 数字后面不能加单位。
• 只有定位的盒子才有z-index属性。

3.5 定位特殊性

1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
2. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
3. 浮动元素只会压住下面标准流的盒子，但是不会压住下面标准流盒子里面得文字或图片；但是绝对定位和固定定位会压住下面标准流得所有内容。

补充内容：4种定位模式

1.static

2.relative

3.absolute

4.fixed