52css盒模型 5.2.1盒模型的概念 盒模型将页面中的每个元素看做一个矩形框,这个框由 元素的内容、内边距( padding)、边框( border)和外边距 ( margin)组成,如图5-3所示。对象的尺寸与边框等样式表 属性的关系,如图5-4所示。 T border边框 margin-top margin外边距 padding内边距 border-top Left:559 Content EAE:Right 元素 margin-botto Bottom Internet Explorer width 長春工主大CCUT CHANGOHUN UNIVERSITY OF TECHNOLOGY
5.2.1 盒模型的概念 盒模型将页面中的每个元素看做一个矩形框，这个框由 元素的内容、内边距（padding）、边框（border）和外边距 （margin）组成，如图5-3所示。对象的尺寸与边框等样式表 属性的关系，如图5-4所示。 5.2 CSS盒模型
52css盒模型 5.2.2盒模型的属性 外边距 外边距也称为外补丁。外边距设置属性有: margin-top、 margin- right、 margin- bot tom、 margin-left,可分别设置, 也可以用 margin属性,一次设置所有边距。 2.边框 常用的边框属性有7项: border-top、 border-right、 border- bottom、 border-left、 border- width、 border color、 border- style。其中 border-width可以一次性设置所 有的边框宽度, border- color同时设置四面边框的颜色时, 可以连续写上4种颜色,并用空格分隔。上述连续设置的边框 都是按 border-top、 border- right、 border-bot tom border-left的顺序(顺时针)。 長春王主大孝ccUT CHANGOHUN UNIVERSITY OF TECHNOLOGY
5.2.2 盒模型的属性 1．外边距 外边距也称为外补丁。外边距设置属性有：margin-top、 margin-right、margin-bottom、margin-left，可分别设置， 也可以用margin属性，一次设置所有边距。 2．边框 常用的边框属性有7项：border-top、border-right、 border-bottom 、 border-left 、 border-width 、 bordercolor、border-style。其中border-width可以一次性设置所 有的边框宽度，border-color同时设置四面边框的颜色时， 可以连续写上4种颜色，并用空格分隔。上述连续设置的边框 都是按 border-top 、 border-right 、 border-bottom 、 border-left的顺序（顺时针）。 5.2 CSS盒模型
52css盒模型 5.2.2盒模型的属性 3.内边距 内边距也称内补丁,位于对象边框和对象之间,包括了4 项属性: padding-top(上内边距)、 padding-right(右内 边距)、 padding- bottom(下内边距)、 padding-left(左 内边距),内边距属性不允许负值。与外边距类似,内边距 也可以用 padding一次性设置所有的对象间隙,格式也和 margin相似,这里不再一一列举 長春工主大CCUT CHANGOHUN UNIVERSITY OF TECHNOLOGY
5.2.2 盒模型的属性 3．内边距 内边距也称内补丁，位于对象边框和对象之间，包括了4 项属性：padding-top（上内边距）、padding-right（右内 边距）、padding-bottom（下内边距）、padding-left（左 内边距），内边距属性不允许负值。与外边距类似，内边距 也可以用padding一次性设置所有的对象间隙，格式也和 margin相似，这里不再一一列举。 5.2 CSS盒模型
52css盒模型 〔演练53】使用外边距( margIn)属性实现某个分区的缩进 及位置的居中。 ! DOCTYPE htm1外边距- WindoWs Internet Explorer "http://www.w3 <html> <head><t 文件)编辑巴)查看⑩)收藏夹(A)工具〔)帮助⑩D margini ☆收藏夹外 backaround-co border: 1px 庑外边距的分区di width: 500px; margin: 40px 2 20px60px*/ 设置外边距的分区div按上右-下左顺时针方向的外边距分别为 automargin( 40px20px20x60px。 background-co border: 11 width: 300px; 设置位置水平居中的分区div,是该di margin: Upx a 块级元素中的水平居中。 </style> <body> < div sty1e=" width:580px; border:1 px solid#00f; background- color:#6ff">无外边距的分区div。 </div> < div sty1e=" width:580px; border:1 px solid并00f; background-co1or:#ff6"><!--外层容器--> < div class=" margin">设置外边距的分区div按上-右-下-左顺时针方向的外边距分别为 Opx 20px 20px 60 </div><br/> <divc1ass=" automargin">设置位置水平居中的分区div,是该div在块级元素中的水平居中。</div> </body> </html>
【演练5-3】使用外边距（margin）属性实现某个分区的缩进 及位置的居中。 5.2 CSS盒模型