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

资源描述：

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

第7章网页布局设计 回顾常用的选择器分为标签选择器、类选择器和ID选择器。CSS中常用的属性样式包括：文本和字体属性、背景属性以及盒子模型相关的属性。样式有三种使用方式，分别是：行内样式表、内嵌样式表和外部样式表。样式的选择器的优先级别是：ID选择器>类选择器>标签选择器。样式的三种使用方式的优先级是：行内样式>内嵌样式>外部样式。 理论内容理解标准文档流掌握盒子的定位属性掌握盒子的浮动属性使用CSS设计页面布局 HTML中的每个元素都是一个盒子浏览器对HTML文档进行解析，根据盒子的属性对其进行排列。每个元素默认使用标准文档流定位7.1盒子的定位 标准文档流是指浏览器读取HTML内容后对元素进行排列的一种标准方式。浏览器会根据读取到标签的先后顺序来排列HTML元素，按照从左至右、自上而下的顺序排列。行内元素从左至右排列，块级元素自上而下排列标准文档流 标准文档流div块级标签，从上至下依次排列span行内标签，从左至右依次排列div{border:3pxsolidblack;/*黑色实线边框*/margin:5px;width:100px;/*宽度为100px*/height:30px;/*高度为30px*/}span{border:3pxdashedblack;/*黑色虚线边框*/margin:5px;}……

content1content2content3 如何改变行内标签与块级标签默认的显示特性？标准文档流通过display属性可以将行内元素按块级方式来显示，并可以设置width和height。也可以将块级元素行内显示。display的取值有：block、inline和none。 Div行内显示，从左至右排列，宽度与高度设置无效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的取值分类static：静态定位relative：相对定位absolute：绝对定位fixed：固定定位盒子的定位 静态定位当position的取值为static时，为静态定位。该取值也是position的默认值使用静态定位的标签将按照标准文档流的组织方式在页面中排列静态定位的使用可以参照之前的示例 相对定位当position属性设置为relative时，即相对定位设置为相对定位的元素按照标准文档流的规则在网页中排列，但是相对定位的元素可以设置其left、right、top和bottom属性来进行偏移。偏移时参照该元素在标准文档流中的原位置，偏移后仅在显示上出现了坐标变化，但其在标准文档流中的位置没有发生任何变化。 相对原位置，向右偏移50px，向上偏移25px。#box2{background-color:#00f00f;position:relative;left:50px;/*向右移动50px*/top:-25px;/*向上移动25px*/}相对定位 绝对定位当position的取值设置为absolute时，代表绝对定位，绝对定位的元素将脱离标准文档流，不受标准文档流的限制。元素可以通过设置left、right、top和bottom属性并以页面为参照来进行偏移，绝对定位的元素在标准文档流中不占用其空间，不影响标准文档流中的元素，看似悬浮于页面之上。如果多个绝对元素出现了重叠，则可以通过设置z-index属性修改他们显示的层次关系，z-index取值大的层会压住z-index取值小的层。 绝对定位相对文档原点坐标，向右偏移30px，向下偏移100px。#box2{background-color:#00f00f;position:absolute;left:100px;top:30px;} 绝对定位第二个层是绝对定位，设置left和top时默认以body为参照物。如果将其容器（id为wrapper的层）的定位方式设置为relative，则第二个层的top和left会以id为wrapper的层为参照进行移动，作为参照的层称为包含块。以包含块为参照进行移动，向右偏移100px，向下偏移30px#wrapper{border:3pxsolidred;margin-top:100px;position:relative;} 固定定位当position取值为fixed时，即为固定定位，固定定位与绝对定位类似，均会脱离标准文档流。与绝对定位的参照不同，固定定位参照浏览器窗口或其他显示设备的窗口，当用户拖动浏览器窗口的滚动条时，固定定位的元素将保持相对于浏览器窗口不变的位置。 拖动滚动条后，相对窗口位置保持不变#box{background-color:#00f00f;position:fixed;/*固定定位*/left:100px;top:30px;width:70px;height:80px;}固定定位 7.2盒子的浮动如何将多个块级元素放置于同一行内，并且能设置其高度与宽度属性？在HTML中，可以通过float属性将块级元素向左或向右浮动，直至其外边缘碰到包含它的元素或另一个浮动元素的边框为止。多个浮动的元素可以显示在同一行内，浮动元素会脱离标准文档流，不占标准文档流中的位置。 盒子的浮动盒子的浮动实际是通过设置元素的float属性来完成的，其属性主要取值有none、left和right。当float取值为none时表示不浮动，此时元素会按照默认的标准文档流的方式来处理。当float取值为left时表示向左浮动，此时元素会脱离标准文档流，不占文档流中的位置空间。当float取值为right时表示向右浮动，此时元素也会脱离标准文档流。 使用float实现文字绕排图片#wrapper{width:600px;margin:0auto;/*居中*/}#photo{width:78px;height:90px;float:left;}#info{border:2pxdashedred;} 使用float实现分栏布局#wrapper{border:2pxsolidblack;margin:0auto;/*居中*/}#box1,#box2,#box3{border:2pxdashedred;width:80px;height:80px;margin:5px;}#box2{background-color:yellow;/*背景为黄色*/width:100px;/*宽为100px*/height:100px;/*高为100px*/}……BOX-1