第2章盒子模型.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,第二章盒子模型,本章内容,CSS,盒子模型,页面元素定位,本章目标,理解盒子模型,理解内容与表现分离的优点,理解并掌握盒子之间的关系,理解并掌握绝对定位与相对定位的用法,内容回顾,什么是,XHTML,创建,XHTML,页面步骤,XHTML,中块状标签和行内标签的特点,内补丁和外补丁的作用,1.,盒子模型,传统,table,布局存在一些缺陷：,代码冗余，结构不清晰,页面加载速度慢,定位不灵活,DIV+CSS,布局的优点,可以现实内容与表现分离,代码简洁、结构清晰,对搜索引擎支持好,易于版面布局修改,定位准确、灵活,标题,单元格,内容,1.1,内容与表现分离,内容与表现分离是,DIV+CSS,布局设计的基础,内容就是页面实际要传达给用户的信息，包含数据、文档或者图片等,表现指的是内容的修饰性部分，例如标题字体的大小，背景等。,P text-indent:2em;,仰首是春俯首是秋愿所有的幸福都追随着你 在这个值得庆贺的日子里，我虽无鲜花与美酒献礼，但心中有歌，仅祝你一生快乐。,段落内容,CSS,样式,页面内容,内容与表现分离,内容与表现分离的优点,网页文件体积小能较快被客户端下载,数据的多样显示。通过不同的样式表适应不同的设备，做到内容与设备无关,保持整个站点的视觉一致性，修改样式表就可以轻松改版,页面结构简洁，数据的集成、更新和处理更加方便灵活,便于被搜索引擎搜索,内容与表现分离,如何实现内容与表现分离，步骤：,用,div,来定义语义结构,用,CSS,来美化网页，如加入背景、线条边框、对齐属性等,在,DIV,里添加内容，如文字、图片等（没有表现属性的标签）,div,font-size:25px;,border:1px solid red;,width:100px;,height:50px;,页面与表现分离,1.2,盒子,什么是盒子,-1,在现实生活中，包装物品的箱子即是一个典型的盒子,盒子,什么是盒子,-2,盒子模型由,content,(,内容,),、,border,(,边框,),、,padding,(,内补丁,),、,margin,(,外补丁,),四部分组成,盒子,标准,W3C,盒子,标准,W3C,盒子模型的范围包括,margin,、,border,、,padding,、,content,，并且,content,部分不包含其他部分,适用于所有浏览器,盒子,IE,盒子,IE,盒子模型的范围也包括,margin,、,border,、,padding,、,content,，和标准,W3C,盒子模型不同的是：,IE,盒子模型的,content,部分包含了,border,和,padding,适用于,IE,浏览器,盒子,盒子大小,盒子的,margin,为,20,px,，,border,为,1,px,，,padding,为,10,px,，,content,的宽为,200,px,、高为,50,px,标准,W3C,盒子模型和,IE,盒子模型，盒子需要占据的位置如何计算？,盒子,在页面中，标准,W3C,盒子和,IE,盒子，我们应该采用哪一种？,如何采用标准,W3C,盒子和,IE,盒子？,1.3,盒子之间的关系,盒子间的关系主要包括以下两：,盒子的水平间距,盒子的垂直间距,盒子的重叠,盒子之间的关系,当两个盒子在一行显示时，它们之间的距离为,BOX1,的,margin-right,和,BOX2,的,margin-left,的和,盒子之间的关系,垂直盒子,当两个盒子在垂直方向显示时，它们之间的距离为,BOX,的,margin-bottom,和,BOX2,的,margin-top,中较大者，而不是两者之和,盒子之间的关系,重叠盒子,可以将其中一个盒子的,margin,属性值设置为负值，实现盒子的重叠,盒子之间的关系,如何解释盒子之间的包含定位问题？,小结,什么是内容与表现分离？,盒子模型由几个部分组成？,常见的盒子之间关系分为哪几种？,2.,盒子定位,传统的,table,布局在页面元素定位上存在很大的缺陷,div,是一个没有任何语义的标签，一切由设计师定义,定位是将某个元素放到某个位置上,定位的方式：,浮动定位,盒子的流动定位,position,定位,盒子定位,Position,定位,position,属性用来控制页面元素位置,position:static/absolute/relative;,2.1,静态定位,静态定位是,postion,的默认值，它表示块状元素按照标准文档流，包括浮动方式进行布局,#father,background-color:#000000;,border:1px dashed#000000;,padding:15px;,#son,background-color:#FFFFFF;,border:1px dashed#FFFFFF;,padding:10px;,示例,:,position-static.html,2.2,绝对定位,-1,绝对定位是以某一个点为基准进行偏移,典型的绝对定位，是以浏览器窗口的左上角（，）点为基准偏移盒子,#father,background-color:#a0c8ff;,border:1px dashed#000000;,width:300pxheight:100px;,position:absolute;,left:50px;,top:50px;,示例,:,position-absolute.html,绝对定位,-2,包含元素的定位是以已经定位的父级元素为基准进行偏移,#father,position:relative;,#father div,#father#son2,position:absolute;,示例,:,position-absolute2.html,2.3,相对定位,相对定位是指相对于盒子元素原有的位置进行偏移，需设定垂直方向和水平向的偏移量，分别是,left,、,top,、,right,、,bottom,#father,#son1,position:relative;,/*relative,相对定位,*,/,/*,静态定位,son2*/,#son2,示例,:,position-relative.html,2.4,包含块,什么是包含块,包含块是标准布局中的一个重要概念，它是绝对定位的基础。,包含块是为绝对定位元素提供坐标偏移和显示范围的参照物，是确定绝对定位元素偏移起始位置和百分比的参考,包含块,在,CSS,中，可以用,position,属性来定义包含块,包含元素在使用绝对定位时，需指定,left,、,top,、,right,、,bottom,。,#include1,#include2,width:100px;,height:50px;,float:left;,margin-top:10px;/*,定义盒子顶端的外补丁,*,/,border:solid 1px red;/*,定义边框,*,/,#include2/*,定义包含元素,b,为相对定位，确定它为包含块,*,/,position:relative;,margin-left:10px;/*,定义盒子左侧的外补丁,*,/,示例,:,include.html,3.,综合应用,案例分析,-1,制作祝福网站上的卡片叠加效果,综合应用,案例分析,-2,定义一个包含块，为卡片绝对定位提供参考,#card/*,定义一个包含块,*,/,position:relative;,#card1/*,卡片的定义,*,/,position:absolute;,left:20px;,top:20px;,示例,:,wish.html,总结,盒子模型由,content,(,内容,),、,border,(,边框,),、,padding,(,内补丁,),、,margin,(,外补丁,),四部分构成,标准,W3C,盒子模型的范围包括,margin,、,border,、,padding,、,conten,t,，且,content,不包含其他部分,IE,盒子模型的范围也包括,margin,、,border,、,padding,、,content,，和标准,W3C,盒子模型不同的是：,IE,盒子模型的,content,部分包含了,border,和,padding,内容与表现分离可以保证文档的结构清晰，方便更换风格,静态定位是,postion,的默认值，它表示块状元素按照标准文档流，包括浮动方式进行布局,绝对定位就是以某一个点为基准进行偏移，最典型的绝对定位，是以浏览器窗口的左上角（，）点为基准偏移盒子,相对位置指相对于盒子元素原有的位置进行偏移，需设定垂直方向和水平向的偏移量，分别是,left,、,top,、,right,、,bottom,总结,盒子模型由,content,(,内容,),、,border,(,边框,),、,padding,(,内补丁,),margin,(,外补丁,),四部分组成,标准,W3C,盒子模型的范围包括,margin,、,border,、,padding,、,content,，并且,content,不包含其他部分。,IE,盒子模型的范围也包括,margin,、,border,、,padding,、,content,，和标准,W3C,盒子模型不同的是：,IE,盒子模型,的,content,部分包含了,border,和,pading,。,内容与表现分离可以保证文档的结构清晰，方便更换风格。,静态定位是,postion,的默认值，它表示块状元素按照标准文档流，包括浮动方式进行布局。,绝对定位就是以某一个点为基准进行偏移，最典型的绝对定位，是以浏览器窗口的左上角（，）点为基准偏移盒子。,相对位置指相对于盒子元素原有的位置进行偏移，需设定垂直方向和水平向的偏移量，分别是,left,、,top,、,right,、,bottom,;,