PC端传统网页布局得三种方式

PC端传统网页布局的三种方式

网页布局的本质-用CSS来摆放盒子。把盒子摆放到相应位置。

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

1. 普通流（标准流/文档流）；
2. 浮动；
3. 定位。

实际开发中，一个页面基本都包含了这三种布局方式。

1. 标准流（普通流/文档流）

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

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

2. 浮动

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

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

网页布局第二准则：先设置盒子大小，再设置盒子位置。

语法：

选择器 {
	float: 属性值;
}

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

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

2.1 浮动特性

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

1. 浮动元素会脱离标准流（脱标，浮动的盒子不再保留原先的位置）；
2. 浮动的元素会一行内显示并且元素顶部对齐（若父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐）；
3. 浮动的元素会具有行内块元素的特性（若块级盒子没有设置宽度，默认宽度和父级一样，添加浮动后，它的大小根据内容来决定）。

2.2 浮动元素经常和标准流父级搭配使用

先用标准流的父元素排列上下位置，内部子元素采取浮动排列左右位置，符合网页布局第一准则。

2.3 浮动布局注意点

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

2.4 清除浮动

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

语法：

选择器 {
	clear:属性值;
}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

实际开发中，几乎只用clear:both;

清除浮动的策略是：闭合浮动。

3. 定位

1. 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
2. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

3.1 定位组成

定位 = 定位模式 + 边偏移。

定位模式用于指定一个元素在文档中的定位方式。

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

3.2 定位模式

通过CSS的position属性来设置，属性值：

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

3.3 边偏移

有top、bottom、left、right四个属性。

边偏移属性	示例	描述
top	top: 80px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom: 80px	底端偏移量，定义元素相对于其父元素下边线的距离
left	left: 80px	左侧偏移量，定义元素相对于其父元素左边线的距离
right	right: 80px	右侧偏移量，定义元素相对于其父元素右边线的距离

3.4 定位叠放次序 z-index

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

语法：

选择器 {
	z-index: 1;
}

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

3.5 定位特殊性

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