⽹页布局的三种⽅式-标准流、浮动和定位
⽹页布局的三种⽅式
⽹页布局的本质——⽤CSS 来摆放盒⼦。把盒⼦摆放到相应位置
CSS 提供了三种传统布局⽅式(简单说，就是盒⼦如何进⾏排列顺序)：
普通流（标准流）
浮动
定位
标准流
标准流定义
所谓的标准流:，就是标签按照规定好默认⽅式排列
1. 块级元素会独占⼀⾏，从上向下顺序排列。
常⽤元素：div、hr、p、h1~h6、ul、ol、dl、form、table
2. ⾏内元素会按照顺序，从左到右顺序排列，碰到⽗元素边缘则⾃动换⾏
常⽤元素：span、a、i、em 等
以上都是标准流布局，标准流是最基本的布局⽅式。
浮动
浮动定义
浮动最典型的应⽤：可以让多个块级元素⼀⾏内排列显⽰。
⽹页布局第⼀准则：多个块级元素纵向排列标准流，多个块级元素横向排列浮动。
float 属性⽤于创建浮动框，将其移动到⼀边，直到左边缘或右边缘触及包含块或另⼀个浮动框的边缘。
语法：
选择器{ float: 属性值; }
属性值：
值描述
left元素向左浮动。
right元素向右浮动。
none默认值。元素不浮动，并会显⽰在其在⽂本中出现的位置。
inherit规定应该从⽗元素继承 float 属性的值。
浮动特性
⼀、脱离标准普通流的控制（浮）移动到指定位置（动）, （俗称脱标），且浮动的盒⼦不再保留原先的位置
如同其名字的意义⼀样，浮动，即浮动到元素上⽅，可以这样来理解：标准流在最底层，浮动的元素在标准流的上⽅，即脱离了标准流的控制。同时它位于标准流的上层，所以标准流⾥不会再存在它的位置。但也会有特殊的情况，即⽂字和浮动元素位于同⼀个⽗元素⾥时，浮动元素不会盖住⽂字，⽽
是环绕⽂字，这是因为浮动设计的初衷就是类似word图⽚和⽂字的浮动效果，所以不会出现浮动元素盖住⽂字的情况出现。
⼆、如果多个盒⼦都设置了浮动，则它们会按照属性值⼀⾏内显⽰并且顶端对齐排列
例如三个在同⼀个⽗盒⼦下的⼦盒⼦，都设置左浮动
例如在同⼀个⽗盒⼦下的两个⼦盒⼦分别设置左浮动和右浮动
注意：浮动的元素是互相贴靠在⼀起的（不会有缝隙），如果⽗级宽度装不下这些浮动的盒⼦，多出的盒⼦会另起⼀⾏对齐
三、浮动元素会具有⾏内块元素特性
任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有⾏内块元素相似的特性。
1. 如果块级盒⼦没有设置宽度，默认宽度和⽗级⼀样宽，但是添加浮动后，它的⼤⼩根据内容来决定
2. 浮动的盒⼦中间是没有缝隙的，是紧挨着⼀起的
3. ⾏内元素同理
注意点
1. 为了约束浮动元素位置, 我们⽹页布局⼀般采取的策略是:
先⽤标准流的⽗元素排列上下位置, 之后内部⼦元素采取浮动排列左右位置. 符合⽹页布局第⼀准则
2. 浮动的盒⼦只会影响浮动盒⼦后⾯的标准流，不会影响前⾯的标准流.
清除浮动
由于⽗级盒⼦很多情况下，不⽅便给⾼度，但是⼦盒⼦浮动⼜不占有位置，最后⽗级盒⼦⾼度为0 时，就会影响下⾯的标准流盒⼦。
由于浮动元素不再占⽤原⽂档流的位置，所以它会对后⾯的元素排版产⽣影响。
语法：
选择器{clear：属性值;}
值描述
left在左侧不允许浮动元素。
right在右侧不允许浮动元素。
both在左右两侧均不允许浮动元素。
none默认值。允许浮动元素出现在两侧。
inherit规定应该从⽗元素继承 clear 属性的值。
⼀般情况下，⽤到的都是clear: both;
清除浮动的本质是清除浮动元素造成的影响
如果⽗盒⼦本⾝有⾼度，则不需要清除浮动
清除浮动之后，⽗级就会根据浮动的⼦盒⼦⾃动检测⾼度。⽗级有了⾼度，就不会影响下⾯的标准流了
清除浮动⼀般采⽤两种⽅法，给⽗盒⼦添加属性，可直接粘贴，代码如下：
1. :after伪元素法
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 专有*/
*zoom: 1;
}
优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表⽹站：百度、淘宝⽹、⽹易等
2. 双伪元素清除浮动
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
优点：代码更简洁
缺点：照顾低版本浏览器
代表⽹站：⼩⽶、腾讯等
定位
定位定义
定位：将盒⼦定在某⼀个位置，所以定位也是在摆放盒⼦，按照定位的⽅式移动盒⼦。
定位= 定位模式+ 边偏移。
定位模式⽤于指定⼀个元素在⽂档中的定位⽅式。边偏移则决定了该元素的最终位置。
⼀、定位模式
定位模式决定元素的定位⽅式，它通过CSS 的position 属性来设置，其值可以分为四个：
值描述
absolute⽣成绝对定位的元素，相对于 static 定位以外的第⼀个⽗元素进⾏定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进⾏规定。
fixed⽣成绝对定位的元素，相对于浏览器窗⼝进⾏定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进⾏规定。
relative⽣成相对定位的元素，相对于其正常位置进⾏定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit规定应该从⽗元素继承 position 属性的值。
⼆、边偏移
边偏移就是定位的盒⼦移动到最终位置。有top、bottom、left 和right 4 个属性
属性描述
设置定位框的底部外边距边缘。
设置定位框的左侧外边距边缘。
设置定位框的右侧外边距边缘。
设置定位框的顶部外边距边缘。
静态定位
静态定位是元素的默认定位⽅式，⽆定位的意思。
语法：
选择器{ position: static; }
静态定位按照标准流特性摆放位置，它没有边偏移
静态定位在布局时很少⽤到
相对定位relative
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。
语法：
选择器{ position: relative; }
相对定位的特点：
1. 它是相对于⾃⼰原来的位置来移动的（移动位置的时候参照点是⾃⼰原来的位置）。
2. 原来在标准流的位置继续占有，后⾯的盒⼦仍然以标准流的⽅式对待它。因此，相对定位并没有脱标。它最典型的应⽤是给拥有绝对
定位的⼦元素的⽗盒⼦设置属性的。
绝对定位absolute
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。
语法：
选择器{ position: absolute; }
绝对定位的特点：
1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document ⽂档）。
2. 如果祖先元素有定位（相对、绝对、固定定位），则以最近⼀级的有定位祖先元素为参考点移动位置。
3. 绝对定位不再占有原先的位置。（脱标），所以绝对定位是脱离标准流的。
⼦绝⽗相
⼦绝⽗相是定位中最常⽤的⼀种⽅式这句话的意思是：⼦级是绝对定位的话，⽗级要⽤相对定位。
1. ⼦级绝对定位，不会占有位置，可以放到⽗盒⼦⾥⾯的任何⼀个地⽅，不会影响其他的兄弟盒⼦。
2. ⽗盒⼦需要加定位限制⼦盒⼦在⽗盒⼦内显⽰。
3. ⽗盒⼦布局时，需要占有位置，因此⽗亲只能是相对定位。
这就是⼦绝⽗相的由来，所以相对定位经常⽤来作为绝对定位的⽗级。
总结：因为⽗级需要占有位置，因此是相对定位，⼦盒⼦不需要占有位置，则是绝对定位
当然，⼦绝⽗相不是永远不变的，如果⽗元素不需要占有位置，⼦绝⽗绝也会遇到。
固定定位fixed
固定定位是元素固定于浏览器可视区的位置。主要使⽤场景：可以在浏览器页⾯滚动时元素的位置不会改变。语法：
选择器{ position: fixed; }
固定定位的特点：（务必记住）
1. 以浏览器的可视窗⼝为参照点移动元素。
网页float是什么意思
跟⽗元素没有任何关系
不随滚动条滚动。
2. 固定定位不在占有原先的位置。
固定定位也是脱标的，其实固定定位也可以看做是⼀种特殊的绝对定位。
定位叠放次序z-index
在使⽤定位布局时，可能会出现盒⼦重叠的情况。此时，可以使⽤z-index 来控制盒⼦的前后次序(z轴)
语法：
选择器{ z-index: 1; }
1. 数值可以是正整数、负整数或0, 默认是auto，数值越⼤，盒⼦越靠上
2. 如果属性值相同，则按照书写顺序，后来居上
3. 数字后⾯不能加单位
4. 只有定位的盒⼦才有z-index 属性
拓展
⼀、绝对定位的盒⼦居中
加了绝对定位的盒⼦不能通过margin:0 auto ⽔平居中，但是可以通过以下计算⽅法实现⽔平和垂直居中。left: 50%;/*让盒⼦的左侧移动到⽗级元素的⽔平中⼼位置。*/
margin-left: -100px/*让盒⼦向左移动⾃⾝宽度的⼀半。*/
⼆、定位特殊特性
绝对定位和固定定位也和浮动类似。
1. ⾏内元素添加绝对或者固定定位，可以直接设置⾼度和宽度。
2. 块级元素添加绝对或者固定定位，如果不给宽度或者⾼度，默认⼤⼩是内容的⼤⼩。
三、脱标的盒⼦不会触发外边距塌陷
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。
总结
通过盒⼦模型，清楚知道⼤部分html标签是⼀个盒⼦。
1. 标准流
可以让盒⼦上下排列或者左右排列，垂直的块级盒⼦显⽰就⽤标准流布局。
2. 浮动
可以让多个块级元素⼀⾏显⽰或者左右对齐盒⼦，多个块级盒⼦⽔平显⽰就⽤浮动布局。
3. 定位
定位最⼤的特点是有层叠的概念，就是可以让多个盒⼦前后叠压来显⽰。如果元素⾃由在某个盒⼦内移动就⽤定位布局。
⼀个完整的⽹页，是标准流、浮动、定位⼀起完成布局的，每个都有⾃⼰的专门⽤法。
通过CSS浮动、定位可以让每个盒⼦排列成为⽹页。
元素的显⽰和隐藏
display
display 属性⽤于设置⼀个元素应如何显⽰。
语法：
display: block;/*block为属性值*/
值描述
none此元素不会被显⽰。
block此元素将显⽰为块级元素，此元素前后会带有换⾏符。
inline默认。此元素会被显⽰为内联元素，元素前后没有换⾏符。
inline-block⾏内块元素。（CSS2.1 新增的值）
list-item此元素会作为列表显⽰。
run-in此元素会根据上下⽂作为块级元素或内联元素显⽰。
compact CSS 中有值 compact，不过由于缺乏⼴泛⽀持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏⼴泛⽀持，已经从 CSS2.1 中删除。
table此元素会作为块级表格来显⽰（类似<table>），表格前后带有换⾏符。
inline-table此元素会作为内联表格来显⽰（类似<table>），表格前后没有换⾏符。
table-row-group此元素会作为⼀个或多个⾏的分组来显⽰（类似<tbody>）。
table-header-group此元素会作为⼀个或多个⾏的分组来显⽰（类似<thead>）。
table-footer-group此元素会作为⼀个或多个⾏的分组来显⽰（类似<tfoot>）。
table-row此元素会作为⼀个表格⾏显⽰（类似<tr>）。
table-column-group此元素会作为⼀个或多个列的分组来显⽰（类似<colgroup>）。
table-column此元素会作为⼀个单元格列显⽰（类似<col>）
table-cell此元素会作为⼀个表格单元格显⽰（类似<td>和<th>）
table-caption此元素会作为⼀个表格标题显⽰（类似<caption>）
inherit规定应该从⽗元素继承 display 属性的值。
⽇常中常⽤的其实只有none，block，inline，inline-block。
display 隐藏元素后，不再占有原来的位置。
visibility
visibility 属性⽤于指定⼀个元素应可见还是隐藏。
语法：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。