盒子模型

第四章盒子模型回顾与检查字体大小可以使用什么属性设置？设置CSS伪类时，应该注意什么？如何使div中的单行文字垂直居中对齐？本章任务腾讯首页--产品类别导航今日淘宝活动QQ炫舞特色右边栏腾讯拍拍--热卖专栏QQ摄影俱乐部本章目标会使用盒子属性border、padding、margin美化网页元素会精确计算盒子模型尺寸会使用display属性进行块级元素与行内元素的互相转换盒子模型盒子模型（BoxModel）实现页面布局的基础与生活中的盒子相似盒内物品填充部分纸壳外围间隙纸壳盒子模型盒子模型（BoxModel）包含以下属性：边框（border）：对应包装盒的纸壳，具有一定的厚度内边距（padding）：位于边框内部，是内容与边框的距离，对应包装盒的填充部分外边距（margin）：位于边框外部，是边框外面周围的间隙，对应纸壳外围间隙元素内容：盒子内的物品边框元素内容外边距内边距盒子模型盒子模型的平面结构图盒子模型盒子模型的三维立体结构图第一层第二层第三层第四层第五层边框属性边框（border）用于分隔不同元素会占据空间有4条边框元素内容与外边距的分界线具有宽度，占据空间盒子模型可以没有边框，此时边框宽度为0上右盒子模型有4条边框下左边框属性边框颜色分别设置4条边框属性语法规则说明border-top-colorborder-top-color:#369;设置上边框颜色border-right-colorborder-right-color:#369;设置右边框颜色border-bottom-colorborder-bottom-color:#369;设置下边框颜色border-left-colorborder-left-color:#369;设置左边框颜色属性值取值与color属性相同边框属性边框颜色同时设置4条边框属性语法规则说明border-colorborder-color:#369;设置4条边框为同一颜色border-color:#369#000;上、下边框为#369左、右边框为#000border-color:#369#000red;上边框为#369左、右边框为#000下边框为redborder-color:#369#000redblue;上边框为#369右边框为#000下边框为red左边框为blue按顺时针方向上、右、下、左的顺序设置4边颜色边框属性边框粗细属性值：关键字、数值属性值说明thin定义细的边框medium默认。定义中等的边框thick定义粗的边框length允许自定义边框的宽度，如5px、0.1in等inherit规定应该从父元素继承边框宽度边框属性边框粗细分别设置4条边框设置方法与边框颜色相同属性语法规则说明border-top-widthborder-top-width:5px;上边框粗细为5pxborder-right-widthborder-right-width:10px;右边框粗细为10pxborder-bottom-widthborder-bottom-width:8px;下边框粗细为8pxborder-left-widthborder-left-width:22px;左边框粗细为22px边框属性边框粗细同时设置4条边框设置方法与边框颜色相同属性语法规则说明border-widthborder-width:5px;4条边框粗细均为5pxborder-width:20px2px;上、下边框粗细为20px左、右边框粗细为2pxborder-width:5px1px6px;上边框粗细为5px左、右边框粗细为1px下边框粗细为6pxborder-width:1px3px5px2px;上边框粗细为1px右边框粗细为3px下边框粗细为5px左边框粗细为2px边框属性边框样式属性值：关键字属性值说明none定义无边框hidden与“none”相同，不过应用于表格时除外，对于表格，hidden用于解决边框冲突dotted定义点状边框。在大多浏览器中呈现为实线dashed定义虚线。在大多浏览器中呈现为实线solid定义实线double定义双线。双线的宽度等于border-width的值groove定义3D凹槽边框，其效果取决于border-color的值ridge定义3D垄状边框，其效果取决于border-color的值inset定义3Dinset边框，其效果取决于border-color的值outset定义3Doutset边框，其效果取决于border-color的值inherit规定应该从父元素继承边框样式。任何IE浏览器版本都不支持，不推荐使用。边框属性边框样式分别设置4条边框设置方法与边框颜色相同属性语法规则说明border-top-styleborder-top-style:solid;上边框为实线border-right-styleborder-right-style:solid;右边框为实线border-bottom-styleborder-bottom-style:solid;下边框为实线border-left-styleborder-left-style:solid;左边框为实线边框属性边框样式同时设置4条边框设置方法与边框颜色相同属性语法规则说明border-styleborder-style:solid;4条边框均为实线border-style:soliddotted;上、下边框为实线左、右边框为点线border-style:soliddotteddashed;上边框为实线左、右边框为点线下边框为虚线border-style:soliddotteddasheddouble;上边框为实线右边框为点线下边框为虚线左边框为双线边框属性边框样式的显示差异在IE和Firefox中略有区别groove、inset、outset和ridge，IE都支持得不够理想IE浏览器不支持的border-style效果，不推荐使用边框属性边框属性简写同时设置边框的三个属性border:1pxdashed#336699;4条边框粗细均为1px4条边框均为虚线4条边框颜色均为#336699当有多条规则作用于同一个边框时，会产生冲突，后面的设置会覆盖前面的设置内边距属性内边距（padding）用于控制内容与边框之间的距离会占据空间可设置盒子模型上、右、下、左4个方向的内边距值设置方式与border属性相似padding属性的值可以为0，即无内边距上边距内容边框内边距属性内边距分别设置4个方向的内边距属性语法规则说明padding-leftpadding-left:10px;左内边距为10pxpadding-rightpadding-right:5px;右内边距为5pxpadding-toppadding-top:20px;上内边距为20pxpadding-bottompadding-bottom:8px;下内边距为8px内边距属性内边距同时设置4个方向的内边距属性语法规则说明paddingpadding:10px;设置4个方向内边距均为10pxpadding:10px5px;上、下内边距为10px左、右内边距为5pxpadding:30px8px10px;上内边距为30px左、右内边距为8px下内边距为10pxpadding:20px5px8px10px;上内边距为20px右内边距为5px下内边距为8px左内边距为10px外边距属性外边距（margin）用于控制元素与元素之间的距离会占据空间可设置盒子模型上、右、下、左4个方向的外边距值设置方式与padding属性相同margin属性的值可以为0，即无外边距外边距属性body的外边距本身是一个盒子默认情况下，有若干像素外填充body的margin属性值设置为0时默认情况下的body外边距属性外边距设置方法与padding属性设置方法类似可以设置1、2、3或4个属性值设置1个属性值时，表示上、下、左、右4个margin均为该值设置2个属性值时，前者为上、下margin值，后者为左、右margin值设置3个属性值时，第1个为上margin的值，第2个为左、右margin的值，第3个为下margin的值设置4个属性值时，按照顺时针方向，依次为上、右、下、左margin的值盒子模型尺寸盒子尺寸盒子模型总尺寸=border-width+padding+margin+内容尺寸（宽度/高度）内容的宽度或者高度该盒子尺寸没有包含边框尺寸，表示无边框演示案例-制作“主题相册”页面效果演示案例-制作“网页热门标签”思路分析使用ID选择器定义划分html文档的div使用盒子属性美化网页元素外观使用盒子属性控制元素间距使用标题标签排版各级标题使用盒子属性制作带边框的图片教师讲解实现思路并演示带边框，且与边框有间距的图片效果标准文档流概念简称“标准流”，指在不适用其他的排版和定位相关的特殊CSS规则时，各种元素的排列规则分两类块级元素（blocklevel）以一个块地形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满占有独立空间标准文档流分两类行内元素（inline）各个字母之间横向排列，到最右端自动折行标签本身不占有独立的区域，仅仅在其他元素的基础上指定了一定的范围标准文档流块级元素与行内元素的区别块级元素拥有自己的区域行内元素没有自己的区域div标签与span标签div标签区块容器标记，即div与/div之间相当于一个容器通用的块级元素，无逻辑语义可以容纳各种HTML元素使用CSS控制div时，其中的各标签都会随之改变div标签与span标签span标签区块容器标记，区划行内元素通用的行内元素，无逻辑语义可以容纳各种HTML元素使用CSS控制span时，其中的各标签都会随之改变div标签与span标签div标签与span标签的异同相同点：区块容器标记独立出各个区块不同点：div是块级元素，在它前后的元素会自动换行span是行内元素，在它的前后不会换行display属性display属性用于指定HTML标签的显示方式属性值：关键字常用的有3个属性常用可能值说明displayblock将元素显示为块级元素，该元素前后会带有换行符inline默认。元素会被显示为行内元素，该元素前后没有换行符none该元素不会被显示display属性display属性的应用块级元素与行内元素的相互转换为div和span标签设置display属性div变成了行内显示span变成了块状显示盒子7、8消失了演示案例-制作“腾讯网站导航”页面效果演示案例-制作“腾讯网站导航”思路分析使用ID选择器定义用于分块的div使用定义列表排版网站导航使用display属性将span标签转换为块级元素，并用它排版带背景图的标题使用盒子属性美化网站导航外观教师演示操作步骤总结盒子模型属性有哪些？如何计算盒子模型尺寸？简单描述块级元素与行内元素的异同？如何进行块级元素与行内元素的互相转换？总结并布置作业