第4章3CSS盒子模型

1、CSS的盒子模型CSS的盒子模型盒子模型是CSS的基石之一，它指定元素如何显示以及（在某种程度上）如何相互交互页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框和边界组成。网页就是由许多个盒子通过不同的排列方式（上下排列，并列排列，嵌套排列）堆积而成。 CSS的盒子模型CSS的盒子模型每个HTML元素都可以看作是一个装了东西的盒子盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其它盒子之间，还有边界(magin)默认情况下盒子的边框是无，背景色是透明，所以我们在默认情况下看不到盒子contentpaddi

2、ng-toppadding-bottompadding-leftpadding-rightborder-topborder-bottomborder-rightborder-leftmargin-rightmargin-leftmargin-topmargin-bottomwidthheight元素盒子大小的计算一个元素实际宽度=左边界左边框左填充内容宽度右填充右边框右边界IE quirk模式下盒子的宽度当将文档声明DOCTYPE删除后，IE 6对网页的解释会进入quirk（怪异）模式，此时盒子的宽度等于左边界宽度右边界因此当使用了盒子属性后切忌删除DOCTYPECSS盒子模型计算题如果盒子里

3、面嵌套有盒子，且两个盒子都有边框，那么两个盒子边框之间的距离等于外面盒子的填充值里面盒子的边界值边框border属性盒子模型的margin和padding属性比较简单，只能设置宽度值，最多分别对上、右、下、左设置宽度值。而边框border则可以设置宽度、颜色和样式。 分别是border-width（宽度）、border-color（颜色）和border-style（样式）其中border-style属性可以将边框设置为实线（solid）、虚线（dashed）、点划线（dotted）、双线（double）等效果 填充padding属性填充padding属性，也称为盒子的内边距。就是盒子边框到内容

4、之间的距离，和表格的填充属性（cellpadding）比较相似。如果填充属性为0，则盒子的边框会紧挨着内容，这样通常不美观。当对盒子设置了背景颜色或背景图像后，那么背景会覆盖padding和内容组成的范围，并且默认情况下背景图像是以padding的左上角为基准点在盒子中平铺的 盒子模型的特性边界值margin可为负，填充padding不可为负边框border默认值为0，即不显示行内元素，如a，定义上下边界不影响行高对盒子模型的思考边框是实的，我们可以看到实实在在的边框，而填充和边界都是虚的，我们只能看到他们对元素的影响盒子模型中只能设置两类颜色，即边框颜色和背景颜色盒子模型可设置三类距离，即边

5、界距离margin，填充距离padding和边框值border属性值的简写形式方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体含义如下：如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性；如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性；如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。各种元素盒子属性的默认值大部分html元素的盒子属性(margin, padding)默认值都为0；有少数html元素的(margin, padding)浏览器默认值不为0，例如：body，p，ul，li

6、，form标记等，因此我们有时有必要先设置它们的这些属性为0。Input元素的边框属性默认不为0，我们可以设置为0达到美化表单中输入框和按钮的目的。盒子的定位盒子的三种定位形式在标准流下的定位在浮动属性下的定位在定位属性下的定位除非设置浮动属性或定位属性，否则所有盒子都是在标准流中定位。顾名思义，标准流中元素盒子的位置由元素在HTML中的位置决定。标准流HTML元素在标准状况下的定位方式行内元素在同一行内横向排列块级元素占满整个一行，在页面中竖向排列元素不会移动到其它地方去，对于嵌套的元素盒子也是嵌套的关系背景的控制 CSS的背景属性背景（background）是网页中常用的一种表现方法，无论

7、是单纯的背景颜色还是背景图片，都能为网页带来丰富的视觉效果，HTML的很多元素都具有bgcolor和backgroud属性，可以设置背景颜色和背景图片，如（table、td等），但形式比较单一，对背景图片的设定，只支持在X轴和Y轴都平铺的方式，因此，如果同时设置了背景颜色和背景图片，那么背景颜色将被背景图片挡住，以背景图片来显示。而CSS对元素的背景设置，则提供了更多的途径，如背景图片既可以平铺也可以不平铺，还可以在X轴平铺或在Y轴平铺，当背景图片不平铺时，并不会完全挡住背景颜色，因此可以综合设置背景颜色和背景图片达到希望的效果。CSS的背景属性是backgroud或以backgroud开头

