通流(normal flow)
这个单词很多人翻译为 文档流 , 字面翻译 普通流 或者标准流都可以。
前面我们说过,网页布局的核心,就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置?
CSS的定位机制有3种:普通流(标准流)、浮动和定位。
html语言当中另外一个相当重要的概念----------标准流!或者普通流。普通流实际上就是一个网页内标签元素正常从上到下,从左到右排列顺序的意思,比如块级元素会独占一行,行内元素会按顺序依次前后排列;按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。
浮动(float)
浮动最早是用来控制图片,以便达到其他元素(特别是文字)实现“环绕”图片的效果。
后来,我们发现浮动有个很有意思的事情:就是让任何盒子可以一行排列,因此我们就慢慢的偏离主题,用浮动的特性来布局了。(CSS3已经我们真正意义上的网页布局)
什么是浮动?
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程。
在CSS中,通过float属性来定义浮动,其基本语法格式如下:
选择器{float:属性值;}
浮动详细内幕特性
浮动脱离标准流,不占位置,会影响标准流。浮动只有左右浮动。
浮动首先创建包含块的概念(包裹)。就是说, 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。
浮动的元素排列位置,跟上一个元素(块级)有关系。如果上一个元素有浮动,则A元素顶部会和上一个元素的顶部对齐;如果上一个元素是标准流,则A元素的顶部会和上一个元素的底部对齐。
由2可以推断出,一个父盒子里面的子盒子,如果其中一个子级有浮动的,则其他子级都需要浮动。这样才能一行对齐显示。 元素添加浮动后,元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。
总结: 浮动 --->
浮动的目的就是为了让多个块级元素同一行上显示。
float 浮 漏 特
浮: 加了浮动的元素盒子是浮起来的,漂浮在其他的标准流盒子上面。
漏: 加了浮动的盒子,不占位置的,它浮起来了,它原来的位置漏 给了标准流的盒子。
特: 特别注意,首先浮动的盒子需要和标准流的父级搭配使用, 其次 特别的注意浮动可以使元素显示模式体现为行内块特性。
阅读报纸时容易发现,虽然报纸中的内容很多,但是经过合理地排版,版面依然清晰、易读。同样,在制作网页时,要想使页面结构清晰、有条理,也需要对网页进行“排版”。
“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示,常见的宽度值为960px、980px、1000px、1200px等。
布局流程
为了提高网页制作的效率,布局时通常需要遵守一定的布局流程,具体如下:
1、确定页面的版心(可视区)。
2、分析页面中的行模块,以及每个行模块中的列模块。
3、制作HTML结构 。
4、CSS初始化,然后开始运用盒子模型的原理,通过DIV+CSS布局来控制网页的各个模块。
一列固定宽度且居中
人生就像乘坐北京地铁一号线:
途经国贸,羡慕繁华;
途经天安门,幻想权力;
途经金融街,梦想发财;
经过公主坟,遥想华丽家族;
经过玉泉路,依然雄心勃勃…
这时,有个声音飘然入耳:乘客你好,八宝山马上就要到了!
顿时醒悟:人生苦短,有始有终。
好比我们的浮动,有浮动开始,则就应该有浮动结束。
为什么要清除浮动
我们前面说过,浮动本质是用来做一些文字混排效果的,但是被我们拿来做布局用,则会有很多的问题出现, 但是,你不能说浮动不好
。
由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响,为了解决这些问题,此时就需要在该元素中清除浮动。
准确地说,并不是清除浮动,而是清除浮动后造成的影响
如果浮动一开始就是一个美丽的错误,那么请用正确的方法挽救它。
清除浮动本质
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
清除浮动的方法
其实本质叫做闭合浮动更好一些, 记住,清除浮动就是把浮动的盒子圈到里面,让父盒子闭合出口和入口不让他们出来影响其他元素。
在CSS中,clear属性用于清除浮动,其基本语法格式如下:
选择器{clear:属性值;}
额外标签法
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>,或则其他标签br等亦可。
优点: 通俗易懂,书写方便
缺点: 添加许多无意义的标签,结构化较差。 我只能说,w3c你推荐的方法我不接受,你不值得拥有。。。
父级添加overflow属性方法
可以通过触发BFC的方式,可以实现清除浮动效果。(BFC后面讲解)
可以给父级添加: overflow为 hidden|auto|scroll 都可以实现。
优点: 代码简洁
缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。
使用after伪元素清除浮动
:after 方式为空元素的升级版,好处是不用单独加标签了
使用方法:
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {*zoom: 1;} /* IE6、7 专有 */
优点: 符合闭合浮动思想 结构语义化正确
缺点: 由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
代表网站: 百度、淘宝网、网易等
注意: content:"." 里面尽量跟一个小点,或者其他,尽量不要为空,否则再firefox 7.0前的版本会有生成空格。
使用before和after双伪元素清除浮动
使用方法:
.clearfix:before,.clearfix:after { content:""; display:table; /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */ } .clearfix:after { clear:both; } .clearfix { *zoom:1; }
优点: 代码更简洁
缺点: 由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
代表网站: 小米、腾讯等
Web前端开发-CSS入门干货01 、Web前端开发-CSS入门干货02 、Web前端开发-CSS布局-盒子模型入门干货 介绍了CSS重要基础概念选择器和字体系列、文本系列、背景系列样式以及CSS布局中元素的盒子模型,下面介绍CSS布局中另外两个重要应用浮动和定位。
根据元素浮动、定位的特性可以将CSS布局分为三种:标准流、浮动流、定位流;
其中标准流是利用块级元素独占一行、自上而下,行内元素一行显示、遇到阻碍自动换行、自左向右的布局方式。
(1)什么是浮动
元素脱离原先位置,不再占据空间,相对于未浮动元素类似漂浮在其上面;
浮动元素具有了行内块元素特性,并实现贴边布局。这里的边可以是父级元素的边也可以是同样浮动的兄弟级元素的边。
(2)浮动解决的问题
改变块级元素默认的垂直布局方式,改为横向布局。
行内块样式(display: inline-block;)也可以改变块级元素的布局方式,但是不能灵活解决两个块级元素之间缝隙、不能灵活解决多个块级元素分别实现左对齐、右对齐等问题。当然如果想要块级元素随意放置,那就要用到定位了。
(3)浮动的语法
选择器 {float:none/left/right},对选择器选择的元素实现不浮动、左浮动、右浮动。
(4)浮动的典型应用
通过不浮动的块级元素+嵌套在其内内的浮动元素,实现页面各种布局。
块级元素实现纵向布局,浮动的元素实现横向布局。
(5)因为浮动引出的问题
浮动元素通常嵌套在一个不浮动的元素内,进行配合使用;所有浮动元素的高以及外边距之和不能超过那个不浮动元素,否则出现重叠。
那么当嵌套的浮动的子元素数量不确定时,那么父级元素的高度就不能确定。为了解决这个问题,提出来不设置父级元素的高度,让子元素的高度之和成为父元素高度的方式;然而浮动的子元素具有脱离原先位置、不占空间的特点,那么父元素的高度只会是0,在父元素之后的兄弟元素就会与上一个父元素内浮动元素发生重叠。为了解决这个问题,提出来清除浮动。
(6)清除浮动
1)语法
选择器 {clear:right/left/both};清除选择器选中的元素的右浮动、左浮动、左右浮动。
2)清除浮动方式
a)额外标签法
添加一个与浮动元素同级的空标签(块级),并为其设置清除浮动的样式。
<style>
.one {float:left}
.kongbq {clear:both}
</style>
<div class="box">
<div class="one"> </div>
<div class="kongbq"> </div>
</div>
b)父级元素添加overflow样式(常用)
语法:选择器 {overflow:hidden}
c)父级元素添加after伪元素样式(常用)
样式如下:
.clearfixry:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfixry { /*IE6、7专有*/
*zoom:1;
}
d)父级元素添加双伪元素(常用)
样式如下:
.clearfixry:before,.clearfixry:after {
content:"";
display:table;
}
.clearfixry:after {
clear:both;
}
.clearfixry { /*IE6、7专有*/
*zoom:1;
}
(1)什么是定位
将html元素放置在任意指定的位置,提高页面布局的灵活性。
(2)定位解决的问题
比如页面侧边固定的工具栏、轮播图
(3)定位的实现方式
利用定位模式+边偏移,在样式中设定定位模式,然后设定元素盒子模型边偏移。
1)边偏移
包括top、right、bottom、left四个分项。
2)定位模式分类
a)静态定位(static):元素无偏移,也即元素本身的默认布局方式。
语法:选择器 {position:static;}
b)相对定位(relative):相对元素自身原先位置设置偏移。(常用)
语法:选择器 {position:relative;}
需要注意的是设置了相对定位的元素仍旧实际占据位置
c)绝对定位(absolute):相对于元素的拥有定位的父级(或者更高级)元素进行定位。(常用)
语法:选择器 {position:absolute;}
需要注意的(1)设置的绝对定位的元素的参考依据是有定位模式的父级或者更高级元素的。
(2)设置了绝对定位的元素会有浮动效果,即不再占有位置。
d)固定定位(fixed):相对于浏览器可视区域,在某个位置固定不动。(常用)
语法:选择器 {position:fixed;}
需要注意的(1)设置的固定定位的元素的参考依据浏览器当前可视窗口。
(2)设置了固定定位的元素会有浮动效果,即不再占有位置。
e)粘性定位(sticky):被认为是相对定位和固定定位的混合。元素在跨越特定偏移前为相对定位,之后为固定定位。
语法:选择器 {position:sticky; top:10px;}
需要注意的是(1)粘性定位一定要设置边偏移(任何边都可行),否则其功能和相对定位相同。
(2)设置的粘性定位的元素的参考依据浏览器当前可视窗口。
(3)设置的粘性定位的元素仍旧实际占据位置
#学问分亨官##闪光时刻二期##闪光时刻第二期主题征文#
*请认真填写需求信息,我们会在24小时内与您取得联系。