知识点:理解标准文档流、盒子的定位属性、盒子的浮动属性、浮动塌陷以及清除塌陷的方法。
默认情况下,盒子的排列是根据其在文档中出现的顺序,从上到下、从左到右的顺序来进行的,这种定位方式又被成为标准文档流。由于标准文档流提供的网页布局方式缺少变化,CSS中提供了更多的方式来定位元素。例如使用浮动的方式来定位,使元素脱离标准文档流的限制,使布局有更多的选择。定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
定位的概念:广义的“定位”是指将某个元素放置于某个位置,该动作成为定位操作,可以使用CSS规则或使用表格等传统的布局方式来实现。狭义的“定位”是指CSS中的一个非常重要的属性positon,此单词的中文意思也是定位,它是CSS布局的核心。
在CSS布局中,使用position属性来实现对盒子的定位,常见的position属性值:静态定位(static)为默认属性值,相对定位(relative), 绝对定位(absolute), 固定定位(fixed)。
当盒子的position属性设置为relative时,就是相对定位。相对定位的盒子,通过设置left、right、top和bottom属性来进行位置偏移,偏移的参照物是该盒子在标准文档流中的原始位置。偏移后该盒子只在显示上出现了坐标的变化,但是他在标准文档流中原本所占的空间仍保留。
代码练习:4个盒子自然排列,将box2进行相对定位,并相对于原位置向左偏移50px,向下偏移50px。
相对定位
box1
box2
box3
box4
相对定位的用途:相对定位会保留盒子原有的位置,因此在页面布局中使用效果较小,一般有两个作用:
相对定位的定位值:使用left、right、top和bottom属性
当盒子的position属性设置为absolute时,代表绝对定位。
绝对定位的盒子原本占有的空间从文档流完全删除,并相对于其包含块定位。同时也不会影响其他元素,看似悬浮于页面上。
元素可以通过设置left、rgiht、top和bottom属性,以页面左上角为参照来进行偏移。
如果多个绝对元素出现了重叠,可以设置z-index属性,修改他们显示的层次关系,z-index取值大的会压住取值小的元素。
代码练习:4个盒子自然排列,将box2进行绝对定位,并相对于原网页左上角向左偏移50px,向下偏移50px
绝对定位
box1
box2
box3
box4
第二个div设置了absolute,该div的宽度就由文本决定,且下面的div会上移占据之前第二个div的位置。top和left是相对于离它最近且不是static定位的父元素来定位的,在此div2因为没有父元素,所以第二个div相对于根元素即html元素来定位。
绝对定位的用途:父相子绝
父绝子绝、父相子绝、父固子绝,都是可以给儿子定位的。但是,在网页上,“父绝子绝”没有一个盒子在标准文档流中,所以页面就不稳固,没有任何实战用途。在实际网页布局上,"子绝父相"有意义,父亲没有脱离标准文档流,儿子脱标,但是在父亲的范围里面移动。
绝对定位
box1
第二个div的父元素
box2
box3
box4
注意:绝对定位的儿子,无视参考的那个盒子的padding。
当盒子的position属性设置为fiexd时,即为固定定位。固定定位和绝对定位类似,都会脱离标准文档流,区别在于定位的参照不同。固定定位参照浏览器窗口或其他显示设备的窗口,和包含块无关。并且,当用户拖动浏览器窗口的滚动条时,固定定位的元素将保持在相对于浏览器窗口不变的位置。
代码练习:将box2进行固定定位
固定定位
box1
第二个div的父元素
box2
box3
box4
固定定位用途:页面广告条
Float(浮动),往往是用于图像,但它在布局时一样非常有用。CSS 的 Float(浮动),会使元素向左或向右移动,直到它的外边缘碰到父级元素或者另一个浮动元素的边框为止。
浮动 Float属性取值有三个: left right none
浮动的目的: 我们浮动的目的,就是可以把多个块级元素放到想要的一行上。能够让inline元素的display属性变为block,即可以设置宽高属性。
代码练习:实现图文环绕效果
float的使用
box1float浮动设计的本来的目的就是为了实现网页中文字环绕图片的布局。在标准文档流的布局中行内元素自己单独一行,而块级元素是上下显示的。我们浮动的目的,就是可以把多个块级元素放到想要的一行上。当设置元素的float属性取值为left或right时,元素会脱离标准文档流,不占文档流中的位置空间。但为了阅读的方便,文字依然会绕开漂浮的盒子进行显示。
代码练习:实现块级元素在同一行
float的使用
box1
box2
box3
注意:当多个盒子向同一个方向浮动时,会依照先后顺序依次排列,如果第一行排列不下时,会另起一行开始。
测试1:修改3个盒子的float属性为right,猜一下盒子的排列顺序。
测试2:修改例子中3个盒子的宽度,查看效果。
测试3:修改box1比box2高,查看效果。
测试3:设置3个盒子的浮动方向不一致,如box1和box2向左浮动,box3向右浮动,查看效果。
当一个盒子中,所有的子元素都是浮动元素时,由于浮动的子元素都脱离了文档流,父元素将无法获知子元素的高度,最终显示时会忽略子元素的大小,形成塌陷,在显示时会出现意料之外的情况。
在实际制作网页时,经常会盒子里的内容是动态的,不确定长度的,因此需要根据盒子里的内容而自适应高度。如果父元素里所有的盒子都是浮动的,容易出现如下图的情况。称之为浮动塌陷,为了更好的显示效果,我们需要清除浮动塌陷。
清除浮动塌陷常见的方法有三种:
在最后一个子元素后面添加一句代码:
原理:添加一个空的div,利用clear属性,来清除浮动的影响。
清除浮动塌陷的方法一:添加额外元素
box1
box2
box3
使用方法: 给浮动的大盒子(父级标签),在CSS样式里面加: overflow:hidden;
#div1 { border:2px red solid; background-color:#FF9; overflow:hidden;}
使用方法:给父级元素使用after伪类。
原理:给父级元素里加入content属性里的内容(空内容),然后设置为块级元素,清除两侧浮动。此原理和天界外元素的原理一样,只是添加的内容在CSS中,而不需要在父级元素里添加。
#div1:after{
content:"";
display:block;
clear:both;
}
============================这里是结束分割线=============================