CSS盒子模型【DOC精选】.docVIP

CSS盒子模型 1 盒子模型的概念(※) 在浏览器看来，所有的网页元素本质上就是许多盒子排列在一起或者相互嵌套。 padding-border-margin模型是非常通用的描述矩形对象布局形式的方法，这些矩形对象被统称为“盒子”，英文为“Box”，见图1。 一个独立的盒子模型由content（内容）、（边框）、（内边距）和（外边距）4个部分组成，见图2。 掌握盒子模型需要从两个方面来理解： 孤立的盒子的内部结构。 多个盒子之间的相互关系。 图1. 画框示意图 图2. 盒子模型 2 长度单位 2.1 相对类型 px：像素，分辨率不同，大小不同。 em：设置以目前字符的高度为单位。 2.2 绝对类型 表1. 绝对类型的尺度单位 尺度单位名 说明 in（英寸） 不是国际标准单位，平常极少使用，1 in = 2.54 cm cm（厘米） 国际标准单位，较少用 mm（毫米） 国际标准单位，较少用 pt（点数） 最基本的显示单位，较少用 pc（印刷单位） 应用在印刷行业中，1 pc = 12 pt 3 边框(border) 图3. 边框(border) border-color：#FF0000, #336699 = #369, red, green border-width：thin/medium(2px)/thick/length border-style： none/hidden：无/隐藏 dashed/solid：虚线/实线 dotted/double：点线/双线 groove/ridge：凹(wa)槽/突脊 inset/outset：内陷/外凸(tu) IE不支持border-style效果的d)、e)，Firefox支持效果不错。 3.1 设置边框样式 !--05-01.html-- html head titleborder-style/title style type=text/css div{ border-width:6px; border-color:#000000; margin:20px; padding:5px; background-color:#FFFFCC; } /style /head body div style=border-style:dashedThe border-style of dashed./div div style=border-style:dottedThe border-style of dotted./div div style=border-style:doubleThe border-style of double./div div style=border-style:grooveThe border-style of groove./div div style=border-style:insetThe border-style of inset./div div style=border-style:outsetThe border-style of outset./div div style=border-style:ridgeThe border-style of ridge./div div style=border-style:solidThe border-style of solid./div /body /html 图4~5. IE和Firefox对边框风格的支持对比 3.2 属性值的简写形式 对不同的边框设置不同的属性值： 如给出2个属性值，前者表示上下边框，后者表示左右边框。 如给出3个属性值，前者表示上边框，中间表示左右边框，后者表示下边框。 如果给出4个属性值，依次表示上、右、下、左边框（顺时针排序）。 border-color: red green; border-width: 1px 2px 3px; border-style: dotted dashed solid double; 在一行中同时设置边框的宽度、颜色和样式： border: 2px green dashed; 对一条边框设置与其他边框不同的属性： border: 2px green dashed; border-left: 1px red solid; 同时制定一条边框的一种属性： border-left-color: red; border-top-width: 2px; 实例05-02.html： !--05-02.html-- html head style type=text/css #outerBox{ width:200px; height:100px; border:2px black solid;