Html网页布局设计,盒子模型.ppt

《Html网页布局设计,盒子模型.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第7章网页布局设计回顾常用的选择器分为标签选择器、类选择器和ID选择器。CSS中常用的属性样式包括：文本和字体属性、背景属性以及盒子模型相关的属性。样式有三种使用方式，分别是：行内样式表、内嵌样式表和外部样式表。样式的选择器的优先级别是：ID选择器>类选择器>标签选择器。样式的三种使用方式的优先级是：行内样式>内嵌样式>外部样式。理论内容理解标准文档流掌握盒子的定位属性掌握盒子的浮动属性使用CSS设计页面布局HTML中的每个元素都是一个盒子浏览器对HTML文档进行解析，根据盒子的属性对其进行排列。每个元素默认使用标准文档流

2、定位7.1盒子的定位标准文档流是指浏览器读取HTML内容后对元素进行排列的一种标准方式。浏览器会根据读取到标签的先后顺序来排列HTML元素，按照从左至右、自上而下的顺序排列。行内元素从左至右排列，块级元素自上而下排列标准文档流标准文档流div块级标签，从上至下依次排列span行内标签，从左至右依次排列div{border:3pxsolidblack;/*黑色实线边框*/margin:5px;width:100px;/*宽度为100px*/height:30px;/*高度为30px*/}span{border:3pxdash

3、edblack;/*黑色虚线边框*/margin:5px;}……

4、至右排列，宽度与高度设置无效Span标签块状显示，默认宽度为100%，占满一行标准文档流div{border:3pxsolidblack;margin:5px;width:100px;height:30px;display:inline;}span{border:3pxdashedblack;margin:5px;display:block;}.none{display:none;/*不在页面中显示*/}广义的“定位”是指将某个元素放置于某个位置HTML中的定位通过position属性来实现。定位按照position的取值

5、分类static：静态定位relative：相对定位absolute：绝对定位fixed：固定定位盒子的定位静态定位当position的取值为static时，为静态定位。该取值也是position的默认值使用静态定位的标签将按照标准文档流的组织方式在页面中排列静态定位的使用可以参照之前的示例相对定位当position属性设置为relative时，即相对定位设置为相对定位的元素按照标准文档流的规则在网页中排列，但是相对定位的元素可以设置其left、right、top和bottom属性来进行偏移。偏移时参照该元素在标准文档流中

6、的原位置，偏移后仅在显示上出现了坐标变化，但其在标准文档流中的位置没有发生任何变化。相对原位置，向右偏移50px，向上偏移25px。#box2{background-color:#00f00f;position:relative;left:50px;/*向右移动50px*/top:-25px;/*向上移动25px*/}相对定位绝对定位当position的取值设置为absolute时，代表绝对定位，绝对定位的元素将脱离标准文档流，不受标准文档流的限制。元素可以通过设置left、right、top和bottom属性并以页面为参

7、照来进行偏移，绝对定位的元素在标准文档流中不占用其空间，不影响标准文档流中的元素，看似悬浮于页面之上。如果多个绝对元素出现了重叠，则可以通过设置z-index属性修改他们显示的层次关系，z-index取值大的层会压住z-index取值小的层。绝对定位相对文档原点坐标，向右偏移30px，向下偏移100px。#box2{background-color:#00f00f;position:absolute;left:100px;top:30px;}绝对定位第二个层是绝对定位，设置left和top时默认以body为参照物。如果将其

8、容器（id为wrapper的层）的定位方式设置为relative，则第二个层的top和left会以id为wrapper的层为参照进行移动，作为参照的层称为包含块。以包含块为参照进行移动，向右偏移100px，向下偏移30px#wrapper{border:3pxsolidred;margin-top:10