⽹页布局的三种⽅式-标准流、浮动和定位
⽹页布局的三种⽅式
⽹页布局的本质——⽤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小时内删除。
发表评论