盒子模型1、盒子模型：CSS看待元素的一种方式，它把每个元素看成一个盒子来表示。2、五个属性：从里到外：width：内容的宽度，不是框的宽度；height：内容的高度，不是盒子的高度；padding：盒子的内边距；border：盒子的边框；margin：框的外边距注：宽度是在css中设置的，但是浏览器显示的元素可能会超出你的设置，因为元素的边框和内边距会拉伸元素。如下所示。框的实际大小为：leftborder+leftpadding+width+rightpadding+rightborder=302px3，属性说明：1)块元素的默认宽度为“auto”，表示会自动扩展填充可用空间。这就是为什么块元素默认占据浏览器的整个宽度。一般情况下，元素的高度也默认为auto，即垂直扩展内容区域，使所有内容可见。2）width：通过指定具体的宽度来指定宽度，以像素为单位，或者使用百分比（元素所在容器宽度的百分比，可以是bodydiv等）3）padding：可以被视为元素的一部分。如果你想保持盒子实际占用的宽度不变，你需要在增加宽度时减少padding。添加填充将减少宽度。4）margin：表示元素之间的距离，在border之外。5)不能指定padding和margin的颜色，也不能添加任何装饰。但是如果元素设置了background-color或者background-image，padding区域就会有背景颜色/图像，也就是说border以内的所有区域都会有颜色。6）padding、border、margin属性可以综合写，也可以根据方向分别写：综合写：padding:10px20px30px40px；如果有4个数字，按上、右、下、左方向；如果只写了3和2个数，那么按照这个方向，没写的按等值计算。只写一个，说明四个方向相同。应用：使用小属性堆叠大属性：padding：20px；左填充：30px；4、border属性：有3个元素：width、style、color；1）边框：1px纯红色；如果不写颜色，则默认为黑色。三个元素的顺序可以任意；2）也可以按照三个元素来写：border-width:1px；关键字也可以用来指定宽度：thin/medium/thickborder-style:solid;有8种边框样式：solid（实线）、double（双线）、dotted（点线）、dashed（虚线）、groove、outset、inset、ridgeborder-color:red；类似字体颜色的设置方法3）border的三个元素可以根据方向分开写：border-top-color:red;border-bottom-style:dashed;边框顶部宽度：厚；4)指定边框为圆角：border-radius:15px；border-top-left-radius:0px;border-radius:50%;5.背景图片/颜色：（出现在contentarea和padding下方）注意：background-color和background-image不能继承，如果要继承，必须显式写：inherit。1.背景色：background-color:orange；2.背景图片：background-image:url(图片路径)；3.属性说明：1)默认情况下，背景图片会被平铺，即重复重复填充整个背景空间，background-repeat属性控制这种平铺行为。背景重复；//图像水平和垂直重复，这是默认行为。背景重复：不重复；//图片只显示一次，不重复background-repeat:repeat-x;//在x方向重复；背景重复：重复-y；//在y方向重复；背景重复：继承；//根据父元素的设置进行处理2）浏览器默认将图片放置在元素的左上角。background-position可以设置图片background-position的位置：向右移动量和向下移动量；表示背景的定位，它的值可以是关键字，比如：center,left,right,top,bottom，或者百分比，像素值（可以是正数，也可以是负数）。用关键字来描述：leftandright：left,center,right；上下：top,center,bottom例子：background-position:rightbottom;如下图所示。应用场景：背景大图在页面居中：1)背景大图居中：centertop2)bannerbanner:centertop像素描述：background-position:100px200px;像素值可以是负数，负数会向相反的方向移动：应用场景：“csssprite”，英文csssprite，所以也叫“csssprite”技术。它是一种CSS图像合并技术。其方法是将小图标和背景图片组合成一张图片，然后使用CSS背景定位来显示图片中需要显示的部分。csselves的好处是减少了http请求。比如4张小图，原本需要4次http请求。但是有了csssprite，小图变成了图片，只有一个http请求。3）背景附件：已修复；背景是否固定，如果固定则不会被滚动条卷走。4）背景属性也是一个综合属性。以上属性都可以写在一起，类似border的例子：background:redurl(1.jpg)no-repeat100px100pxfixed;这些属性不必写全，可以省略任何部分。
