第10讲CSS盒子模型课件

1回顾回顾lCSS中背景属性的缩写格式如何编写？lCSS中如何实现图片代替文本？l滑动门技术一般运用在什么地方？如何实现2l初步了解盒子模型的定义l掌握盒子模型的特性l掌握盒子的定位l了解盒子的margin叠加问题l掌握盒子的浮动l使用盒子模型进行页面布局本讲目标本讲目标3新知识导入：新知识导入：CSS的盒子模型的盒子模型l盒子模型是盒子模型是CSSCSS的基石之一的基石之一，它指定元素如何它指定元素如何显示以及显示以及（在某种程度上）如何相互交互。在某种程度上）如何相互交互。l页面上的每个元素都被浏览器看成是一个页面上的每个元素都被浏览器看成是一个矩形矩形的盒子的盒子，这个盒子由元素的，这个盒子由元素的内容内容、填充填充、边框边框和和边界间距边界间距组成。组成。l网页就是由许多个盒子通过不同的排列方式网页就是由许多个盒子通过不同的排列方式（上下排列，并列排列，嵌套排列）堆积而成。（上下排列，并列排列，嵌套排列）堆积而成。4CSS的盒子模型的盒子模型5CSS的盒子模型的盒子模型l每个HTML元素都可以看作是一个装了东西的盒子l盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其它盒子之间，还有边界(magin),如图所示l默认情况下盒子的边框是无，背景色是透明，所以我们在默认情况下看不到盒子6contentpadding-toppadding-bottompadding-leftpadding-rightborder-topborder-bottomborder-rightborder-leftmargin-rightmargin-leftmargin-topmargin-bottomwidthheight7元素盒子大小的计算元素盒子大小的计算 一个元素实际宽度一个元素实际宽度=左边界左边框左填充内容宽度右填充右左边界左边框左填充内容宽度右填充右边框右边界边框右边界8IEquirk模式下盒子的宽度模式下盒子的宽度l当将文档声明当将文档声明DOCTYPEDOCTYPE删除后，删除后，IE 6IE 6对网页的解释会进入对网页的解释会进入quirkquirk（怪异）（怪异）模式，此时盒子的宽度等于模式，此时盒子的宽度等于左边界宽度右边界左边界宽度右边界l因此当使用了盒子属性后切忌删除因此当使用了盒子属性后切忌删除DOCTYPEDOCTYPE9CSS盒子模型计算题盒子模型计算题l如果盒子里面嵌套有盒子，且两个盒子都有边框，那么两个盒子边框之间的距离等于外面盒子的填充值里面盒子的边界值案例演示案例演示10边框边框border属性属性l盒子模型的盒子模型的marginmargin和和paddingpadding属性比较简单，只能设置宽度值，最多属性比较简单，只能设置宽度值，最多分别对上、右、下、左设置宽度值。而边框分别对上、右、下、左设置宽度值。而边框borderborder则可以设置宽度、则可以设置宽度、颜色和样式。颜色和样式。l分别是分别是border-widthborder-width（宽度）、（宽度）、border-colorborder-color（颜色）和（颜色）和border-border-stylestyle（样式）其中（样式）其中border-styleborder-style属性可以将边框设置为实线属性可以将边框设置为实线（solidsolid）、虚线（）、虚线（dasheddashed）、点划线（）、点划线（dotteddotted）、双线（）、双线（doubledouble）等效果等效果 11填充填充padding属性属性l填充填充paddingpadding属性，也称为盒子的内边距。就是盒子边框到内容之间属性，也称为盒子的内边距。就是盒子边框到内容之间的距离，和表格的填充属性（的距离，和表格的填充属性（cellpaddingcellpadding）比较相似。如果填充属）比较相似。如果填充属性为性为0 0，则盒子的边框会紧挨着内容，这样通常不美观。，则盒子的边框会紧挨着内容，这样通常不美观。l当对盒子设置了背景颜色或背景图像后，那么背景会覆盖当对盒子设置了背景颜色或背景图像后，那么背景会覆盖paddingpadding和和内容组成的范围，并且默认情况下背景图像是以内容组成的范围，并且默认情况下背景图像是以paddingpadding的左上角为的左上角为基准点在盒子中平铺的基准点在盒子中平铺的 12盒子模型的特性盒子模型的特性l边界值margin可为负，填充padding不可为负l边框border默认值为0，即不显示l行内元素，如a，定义上下边界不影响行高13对盒子模型的思考对盒子模型的思考l边框是实的，我们可以看到实实在在的边框，而填充和边界都是虚的，我们只能看到他们对元素的影响l盒子模型中只能设置两类颜色，即边框颜色和背景颜色l盒子模型可设置三类距离，即边界距离margin，填充距离padding和边框值border14属性值的简写形式属性值的简写形式l方法是按照规定的顺序，给出方法是按照规定的顺序，给出2 2个、个、3 3个或者个或者4 4个属性值，它们的含义个属性值，它们的含义将有所区别，具体含义如下：将有所区别，具体含义如下：如果给出如果给出2 2个属性值，前者表示个属性值，前者表示上下边框上下边框的属性，后者表示的属性，后者表示左右边框左右边框的的属性；属性；如果给出如果给出3 3个属性值，前者表示个属性值，前者表示上边框上边框的属性，中间的数值表示的属性，中间的数值表示左右边左右边框框的属性，后者表示的属性，后者表示下边框下边框的属性；的属性；如果给出如果给出4 4个属性值，依次表示个属性值，依次表示上上、右右、下下、左左边框的属性，即顺时针边框的属性，即顺时针排序。排序。15各种元素盒子属性的默认值各种元素盒子属性的默认值l大部分大部分htmlhtml元素的盒子属性元素的盒子属性(margin,padding)(margin,padding)默认值都为默认值都为0 0；l有少数有少数htmlhtml元素的元素的(margin,padding)(margin,padding)浏览器默认值不为浏览器默认值不为0 0，例如：，例如：bodybody，p p，ulul，lili，formform标记等，因此我们有时有必要先设置它们的标记等，因此我们有时有必要先设置它们的这些属性为这些属性为0 0。lInputInput元素的边框属性默认不为元素的边框属性默认不为0 0，我们可以设置为，我们可以设置为0 0达到美化表单中达到美化表单中输入框和按钮的目的输入框和按钮的目的。16盒子模型的应用盒子模型的应用l1.美化表单l网页中的表单控件在默认情况下背景都是灰色的，文本框边框是粗线条带立体感的，不够美观。下列代码通过CSS改变表单的边框样式、颜色和背景颜色让文本框，按钮等变得漂亮些。17盒子的定位盒子的定位18盒子的三种定位形式盒子的三种定位形式l在标准流下的定位l在浮动属性下的定位l在定位属性下的定位l除非设置浮动属性或定位属性，否则所有盒子都是在标准流中定位。顾名思义，标准流中元素盒子的位置由元素在HTML中的位置决定。19标准流标准流lHTML元素在标准状况下的定位方式l行内元素在同一行内横向排列l块级元素占满整个一行，在页面中竖向排列l元素不会移动到其它地方去，对于嵌套的元素盒子也是嵌套的关系20标准流下的盒子排列分析标准流下的盒子排列分析*border:2px dashed#FF0066;padding:10px;margin:2px;网页的banner（块级元素）行内元素1行内2行内3这是无名块这是盒子中的盒子21行内元素的盒子行内元素的盒子l行内元素的盒子永远只能在浏览器中得到一行高度的空间（行高由line-height属性决定，如果没设置该属性，则是内容的默认高度），如果给它设置上下border，margin，padding等值，导致其盒子的高度超过行高，那么它的盒子上下部分将和其他元素的盒子重叠。l因此，不推荐对行内元素直接设置盒子属性，一般先设置行内元素以块级元素显示，再设置它的盒子属性。22改变行内元素的高度改变行内元素的高度l如图所示，当增加行内元素的边界和填充时，行内元素a占据浏览器的高度并没有增加，下面这个div块仍然在原来的位置，导致行内元素盒子的上下部分重叠，而左右部分不会受影响 23display属性属性l通过display属性可控制元素是以行内元素显示还是以块级元素显示，或不显示ldisplay:block|inline|none|list-item24blockblock元素元素lblock元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非用width设定一个宽度,和 是块元素的例子。25inline元素元素inline元素的特点是：l和其他元素都在一行上l高，行高及顶和底边距不可改变；l宽度就是它的文字或图片的宽度，不可改变。,和是inline元素的例子 26列表项元素列表项元素display:list-iteml在html中只有li元素默认是此类型，将元素设置为列表项元素后将按列表元素显示，再通过设置列表选项可使元素的左边出现小黑点。27隐藏元素隐藏元素display:none;l当某个元素被设置成了隐藏元素之后，浏览器会完全忽略掉这个元素，该元素将不会被显示，也不会占据文档中的位置。像title元素默认就是此类型。l比较visibility:hidden;l制作下拉菜单、tab面板等有时就需要用display:none把菜单或面板隐藏起来28需要使用需要使用display属性切换的情况属性切换的情况1.让一个inline元素从新行开始；2.让块元素和其他元素保持在一行上；3.控制inline元素的宽度;4.控制inline元素的高度（对导航条特别有用）；5.无须设定宽度即可为一个块元素设定与文字同宽的背景色 29标准流下定位的应用制作竖直导航菜单标准流下定位的应用制作竖直导航菜单#nav a font-size:14px;color:#333333;text-decoration:none;background-color:#CCCCCC;display:block;width:140px;padding:6px 10px 4px;border:1px solid#000000;margin:2px;#nav a:hover color:#FFFFFF;background-color:#666666;30盒子的盒子的margin叠加问题叠加问题31盒子的盒子的margin在标准流中的计算在标准流中的计算实验实验1 1：行内元素之间的水平：行内元素之间的水平margin margin span.leftspan.leftmargin-right:30px;margin-right:30px;background-color:#a9d6ff;background-color:#a9d6ff;span.rightspan.rightmargin-left:40px;margin-left:40px;background-color:#eeb0b0;background-color:#eeb0b0;32p经常不断地学习,你就什么都知道。你知道得越多,你就越有力量pStudyConstantly,AndYouWillKnowEverything.TheMoreYouKnow,TheMorePowerfulYouWillBe写在最后33谢谢你的到来学习并没有结束，希望大家继续努力Learning Is Not Over.I Hope You Will Continue To Work Hard演讲人：XXXXXX 时 间：XX年XX月XX日 34