《使用HTML5实现响应式布局》第九章-盒子模型-理论学习资料_第1页
《使用HTML5实现响应式布局》第九章-盒子模型-理论学习资料_第2页
《使用HTML5实现响应式布局》第九章-盒子模型-理论学习资料_第3页
《使用HTML5实现响应式布局》第九章-盒子模型-理论学习资料_第4页
《使用HTML5实现响应式布局》第九章-盒子模型-理论学习资料_第5页
已阅读5页，还剩25页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第九章盒子模型理论内容盒子模型原理盒子模型与定位层叠overflow属性1.盒子模型原理盒子模型是从CSS诞生之时便产生的一个概念，对网页中的大部分对象，实际呈现形式就是一个盒子形状对象（即块状对象）每个盒子都有：边界（margin）、边框（border）、填充（padding）、内容（content）四个属性其中填充、边框、边界属性分别由CSS3的padding、border、margin属性设定。内容属性宽度由width属性设定。盒子模型原理盒子模型描述了每个HTML5块级元素的边框、填充和边距。几乎所有元素的内容和边框之间都有一些填充。边距是不可见的，但是它的空间存在块级元素的实际宽度=左边距+左边框+左填充+内容宽度+右填充+右边距+右边界。盒子模型原理body{

margin:0;}#box{

width:300px; margin:10px;

padding:10px;

border:10pxsolid#181BAF;}#box2{

width:340px;

margin:10px;}清除body默认的边距内容的宽度填充10px边框宽度10px内容的宽度两个div的实际宽度相同实际宽度=左边距+左边框+左填充+内容宽度+右填充+右边框+右边距实际宽度=左边距+内容宽度盒子模型原理打开DreamweaverCC的设计视图，用鼠标点击div，然后鼠标移动到边框，可以看出其总宽度的各组成部分的提示2.盒子模型与定位在页面中，每个元素有默认的位置，可以通过CSS3的定位技术改变元素的位置，常见的定位技术有绝对定位相对定位浮动定位绝对定位绝对定位可以将指定的标签放置在绝对坐标位置上，绝对定位使标签的位置与文档流无关，因此不占据空间，可以浮在网页上position:absolute;使用绝对定位的同时，需要结合top（与上边的距离）、bottom（与下边的距离）、left（与左边的距离）、right（与右边的距离）这四个属性，设置移动的距离绝对定位<styletype="text/css">p{

position:absolute;

top:150px;left:250px;

/*省略*/}</style>相对定位相对定位可以将指定的标签从本来应该显示的位置移动到一个相对位置。如将top属性设置为40px，那么标签将出现在原位置的顶部下方40px的位置。position:relative使用相对定位的同时，需要结合top、bottom、left、right这四个属性，设置移动的距离。相对定位<styletype="text/css">p{

position:relative;

top:-90px;

/*省略*/}</style><body> <h1>POSITIONRELATIVE</h1> <p>从通常放置的位置开始相对移动</p></body>未使用相对定位的情况使用相对定位的情况浮动定位浮动定位是网页中最为重要的定位方式如下图所示网页的导航栏、文章列表块、图片列表等多处位置都使用了浮动定位浮动定位浮动定位使用float属性，常用于div等块状结构元素的浮动布局。float:none|left|right。浮动定位float参数说明参数说明left表示文本或图像会移动到父元素的左侧right表示文本或图像会移动到父元素的右侧none是默认值，表示文本或图像会显示于它在文档中出现的位置浮动定位（1）在DreamweaverCC中新建HTML5文档，插入div和图片<body><divid="div2"><imgsrc="a.png"width="173"height="51"alt=""/><span><ahref="#">更多</a></span>

</div></body>浮动定位（2）编写body和div的样式body{

background:#f3f3eb;}#div2{width:310px;height:56px;margin-bottom:9px;background:url(hlist_title_bg.gif)repeat-xleftbottom;}浮动定位（3）设置“烟花三月”图片的样式为左浮动#div2img{ float:left;}浮动定位（4）设置span标签样式为右浮动#div2span{ float:right; margin-top:16px;}左浮动右浮动浮动定位（5）设置超链接的样式#div2spana{

display:block; width:48px; height:21px; text-decoration:none; font-size:13px; text-align:center; line-height:23px; color:#999; background:url(hlist_title_more.gif)no-repeat00;}设置超链接的背景图片将超链接以块状结构显示浮动定位（6）在div2的外层添加div1，并在div2的后面添加p标签及图片<divid="div1"> <divid="div2"><!--内容省略--></div> <p><imgsrc="hlist_pic1.jpg"></p></div>浮动定位设置div1和p的样式#div1{width:310px;}p{

float:left;border:1pxsolid#999;height:94px;margin:0;}pimg{/*省略*/}左浮动设置总宽度制作图片外边框浮动定位（7）在div1中添加ul标签，作为文章标题列表。<ul><li><ahref="#">卢氏盐商住宅与古巷风韵</a></li><!--省略--></ul>浮动定位ul及相关样式ul{ padding:0;

float:right;

/*省略*/}ullia{ line-height:22px; background:url(icons.png)no-repeat0px3px; /*省略*/}使用图片作为列表项符号右浮动文本行高文本过长浮动定位（8）文字列表中有的列表文字过长，可以将超过长度部分的文字隐藏并显示为省略效果。最后在“ullia”选择符中添加样式ullia{ text-overflow:ellipsis;

overflow:hidden;/*省略*/}出现省略号3.层叠在某些情况下，如同改变一摞杂志的叠放顺序一样，需要控制元素在页面中的堆叠顺序。使用position属性定位可以实现元素层叠的效果通过z-index属性设置元素层叠的具体位置。z-index:auto|<length>层叠z-index属性表示除屏幕水平和垂直两维方向外，指向屏幕的第三维。z-index参数说明参数说明auto遵从其父对象的定位length用整数值来定义堆叠级别。可以为负值。数值较大的元素在数值较小的元素上面。并级的对象，此属性参数值大的，则被层叠在最上面如两个对象的此属性具有同样的值，那么将依据它们在文档流的顺序层叠，写在后面的将会覆盖前面的。必须定义position属性值为absolute、relative或fixed，此属性才有效果。层叠<styletype="text/css">#div1{ position:absolute;}#div2{ position:absolute;}#div3{ position:relative;}#div4{ position:absolute;}</style>相对定位绝对定位层叠为#div2样式类添加z-index属性#div2{

z-ind

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论