资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,Copyright 2010-2012 Hdwnt Inc.All Rights Reserved.,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,了了了了了了来了来了,*,第十讲,CSS盒子模型,在网页中的运用,盒子的浮动,盒子的定位,Z-index,空间位置,盒子的,display,属性,本讲目标,新知识点导入,一切皆为框，如何打破文档流？如何随心所欲的排版这些框框、盒子呢？,今天我们来了解网页设计中重要的部分：,盒子的浮动,盒子的浮动,在标准流中，块级元素的盒子都是上下排列，行内元素的盒子都是左右排列，如果仅仅按照标准流的方式进行排列，就只有这几种可能性，限制太大。CSS的制订者也想到了这样排列限制的问题，因此又给出了浮动和定位方式进行盒子的排列，从而使排版的灵活性大大提高。,例如：有时希望相邻块级元素的盒子左右排列（所有盒子浮动）或者希望一个盒子被另一个盒子中的内容所环绕（一个盒子浮动）做出图文混排的效果，这时最简单的办法就是运用浮动（float）属性使盒子在浮动方式下定位。,在标准流中，一个块级元素在水平方向会自动伸展，在它的父元素中占满整个一行；而在竖直方向和其他元素依次排列，不能并排，如图4-62所示。使用“浮动”方式后，这种排列方式就会发生改变。,CSS中有一个float属性，默认值为none，也就是标准流通常的情况，如果将float属性的值设为left或right，元素就会向其父元素的左侧或右侧靠紧，同时盒子的宽度不再伸展，而是收缩，在没设置宽度时，会根据盒子里面的内容来确定宽度。,son3clear:both;float:left;,3、绝对定位的基准点是以父块为标准，从而界定top、left值；,top:50px;/块原点距离父块顶部距离,CSS的制订者也想到了这样排列限制的问题，因此又给出了浮动和定位方式进行盒子的排列，从而使排版的灵活性大大提高。,6、z-index值决定了绝对定位时，元素距离页面有多远，值越大，距离页面越远。,3、绝对定位的基准点是以父块为标准，从而界定top、left值；,广义的“定位”：在网页排版中，如何将一个盒子放置在某个位置上。,通过上述几个案例的演示，总结如下：,1、position、top、left、z-index四个属性配合使用；,position定位-1,CSS的制订者也想到了这样排列限制的问题，因此又给出了浮动和定位方式进行盒子的排列，从而使排版的灵活性大大提高。,clear属性既可以用在未浮动的元素上，也可以用在浮动的元素上，如果对Box-3同时设置清除浮动和浮动，即：,一切皆为框，如何打破文档流？如何随心所欲的排版这些框框、盒子呢？,1、position、top、left、z-index四个属性配合使用；,如何将文字分别放在一个盒子的左右两端呢？,通过上述几个案例的演示，总结如下：,浮动的清除,clear,是清除浮动属性，它的取值有,left,、,right,、,both,和,none,（默认值），如果设置盒子的清除浮动属性,clear,值为,left,或,right,，表示该盒子的左边或右边不允许有浮动的对象。值设置为,both,则表示两边都不允许有浮动对象，因此该盒子将会在浏览器中另起一行显示,CSS的制订者也想到了这样排列限制的问题，因此又给出了浮动和定位方式进行盒子的排列，从而使排版的灵活性大大提高。,CSS中有一个float属性，默认值为none，也就是标准流通常的情况，如果将float属性的值设为left或right，元素就会向其父元素的左侧或右侧靠紧，同时盒子的宽度不再伸展，而是收缩，在没设置宽度时，会根据盒子里面的内容来确定宽度。,6、z-index值决定了绝对定位时，元素距离页面有多远，值越大，距离页面越远。,网页的固定宽度1-3-1布局,z-index:1;/深度定位,2、绝对定位时，该元素悬浮于页面之上，不再占据页面位置；,position:absolute;/绝对定位,position定位分为：绝对定位与相对定位。,如何将文字分别放在一个盒子的左右两端呢？,网页的固定宽度1-3-1布局,一切皆为框，如何打破文档流？如何随心所欲的排版这些框框、盒子呢？,使用“浮动”方式后，这种排列方式就会发生改变。,son3clear:both;float:left;,clear属性既可以用在未浮动的元素上，也可以用在浮动的元素上，如果对Box-3同时设置清除浮动和浮动，即：,.son3clear:both;float:left;,总结：清除浮动是清除其它盒子浮动对该元素的影响，而设置浮动是让元素自身浮动，两者并不矛盾，因此可同时设置元素清除浮动和浮动,浮动的应用举例,1 图文混排及首字下沉效果等,position:absolute;/绝对定位,如何将文字分别放在一个盒子的左右两端呢？,值设置为both则表示两边都不允许有浮动对象，因此该盒子将会在浏览器中另起一行显示,position:absolute;/绝对定位,最简单的办法就是设置左边的文字左浮动，右边的文字右浮动。,3、绝对定位的基准点是以父块为标准，从而界定top、left值；,广义的“定位”：在网页排版中，如何将一个盒子放置在某个位置上。,如何将文字分别放在一个盒子的左右两端呢？,一切皆为框，如何打破文档流？如何随心所欲的排版这些框框、盒子呢？,6、z-index值决定了绝对定位时，元素距离页面有多远，值越大，距离页面越远。,例如：有时希望相邻块级元素的盒子左右排列（所有盒子浮动）或者希望一个盒子被另一个盒子中的内容所环绕（一个盒子浮动）做出图文混排的效果，这时最简单的办法就是运用浮动（float）属性使盒子在浮动方式下定位。,3、绝对定位的基准点是以父块为标准，从而界定top、left值；,总结：清除浮动是清除其它盒子浮动对该元素的影响，而设置浮动是让元素自身浮动，两者并不矛盾，因此可同时设置元素清除浮动和浮动,son3clear:both;float:left;,z-index:1;/深度定位,position定位分为：绝对定位与相对定位。,使用“浮动”方式后，这种排列方式就会发生改变。,2,菜单的竖横转换,对,li,设置,浮动,即可实现,3,制作栏目框标题栏,标题栏的左端是栏目标题，右端是“更多”之类的链接。如何将文字分别放在一个盒子的左右两端呢？,最简单的办法就是设置左边的文字左浮动，右边的文字,右浮动,。,盒子的定位,CSS中定位的概念,广义的“定位”：在网页排版中，如何将一个盒子放置在某个位置上。,狭义的“定位”：,CSS,中有一个非常重要的属性,position,，之前我们用过该属性，实现了背景图片的定位,在本讲中，我们介绍的是广义的“定位”：,默认的属性值,绝对定位,相对定位,position,定位,-1,position,定位分为：绝对定位与相对定位。,position,从字面意思上看就是指定块的位置，即,块相对于其父块的位置和相对于它自身应该在位置,。,常用属性：,position:absolute;/,绝对定位,position:relative;/,相对定位,left:50px;/,块原点距离父块左侧距离,top:50px;/,块原点距离父块顶部距离,z-index:1;/,深度定位,案例演示,position,定位,-2,通过上述几个案例的演示，总结如下：,1,、,position,、,top,、,left,、,z-index,四个属性配合使用；,2,、绝对定位时，,该元素悬浮于页面之上，不再占据页面位置；,3,、绝对定位的基准点是以父块为标准，从而界定,top,、,left,值；,4,、相对定位时，,元素依然占据自己原始页面位置，只不过看上去位置相对于自身发生了偏移；,5,、相对定位的基准点是以原始位置的原点为标准，从而界定,top,、,left,值；,6,、,z-index,值决定了绝对定位时，元素距离页面有多远，值越大，距离页面越远。,网页的固定宽度1-3-1布局,在默认情况下，,div,作为块级元素是占满整行从上到下依次排列的，但在网页的分栏布局中，例如,1-3-1,固定宽度布局，我们希望中间三栏（三个,div,盒子）从左到右并列排列，这时就需要将这三个,div,盒子都设置为浮动。,但三个,div,盒子都浮动后，只能浮动到窗口的左边或右边，无法在浏览器中居中，因此需要在三个,div,盒子外面再套一个盒子（称为,container,），让,container,居中，这样就实现了里面的三个,div,盒子居中,131布局示意图,body,header,container,nav,content,side,pagefooter,千里之行 始于足下,18,
展开阅读全文