盒子模型课件.ppt

《盒子模型课件.ppt》由会员分享，可在线阅读，更多相关《盒子模型课件.ppt（41页珍藏版）》请在三一办公上搜索。

1、第四章 盒子模型,2022/11/29,1,回顾与检查,字体大小可以使用什么属性设置？设置CSS伪类时，应该注意什么？如何使中的单行文字垂直居中对齐？,2022/11/29,2,本章任务,腾讯首页-产品类别导航今日淘宝活动QQ炫舞特色右边栏腾讯拍拍-热卖专栏QQ摄影俱乐部,2022/11/29,3,本章目标,会使用盒子属性border、padding、margin美化网页元素会精确计算盒子模型尺寸会使用display属性进行块级元素与行内元素的互相转换,2022/11/29,4,盒子模型,盒子模型（Box Model）实现页面布局的基础与生活中的盒子相似,盒内物品,填充部分,纸壳外围间隙,纸壳

2、,2022/11/29,5,盒子模型,盒子模型（Box Model）包含以下属性：边框（border）：对应包装盒的纸壳，具有一定的厚度内边距（padding）：位于边框内部，是内容与边框的距离，对应包装盒的填充部分外边距（margin）：位于边框外部，是边框外面周围的间隙，对应纸壳外围间隙元素内容：盒子内的物品,边框,元素内容,外边距,内边距,2022/11/29,6,盒子模型,盒子模型的平面结构图,2022/11/29,7,盒子模型,盒子模型的三维立体结构图,第一层,第二层,第三层,第四层,第五层,2022/11/29,8,边框属性,边框（border）用于分隔不同元素会占据空间有4条边框

3、,元素内容与外边距的分界线,具有宽度，占据空间,盒子模型可以没有边框，此时边框宽度为0,上,右,盒子模型有4条边框,下,左,2022/11/29,9,边框属性,边框颜色分别设置4条边框,属性值取值与color属性相同,2022/11/29,10,边框属性,边框颜色同时设置4条边框,按顺时针方向上、右、下、左的顺序设置4边颜色,2022/11/29,11,边框属性,边框粗细属性值：关键字、数值,2022/11/29,12,边框属性,边框粗细分别设置4条边框设置方法与边框颜色相同,2022/11/29,13,边框属性,边框粗细同时设置4条边框设置方法与边框颜色相同,2022/11/29,14,边框

4、属性,边框样式属性值：关键字,2022/11/29,15,边框属性,边框样式分别设置4条边框设置方法与边框颜色相同,2022/11/29,16,边框属性,边框样式同时设置4条边框设置方法与边框颜色相同,2022/11/29,17,边框属性,边框样式的显示差异在IE和Firefox中略有区别groove、inset、outset和ridge，IE都支持得不够理想,IE浏览器不支持的border-style效果，不推荐使用,2022/11/29,18,边框属性,边框属性简写同时设置边框的三个属性,border:1px dashed #336699;,4条边框粗细均为1px,4条边框均为虚线,4条边

5、框颜色均为#336699,当有多条规则作用于同一个边框时，会产生冲突，后面的设置会覆盖前面的设置,2022/11/29,19,内边距属性,内边距（padding）用于控制内容与边框之间的距离会占据空间可设置盒子模型上、右、下、左4个方向的内边距值设置方式与border属性相似,adding属性的值可以为0，即无内边距,上边距,内容,边框,2022/11/29,20,2022/11/29,21,内边距属性,内边距分别设置4个方向的内边距,2022/11/29,22,内边距属性,内边距同时设置4个方向的内边距,2022/11/29,23,外边距属性,外边距（margin）用于控制元素与元素之间的距

6、离会占据空间可设置盒子模型上、右、下、左4个方向的外边距值设置方式与padding属性相同,margin属性的值可以为0，即无外边距,2022/11/29,24,外边距属性,body的外边距本身是一个盒子默认情况下，有若干像素外填充,body的margin属性值设置为0时,默认情况下的body,2022/11/29,25,外边距属性,外边距设置方法与padding属性设置方法类似可以设置1、2、3或4个属性值设置1个属性值时，表示上、下、左、右4个margin均为该值设置2个属性值时，前者为上、下margin值，后者为左、右margin值设置3个属性值时，第1个为上margin的值，第2个为左

7、、右margin的值，第3个为下margin的值设置4个属性值时，按照顺时针方向，依次为上、右、下、左margin的值,2022/11/29,26,盒子模型尺寸,盒子尺寸,盒子模型总尺寸=border-width+padding+margin+内容尺寸（宽度/高度）,内容的宽度或者高度,该盒子尺寸没有包含边框尺寸，表示无边框,2022/11/29,27,演示案例-制作“主题相册”,页面效果,2022/11/29,28,演示案例-制作“网页热门标签”,思路分析使用ID选择器定义划分html文档的div使用盒子属性美化网页元素外观使用盒子属性控制元素间距使用标题标签排版各级标题使用盒子属性制作带边

8、框的图片,带边框，且与边框有间距的图片效果,2022/11/29,29,标准文档流,概念简称“标准流”，指在不适用其他的排版和定位相关的特殊CSS规则时，各种元素的排列规则分两类块级元素（block level）以一个块地形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满占有独立空间,2022/11/29,30,标准文档流,分两类行内元素（inline）各个字母之间横向排列，到最右端自动折行标签本身不占有独立的区域，仅仅在其他元素的基础上指定了一定的范围,2022/11/29,31,标准文档流,块级元素与行内元素的区别块级元素拥有自己的区域行内元素没有自己的区域,2022/11/29,32

9、,标签与标签,标签区块容器标记，即与之间相当于一个容器通用的块级元素，无逻辑语义可以容纳各种HTML元素使用CSS控制时，其中的各标签都会随之改变,2022/11/29,33,标签与标签,标签区块容器标记，区划行内元素通用的行内元素，无逻辑语义可以容纳各种HTML元素使用CSS控制时，其中的各标签都会随之改变,2022/11/29,34,标签与标签,标签与标签的异同相同点：区块容器标记独立出各个区块不同点：是块级元素，在它前后的元素会自动换行是行内元素，在它的前后不会换行,2022/11/29,35,display属性,display属性用于指定HTML标签的显示方式属性值：关键字常用的有3个

10、,2022/11/29,36,display属性,display属性的应用块级元素与行内元素的相互转换,为div和span标签设置display属性,div变成了行内显示,span变成了块状显示,盒子7、8消失了,2022/11/29,37,演示案例-制作“腾讯网站导航”,页面效果,2022/11/29,38,演示案例-制作“腾讯网站导航”,思路分析使用ID选择器定义用于分块的div使用定义列表排版网站导航使用display属性将span标签转换为块级元素，并用它排版带背景图的标题使用盒子属性美化网站导航外观,2022/11/29,39,总结,盒子模型属性有哪些？如何计算盒子模型尺寸？简单描述块级元素与行内元素的异同？如何进行块级元素与行内元素的互相转换？,2022/11/29,40,2022/11/29,41,