8、CSS的背景属性属性属性描述描述可用值可用值background设置背景的所有控制选项，是设置背景的所有控制选项，是其他所有背景属性的缩写其他所有背景属性的缩写其他背景属性的值的集合其他背景属性的值的集合background-color设置背景颜色设置背景颜色rgb颜色颜色命名颜色命名颜色16进制颜色进制颜色background-image设置背景图片设置背景图片urlbackground-repeat设置背景图片的平铺设置背景图片的平铺方式方式repeat（完全平铺）（完全平铺）repeat-x（横向平铺）（横向平铺）repeat-y（纵向平铺）（纵向平铺）no-repeat（不平铺）（不平

9、铺）background-attachment设置背景图片固定还设置背景图片固定还是随内容滚动是随内容滚动scroll（默认值）（默认值）fixedbackground-position设置背景图片显示的设置背景图片显示的起始位置起始位置（top leftcenter centerbottom right）（x% y%x-pos y-pos）各个背景属性的默认值background-color: transparent 透明模式background-image: none background-repeat: repeat平铺 background-attachment: scroll bac

10、kground-position: 0% 0%DW中的背景设置面板background-color:#0099ccbackground-image: url(img/bottom.gif)background-repeat: no-repeatbackground-position: right bottombackground-attachment: no-repeat背景的运用技巧背景的运用技巧同时运用背景颜色和背景图片控制背景在盒子中的位置及是否平铺多个元素背景的叠加 滑动门技术 背景位置的控制实现图片的翻转圆角的设计方法同时运用背景颜色和背景图片目前网页中流行采用一种渐变背景，即网页的

11、背景从上至下由一种深颜色过渡到一种浅颜色，由于网页的长度通常是不好估计的，所以无法用一幅背景图片来做这种渐变背景，只能在网页的上部用渐变的图片做背景，下部使用用一种和图片下部颜色相同的颜色做背景色通过在CSS中设置body标记的背景颜色和背景图片，并把背景图片设置为横向平铺就可以实现渐变背景了。bodybackground:#666666 url(xxwlzx/body_bg.gif) repeat-x; 控制背景在盒子中的位置及是否平铺 在html中，背景图像只能平铺，而在CSS中，背景图像能做到精确定位，允许不平铺，效果就像普通的图像元素一样。因此有人建议所有的网页图像都作为元素的CSS背

12、景引入。例如下面的网页的背景就是用让背景图片不平铺并且定位于右下角实现的。body background: #F7F2DF url(cha.jpg) no-repeat right bottom ;多个元素背景的叠加 背景图片的叠加是很重要的CSS技术，当两个元素是嵌套关系时，那么里面元素的盒子背景的不透明部分将覆盖在外面元素盒子背景之上，利用这一点，再结合对背景图片位置的控制，可以得到滑动门技术。下面以4图像可变宽度圆角栏目框的制作来介绍多个元素背景叠加的技巧 圆角的设计固定宽圆角可变宽圆角盒子的浮动盒子的浮动 在标准流中，块级元素的盒子都是上下排列，行内元素的盒子都是左右排列，如果仅仅按照

13、标准流的方式进行排列，就只有这几种可能性，限制太大。CSS的制订者也想到了这样排列限制的问题，因此又给出了浮动和定位方式进行盒子的排列，从而使排版的灵活性大大提高。例如：有时希望相邻块级元素的盒子左右排列（所有盒子浮动）或者希望一个盒子被另一个盒子中的内容所环绕（一个盒子浮动）做出图文混排的效果，这时最简单的办法就是运用浮动（float）属性使盒子在浮动方式下定位。 盒子的浮动 在标准流中，一个块级元素在水平方向会自动伸展，在它的父元素中占满整个一行；而在竖直方向和其他元素依次排列，不能并排，使用“浮动”方式后，这种排列方式就会发生改变。CSS中有一个float属性，默认值为none，也就是标准流通常的情况，如果将float属性的值设为left或right，元素就会向其父元素的左侧或右侧靠紧，同时盒子的宽度不再伸展，而是收缩，在没设置宽度时，会根据盒子里面的内容来确定宽度。盒子的浮动 人有了知识，就会具备各种分析能力，人有了知识，就会具备各种分析能力，明辨是非的能力。明辨是非的能力。所以我们要勤恳读书，广泛阅读，所以我们要勤恳读书，广泛阅读，古人说古人说“书中自有黄金屋。书中自有黄金屋。”通过阅读科技书籍，