16-盒模型

16.盒模型网页设计与制作实例教程网页设计与制作实例教程热身运动htmlheadtitle区域的概念/titlestyletype=text/css#d1{background-color:red;font-size:20;width:400;height=100}#d2{background-color:blue;font-size:20;width:300;height=80}#d3{background-color:green;font-size:20;width:200;height=50}/style/headbodycenterdivid=d1/divdivid=d2/divdivid=d3/div/center/body/html网页设计与制作实例教程盒子模式（BoxModel）网页设计与制作实例教程说明盒子里由外至里依次是：margin边距border边框padding间隙(也有人称做补丁)content(内容，比如文本，图片等)CSS边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离。CSS边框属性(border)用来设定一个元素的边线。CSS间隙属性(padding)是用来设置元素内容到元素边框的距离。CSS背景属性指的是content和padding区域。CSS属性中的width和height指的是content区域的宽和高。网页设计与制作实例教程CSS盒子模式这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。说明2网页设计与制作实例教程定义示例#sample{MARGIN:10px10px10px10px;PADDING:20px10px10px20px;BORDER-TOP:#CCC2pxsolid;BORDER-RIGHT:#CCC2pxsolid;BORDER-BOTTOM:#CCC2pxsolid;BORDER-LEFT:#CCC2pxsolid;BACKGROUND:url(bg_poem.jpg)#FEFEFEno-repeatrightbottom;COLOR:#666;TEXT-ALIGN:center;LINE-HEIGHT:150%;WIDTH:60%;}网页设计与制作实例教程#sample说明1●层的名称为sample，在页面中用divid=“sample”就可以调用这个样式。●MARGIN是指层的边框以外留的空白，用于页边距或者与其它层制造一个间距。10px10px10px10px分别代表上右下左(顺时针方向)四个边距，如果都一样，可以缩写成MARGIN:10px;。如果边距为零，要写成MARGIN:0px;。注意：当值是零时，除了RGB颜色值0%必须跟百分号，其他情况后面可以不跟单位px。MARGIN是透明元素，不能定义颜色。●PADDING是指层的边框到层的内容之间的空白。和margin一样，分别指定上右下左边框到内容的距离。如果都一样，可以缩写成PADDING:0px。单独指定左边可以写成PADDING-LEFT:0px;。PADDING是透明元素，不能定义颜色。●BORDER是指层的边框，BORDER-RIGHT:#CCC2pxsolid;是定义层的右边框颜色为#CCC，宽度为2px，样式为solid直线。如果要虚线样式可以用dotted。网页设计与制作实例教程#sample说明2●BACKGROUND是定义层的背景。分2级定义，先定义图片背景，采用url(../images/bg_logo.gif)来指定背景图片路径；其次定义背景色#FEFEFE。no-repeat指背景图片不需要重复，如果需要横向重复用repeat-x,纵向重复用repeat-y,重复铺满整个背景用repeat。后面的rightbottom;是指背景图片从右下角开始。如果没有背景图片可以只定义背景色BACKGROUND:#FEFEFE●COLOR用于定义字体颜色，上一节已经介绍过。●TEXT-ALIGN用来定义层中的内容排列方式，center居中,left居左,right居右。●LINE-HEIGHT定义行高，150%是指高度为标准高度的150%，也可以写作：LINE-HEIGHT:1.5或者LINE-HEIGHT:1.5em，都是一样的意思。●WIDTH是定义层的宽度，可以采用固定值，例如500px，也可以采用百分比，象这里的60%。要注意的是:这个宽度仅仅指你内容的宽度，不包含margin,border和padding。但在有些浏览器中不是这么定义的，需要你多试试。网页设计与制作实例教程盒子的例子htmlheadstyle#sample{MARGIN:10px10px10px10px;PADDING:20px10px10px20px;BORDER-TOP:#CCC2pxsolid;BORDER-RIGHT:#CCC2pxsolid;BORDER-BOTTOM:#CCC2pxsolid;BORDER-LEFT:#CCC2pxsolid;BACKGROUND:url()#FEFEFEno-repeatrightbottom;COLOR:#666;TEXT-ALIGN:center;LINE-HEIGHT:150%;WIDTH:60%;}/style/headbodydivid=samplep这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，/pp这里是演示内容，这里是演示内容，/pp这里是演示内容，这里是演示内容，/p这里是演示内容.../DIV/body/html网页设计与制作实例教程网页设计与制作实例教程边框风格属性(border-style)这个属性用来设定上下左右边框的风格，它的值如下：none(没有边框，无论边框宽度设为多大)dotted(点线式边框)dashed(破折线式边框)solid(直线式边框)double(双线式边框)groove(槽线式边框)ridge(脊线式边框)inset(内嵌效果的边框)outset(突起效果的边框)网页设计与制作实例教程边框宽度属性(border-width)这个属性用来设定上下左右边框的宽度，它的值如下：medium(是缺省值)thin(比medium细)thick(比medium粗)用长度单位定值。可以用绝对长度单位(cm,mm,in,pt,pc)或者用相对长度单位(em,ex,px)。网页设计与制作实例教程边框颜色属性(border-color)这个属性用来设定上下左右边框的颜色。例句如下：.d5{border-color:gray;border-style:solid;}网页设计与制作实例教程单边边框属性上下左右四个边框不但可以统一设定，也可以分开设定。设定上边框属性，你可以使用border-top,border-top-width,border-top-style,border-top-color。设定下边框属性，你可以使用border-bottom,border-bottom-width,border-bottom-style,border-bottom-color。设定左边框属性，你可以使用border-left,border-left-width,border-left-style,border-left-color。设定上边框属性，你可以使用border-right,border-right-width,border-right-style,border-right-color。网页设计与制作实例教程下间隙属性(margin-bottom)这个属性用来设定下间隙的宽度。示例如下：.d1{padding-bottom:1cm}网页设计与制作实例教程间隙属性(padding)这个属性是设定间隙宽度的一个快捷的综合写法，用这个属性可以同时设定上下左右间隙属性。你可以为上下左右间隙设置相同的宽度。示例入下：.d1{padding:1cm}你也可以分别设置间隙，顺序是上，右，下，左。示例如下：.d1{padding:1cm2cm3cm4cm}上面的代码表示，上间隙为1cm，右间隙为2cm，下间隙为3cm，左间隙为4cm。网页设计与制作实例教程边距属性边距属性是用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离。左边距属性(margin-left)这个属性用来设定左边距的宽度。示例如下：.d1{margin-left:1cm}网页设计与制作实例教程边距属性(margin)这个属性是设定边距宽度的一个快捷的综合写法，用这个属性可以同时设定上下左右边距属性。你可以为上下左右边距设置相同的宽度。示例入下：.d1{margin:1cm}你也可以分别设置边距，顺序是上，右，下，左。示例如下：.d1{margin:1cm2cm3cm4cm}上面的代码表示，上边距为1cm，右边距为2cm，下边距为3cm，左边距为4cm。网页设计与制作实例教程作业做一个盒子，要求如下：边框样式为dotted，上，右，下，左的Padding分别为30,40,50,60盒子的宽为500，长为600上下边框的宽度为4，左右边框的宽度为10上边距为3cm，右边距为2cm，下边距为1cm，左边距为4cm背景颜色为黄色。background-color：yellow