传统网页布局的三种方式
网页布局的本质——用CSS来摆放盒子。把盒子摆放到相应位置。
CSS提供了三种传统布局方式 ( 简单说，就是盒子如何进行排列顺序 )：
- 标准流
- 浮动
- 定位
这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。
注意：实际开发中，一个页面基本都包含了这三种布局方式，后面移动端学习新的布局方式。
标准流 (普通流/文档流)
所谓的标准流，就是标签按照规定好的默认方式排列。
- 块级元素会独占一行，按照从上向下的顺序排列。
- 常用元素：
div、p、h1~h6、ul、ol、dl、form、table、hr
- 行内元素会按照顺序，从左到右排列，碰到父元素边缘则自动换行。
- 常用元素：
span、a、i、em等
以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式。
浮动
什么情况需要浮动
-
浮动可以改变元素标签默认的排列方式。
-
有很多的布局效果，标准流不方便完成，此时就可以利用浮动完成布局，例如：
- 让多个块级盒子 (div) 水平排列成一行
- 虽然转换为行内块元素可以实现一行显示，但是他们之间会有大的空白缝隙，很难控制
- 实现两个子盒子的分别在父盒子里左右对齐
- 让多个块级盒子 (div) 水平排列成一行
-
浮动最典型的应用：可以让多个块级元素一行内排列显示。
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
网页布局第二准则：先设置盒子大小，之后设置盒子的位置。
浮动语法
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘，或者触及另一个浮动框的边缘。
语法∶
选择器 {
float: 属性值;
}
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动（默认值) |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
浮动特性
加了浮动之后的元素，会具有很多特性，需要我们掌握的有：
-
浮动元素会脱离标准流的控制 (
脱标)- 浮动的盒子会移动到指定位置
- 浮动的盒子不再保留原先的位置
- 浮动元素飘浮在标准流的上面，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字或图片；浮动产生的最初目的是为了做文字环绕效果的，下面标准流盒子里面的文字会围绕浮动元素
-
浮动的元素会一行内显示并且元素顶部对齐
- 如果多个盒子都设置了浮动，则它们会按照属性值在一行内显示并且顶端对齐排列
- 浮动的元素是互相贴靠在一起的 (不会有缝隙)
- 如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
-
浮动的元素会具有行内块元素的特性
- 任何元素都可以浮动
- 不管原先是什么模式，添加浮动之后具有行内块元素相似的特性。
- 如果行内元素有了浮动，则不需要转换为块级/行内块元素就可以直接给高度和宽度
浮动子盒子和标准流父级搭配使用
为了约束浮动元素位置，我们网页布局一般采取的策略是：
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。
注意：
一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
清除浮动
什么情况需要清除浮动
如果父盒子本身没有高度且子盒子浮动，则需要清除子盒子浮动造成的影响。
如果父盒子本身有高度，则不需要清除浮动。
-
清除浮动的本质是清除浮动元素造成的影响
父级盒子很多情况下，不方便给一个确切的高度，如果子盒子需要浮动，浮动元素不再占用原文档流的位置，导致父级盒子高度为0，就会影响下面的标准流盒子，对后面的元素排版产生影响。
-
清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度就不会影响下面的标准流了
语法
选择器 {
clear: 属性值;
}
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响) |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响) |
| both | 同时清除左右两侧浮动的影响 |
我们实际工作中，几乎只用 clear: both;
清除浮动的策略是：闭合浮动。
清除浮动的方式
| 清除浮动的方式 | 优点 | 缺点 |
|---|---|---|
| 额外标签法（隔墙法) | 通俗易懂，书写方便 | 添加许多无意义的标签，结构化较差。 |
| 父级overflow:hidden; | 书写简单 | 溢出隐藏 |
| 父级after伪元素 | 结构语义化正确 | 由于IE6-7不支持:after，兼容性问题 |
| 父级双伪元素 | 结构语义化正确 | 由于IE6-7不支持:after，兼容性问题 |
额外标签法 (隔墙法)
额外标签法也称为隔墙法，是W3C推荐的做法。
额外标签法会在浮动元素末尾添加一个空的标签。
例如 <div style="clear: both”></div> ，或者其他标签(如 <br/>等)。
- 优点：通俗易懂，书写方便
- 缺点：添加许多无意义的标签，结构化较差
- 注意：要求这个新的空标签必须是块级元素。
父级添加 overflow 属性
可以给父级添加 overflow 属性，将其属性值设置为hidden、auto或scroll。
.box {
/* 清除浮动 */
overflow: hidden;
width: 800px;
border: 1px solid blue;
margin: 0 auto;
}
- 优点：代码简洁
- 缺点：无法显示溢出的部分
父级添加 after 伪元素
:after 方式是额外标签法的升级版。也是给父元素添加：
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7专有 */
*zoom: 1;
}
父级添加双伪元素
也是给父元素添加：
.clearfix::before,
.clearfix::after {
content : "";
/* 转换为块级元素 并一行显示 */
display:table;
}
.clearfix::after {
clear:both;
}
.clearfix {
/* IE6、7专有 */
*zoom: l;
}
-
优点：代码更简洁
-
缺点：照顾低版本浏览器
-
代表网站：小米、腾讯等
定位
为什么需要定位
提问：以下情况使用标准流或者浮动能实现吗?
- 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。
- 当我们滚动窗口的时候，盒子固定在屏幕某个位置。
以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。
所以︰
- 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
- 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
定位的组成
定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位 = 定位模式 ＋ 边偏移
定位模式
定位模式决定元素的定位方式，它通过CSS的 position 属性来设置，其值可以分为四个:
| 值 | 语义 |
|---|---|
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
边偏移
边偏移就是定位的盒子移动到最终位置。有top、bottom、left和right4个属性：
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
| top | top: 80px | 顶端偏移量，定义元素相对于其父元素上边线的距离。 |
| bottom | bottom: 80px | 底部偏移量，定义元素相对于其父元素下边线的距离。 |
| left | left: 80px | 左侧偏移量，定义元素相对于其父元素左边线的距离。 |
| right | right: 80px | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
如果一个盒子既有left属性也有right属性，则默认会执行left属性；同理，如果一个盒子既有top属性也有bottom属性，会执行top。
定位的特性
绝对定位和固定定位也和浮动类似。
-
行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
-
块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
-
脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位 (固定定位) 的元素都不会触发外边距合并的问题。
-
绝对定位（固定定位）会压住下面标准流所有的内容。
定位的种类
| 定位模式 | 是否脱标 | 移动位置 | 是否常用 |
|---|---|---|---|
static静态定位 | 否 | 不能使用边偏移 | 很少 |
relative相对定位 | 否(占有位置) | 相对于自身位置偏移 | 常用 |
absolute绝对定位 | 是(不占有位置) | 带有定位的父级 | 常用 |
fixed固定定位 | 是(不占有位置) | 浏览器可视区 | 常用 |
sticky粘性定位 | 否(占有位置) | 浏览器可视区 | 当前阶段少 |
静态定位（了解）
静态定位是元素的默认定位方式，无定位的意思。
语法︰
选择器 { position: static; }
-
静态定位按照标准流特性摆放位置，它没有边偏移
-
静态定位在布局时很少用到
相对定位（重要）
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。
语法∶
选择器 { position: relative; }
相对定位的特点：
- 移动位置的时候参照点是自己原来的位置。
- 不脱标，继续占有原来在标准流中的位置，后面的盒子仍然以标准流的方式对待它。
因此，相对定位并没有脱标。它最典型的应用是给绝对定位当父级的。
绝对定位（重要）
元素在移动位置的时候，是相对于它祖先元素来说的。
语法︰
选择器 { position : absolute; }
绝对定位的特点：
- 如果没有祖先元素或者祖先元素没有定位，则以浏览器 (Document文档) 为准定位。
- 如果祖先元素有定位 (相对、绝对、固定定位)，则以最近一级的有定位祖先元素为参考点移动位置。
- 绝对定位不再占有原先的位置。(脱标)
子绝父相
这句话的意思是∶子级是绝对定位的话，父级要用相对定位。
- 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
- 父盒子需要加定位，限制子盒子在父盒子内显示。
- 父盒子布局时，需要占有位置，因此父盒子只能是相对定位。
这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。
总结︰因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。
绝对定位的盒子居中
加了绝对定位或固定定位的盒子不能通过 margin:auto 水平居中（相对定位可以），
但是可以通过以下计算方法实现水平居中:
left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。
margin-left:-100px;：让盒子向左移动自身宽度的一半。
实现垂直居中:
top: 50%;：让盒子的上侧移动到父级元素的垂直中心位置。
margin-top:-200px;：让盒子向上移动自身高度的一半。
固定定位（重要）
固定定位是元素固定于浏览器可视区的位置。
主要使用场景︰在浏览器页面滚动时，元素的位置不会改变。
语法︰
选择器 { position: fixed; }
固定定位的特点：
-
以浏览器的可视窗口为参照点移动元素。跟父元素没有任何关系
不随滚动条滚动。
-
固定定位不再占有原先的位置。
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。
固定在版心右侧位置
-
让固定定位的盒子
left:50%，走到浏览器可视区（也可以看做版心）的一半位置。 -
让固定定位的盒子
margin-left: 版心宽度的一半距离，多走版心宽度的一半位置。
就可以让固定定位的盒子贴着版心右侧对齐了。
粘性定位
粘性定位可以被认为是相对定位和固定定位的混合。
语法︰
选择器 { position: sticky; top: 10px; }。
粘性定位的特点∶
- 以浏览器的可视窗口为参照点移动元素（固定定位特点)
- 粘性定位占有原先的位置（相对定位特点)
- 必须添加
top、left、right、bottom其中一个才有效
跟页面滚动搭配使用。兼容性较差，IE不支持
定位的叠放次序
在使用定位布局时，可能会出现盒子重叠的情况。
此时，可以使用z-index来控制盒子的前后次序(z轴)
语法∶
选择器 { z-index: 1; }
-
数值可以是正整数、负整数或
0，默认是auto，数值越大，盒子越靠上 -
如果属性值相同，则按照元素书写顺序，后来居上
-
数字后面不能加单位
-
只有定位的盒子才有
z-index属性
网页布局总结
通过盒子模型，清楚知道大部分html标签是一个盒子。
通过CSS浮动、定位可以让每个盒子排列成为网页。
一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法：
-
标准流
可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。
-
浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。
-
定位
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。
如果元素自由在某个盒子内移动就用定位布局。
1226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
