CSS布局与定位ppt课件.ppt

《CSS布局与定位ppt课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第3章CSS布局与定位主讲教师：忽海娜3.1盒子模型3.2盒模型尺寸的计算3.3边框3.4内边距3.5外边距3.6元素的水平间距3.7元素的垂直间距3.8嵌套div尺寸的计算3.9盒子的浮动第3章CSS布局与定位3.1盒子模型盒模型是CSS布局中的一个核心概念，通俗一点讲，盒模型就是将每一个XHTML元素都看成一个盒子。而所谓的布局就是将指定数量的盒子按照不同的位置和顺序摆放在一起，这就形成了网页布局。既然盒子可以装东西，于是就有了内容、内边距、边框和外边距等概念。什么是“模型”——本质特征的抽象第3章

2、CSS布局与定位布局的“模型”第3章CSS布局与定位3.2盒模型尺寸的计算div{width:400px;height:70px;padding:50px30px;margin:60px40px;border:10pxsolid#4eb815;}CSS代码所定义的宽度（width）和高度(height)是指内容区域的宽度和高度，增加边界、边框和填充不会影响内容区域的宽度和高度，但是会增加盒模型的总尺寸。上例中div区块的实际宽度=40px+10px+30px+400px+30px+10px+40px=5

3、60px。3.3边框（border）边框是在见面制作过程中应用最多的一类属性。例如，在每一行下面都加上一条下画线，就可以完全用边框来实现。常见边框属性border-color:redgreenborder-width:1px2px3px;border-style:dotteddashedsoliddouble;border-topborder-rightborder-bottomborder-leftborder:border-widthborder-styleborder-color3.4内边距（pa

4、dding）#outerBox{width:128px;height:128px;padding:20px20px10px;/*上左右下*/padding-left:10px;border:10pxgraydashed;}属性值的简写形式简写方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体含义如下：如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性；如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性；如果给出4

5、个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。3.5外边距（margin）#outerBox{margin-top:6px;margin-right:2px;margin-bottom:6px;margin-left:8px;}（1）自动居中margin属性有一个很实用的功能就是让元素自动居中，即给margin属性赋值为“0auto”。给margin属性赋两个值，即分别定义其上下和左右的外边距。由于左右的外边距定义为auto，可以根据父元素宽度自适应为相等大小，所以实现了元素的居中显示。例：

6、5-2.html（2）外边距取负值例：5-3.html（3）外边距加倍(*)例：5-4.html3.7元素的水平间距#outerBox{margin-top:6px;margin-right:2px;margin-bottom:6px;margin-left:8px;}实验1——行内元素之间的水平marginspan.left{margin-right:30px;background-color:#a9d6ff;}span.right{margin-left:40px;background-color:

7、#eeb0b0;}span2span1margin-rightmargin-left3.6元素的垂直间距#outerBox{margin-top:6px;margin-right:2px;margin-bottom:6px;margin-left:8px;}实验2——块级元素之间的竖直margin当两个不同外边距的元素进行垂直间距计算时，通常以较大的外边距为准。（例：5-8.html）块元素2块元素1块元素1块元素2margin-bottom:50pxmargin-top:30px3.8嵌套div尺寸的

8、计算例：index0107.html实验3——元素的父子关系（IE，火狐），例：5-16.html,5-18.html注意：如果在父元素的宽度或高度小于其子元素的时候，在IE浏览器中会自动调整宽度或高度的大小，以适应其子元素，而另外一些浏览器则不会。3.9盒子的浮动流动布局、浮动布局和定位布局是CSS布局中最重要的三项技术。1、流动布局网页中的盒模型按前后顺序进行排列，形成了一组上下关系，这就是文档流。通常所说的流动布局，就是盒模型随着文档