CSS布局与定位PPT课件
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
动居中，即给margin属性赋值为“0 auto”。给 margin属性赋两个值，即分别定义其上下和左右的外 边距。
由于左右的外边距定义为auto，可以根据父元 素宽度自适应为相等大小，所以实现了元素的居中显 示。 例：5-2.html
第3章 CSS布局与定位
（2）外边距取负值 例：5-3.html
span.left{ margin-right:30px; background-color:#a9d6ff;
} span.right{
margin-left:40px; background-color:#eeb0b0; }
span 1
margin-right
margin-left
span 2
第3章 CSS布局与定位
/*上
左右
下*/
第3章 CSS布局与定位
属性值的简写形式
简写方法是按照规定的顺序，给出2个、3个或者4个属性 值，它们的含义将有所区别，具体含义如下： 如果给出2个属性值，前者表示上下边框的属 性，后者表示左右边框的属性； 如果给出3个属性值，前者表示上边框的属性， 中间的数值表示左右边框的属性，后者表示下边 框的属性； 如果给出4个属性值，依次表示上、右、下、 左边框的属性，即顺时针排序。
margin-bottom:50px margin-top:30px
第3章 CSS布局与定位
3.8 嵌套div尺寸的计算
例：index0107.html
第3章 CSS布局与定位
实验3——元素的父子关系（IE，火狐） ，例：516.html,5-18.html
注Baidu Nhomakorabea：如果在父元素的宽度或高度小于其子元素的时候，在IE浏览 器中会自动调整宽度或高度的大小，以适应其子元素，而另外一 些浏览器则不会。
第3章 CSS布局与定位
3.5 外边距（margin）
#outerBox{ margin-top:6px; margin-right:2px; margin-bottom:6px; margin-left:8px;
}
第3章 CSS布局与定位
（1）自动居中 margin属性有一个很实用的功能就是让元素自
solid double;
border: border-width border-style border-color
第3章 CSS布局与定位
3.4 内边距（padding）
#outerBox{ width: 128px; height: 128px;
padding: 20px 20px 10px; padding-left: 10px; border: 10px gray dashed; }
布局的“模型”
margin-top border-top padding-top
content
padding-bottom border-bottom margin-bottom
width
第3章 CSS布局与定位
3.2 盒模型尺寸的计算
div{ width:400px; height:70px; padding:50px 30px; margin:60px 40px; border:10px solid #4eb815; }
（3）外边距加倍(*) 例：5-4.html
第3章 CSS布局与定位
3.7 元素的水平间距
#outerBox{ margin-top:6px; margin-right:2px; margin-bottom:6px; margin-left:8px;
}
第3章 CSS布局与定位
实验1——行内元素之间的水平margin
第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布局与定位
height
margin-right border-right padding-right
padding-left border-left margin-left
第3章 CSS布局与定位
3.9 盒子的浮动
流动布局、浮动布局和定位布局是CSS布局中最重 要的三项技术。
第3章 CSS布局与定位
1、流动布局 网页中的盒模型按前后顺序进行排列，形成了
一组上下关系，这就是文档流。通常所说的流动布局， 就是盒模型随着文档流由上而下进行的排列。如果中 间删除一个元素，在其后的元素就要填补这个空位； 如果中间插入一个元素，其后的元素就会向后依次移 动一个位置。
第3章 CSS布局与定位
CSS代码所定义的宽度（width）和高度(height)是 指内容区域的宽度和高度，增加边界、边框和填充不会 影响内容区域的宽度和高度，但是会增加盒模型的总尺 寸。
上例中div区块的实际宽度 =40px+10px+30px+400px+30px+10px+40px=560px。
第3章 CSS布局与定位
3.3 边框（border）
边框是在见面制作过程中应用最多的一类属性。例 如，在每一行下面都加上一条下画线，就可以完全用 边框来实现。
第3章 CSS布局与定位
常见边框属性
border-color: red green border-width:1px 2px 3px; border-style: dotted dashed border-top border-right border-bottom border-left
3.6 元素的垂直间距
#outerBox{ margin-top:6px; margin-right:2px; margin-bottom:6px; margin-left:8px;
}
第3章 CSS布局与定位
实验2——块级元素之间的竖直margin 当两个不同外边距的元素进行垂直间距计算时，通 常以较大的外边距为准。 （例：5-8.html）
由于左右的外边距定义为auto，可以根据父元 素宽度自适应为相等大小，所以实现了元素的居中显 示。 例：5-2.html
第3章 CSS布局与定位
（2）外边距取负值 例：5-3.html
span.left{ margin-right:30px; background-color:#a9d6ff;
} span.right{
margin-left:40px; background-color:#eeb0b0; }
span 1
margin-right
margin-left
span 2
第3章 CSS布局与定位
/*上
左右
下*/
第3章 CSS布局与定位
属性值的简写形式
简写方法是按照规定的顺序，给出2个、3个或者4个属性 值，它们的含义将有所区别，具体含义如下： 如果给出2个属性值，前者表示上下边框的属 性，后者表示左右边框的属性； 如果给出3个属性值，前者表示上边框的属性， 中间的数值表示左右边框的属性，后者表示下边 框的属性； 如果给出4个属性值，依次表示上、右、下、 左边框的属性，即顺时针排序。
margin-bottom:50px margin-top:30px
第3章 CSS布局与定位
3.8 嵌套div尺寸的计算
例：index0107.html
第3章 CSS布局与定位
实验3——元素的父子关系（IE，火狐） ，例：516.html,5-18.html
注Baidu Nhomakorabea：如果在父元素的宽度或高度小于其子元素的时候，在IE浏览 器中会自动调整宽度或高度的大小，以适应其子元素，而另外一 些浏览器则不会。
第3章 CSS布局与定位
3.5 外边距（margin）
#outerBox{ margin-top:6px; margin-right:2px; margin-bottom:6px; margin-left:8px;
}
第3章 CSS布局与定位
（1）自动居中 margin属性有一个很实用的功能就是让元素自
solid double;
border: border-width border-style border-color
第3章 CSS布局与定位
3.4 内边距（padding）
#outerBox{ width: 128px; height: 128px;
padding: 20px 20px 10px; padding-left: 10px; border: 10px gray dashed; }
布局的“模型”
margin-top border-top padding-top
content
padding-bottom border-bottom margin-bottom
width
第3章 CSS布局与定位
3.2 盒模型尺寸的计算
div{ width:400px; height:70px; padding:50px 30px; margin:60px 40px; border:10px solid #4eb815; }
（3）外边距加倍(*) 例：5-4.html
第3章 CSS布局与定位
3.7 元素的水平间距
#outerBox{ margin-top:6px; margin-right:2px; margin-bottom:6px; margin-left:8px;
}
第3章 CSS布局与定位
实验1——行内元素之间的水平margin
第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布局与定位
height
margin-right border-right padding-right
padding-left border-left margin-left
第3章 CSS布局与定位
3.9 盒子的浮动
流动布局、浮动布局和定位布局是CSS布局中最重 要的三项技术。
第3章 CSS布局与定位
1、流动布局 网页中的盒模型按前后顺序进行排列，形成了
一组上下关系，这就是文档流。通常所说的流动布局， 就是盒模型随着文档流由上而下进行的排列。如果中 间删除一个元素，在其后的元素就要填补这个空位； 如果中间插入一个元素，其后的元素就会向后依次移 动一个位置。
第3章 CSS布局与定位
CSS代码所定义的宽度（width）和高度(height)是 指内容区域的宽度和高度，增加边界、边框和填充不会 影响内容区域的宽度和高度，但是会增加盒模型的总尺 寸。
上例中div区块的实际宽度 =40px+10px+30px+400px+30px+10px+40px=560px。
第3章 CSS布局与定位
3.3 边框（border）
边框是在见面制作过程中应用最多的一类属性。例 如，在每一行下面都加上一条下画线，就可以完全用 边框来实现。
第3章 CSS布局与定位
常见边框属性
border-color: red green border-width:1px 2px 3px; border-style: dotted dashed border-top border-right border-bottom border-left
3.6 元素的垂直间距
#outerBox{ margin-top:6px; margin-right:2px; margin-bottom:6px; margin-left:8px;
}
第3章 CSS布局与定位
实验2——块级元素之间的竖直margin 当两个不同外边距的元素进行垂直间距计算时，通 常以较大的外边距为准。 （例：5-8.html）