CSS布局与定位.pptVIP

第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章 CSS布局与定位 什么是“模型”——本质特征的抽象 第3章 CSS布局与定位 布局的“模型” 3.2 盒模型尺寸的计算 div{ width:400px; height:70px; padding:50px 30px; margin:60px 40px; border:10px solid #4eb815; } CSS代码所定义的宽度（width）和高度(height)是指内容区域的宽度和高度，增加边界、边框和填充不会影响内容区域的宽度和高度，但是会增加盒模型的总尺寸。 上例中div区块的实际宽度=40px+10px+30px+400px+30px+10px+40px=560px。 3.3 边框（border） 边框是在见面制作过程中应用最多的一类属性。例如，在每一行下面都加上一条下画线，就可以完全用边框来实现。 常见边框属性? border-color: red green border-width:1px 2px 3px; border-style: dotted dashed solid double; border-top border-right border-bottom border-left border: border-width border-style border-color 3.4 内边距（padding） #outerBox{ width: 128px; height: 128px; padding: 20px 20px 10px; /*上 左右 下*/ padding-left: 10px; border: 10px gray dashed; } 属性值的简写形式? 简写方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体含义如下： ? 如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性； ? 如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性； ? 如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。 3.5 外边距（margin） #outerBox{ margin-top:6px; m argin-right:2px; margin-bottom:6px; margin-left:8px; } （1）自动居中 margin属性有一个很实用的功能就是让元素自动居中，即给margin属性赋值为“0 auto”。给margin属性赋两个值，即分别定义其上下和左右的外边距。 由于左右的外边距定义为auto，可以根据父元素宽度自适应为相等大小，所以实现了元素的居中显示。 例：5-2.html （2）外边距取负值 例：5-3.html （3）外边距加倍(*) 例：5-4.html 3.7 元素的水平间距 #outerBox{ margin-top:6px; m argin-right:2px; margin-bottom:6px; margin-left:8px; } 实验1——行内元素之间的水平margin span.left{ margin-right:30px; background-color:#a9d6ff; } span.right{ margin-left:40px; background-color:#eeb0b0; } 3.6 元素的垂直间距 #outerBox{ margin-top:6px; m argin-right:2px; margin-bottom:6px; margin-left:8px; } 实验2——块级元素之间的竖直margin 当两个不同外边距的元素进行垂直间距计算时，通常以较