网页设计与制作教程Web前端开发（第7版）课件：CSS3的盒模型-CSS盒模型的属性.pptx

padding-border-margin模型是一个通用的描述盒子布局形式的方法。对于任何一个盒子，都可以分别设定4条边各自的padding、border和margin，实现各种各样的排版效果。CSS3的盒模型CSS盒模型的属性

目录CSS的盒模型6.1CSS盒模型的组成和大小6.2CSS盒模型的属性6.3CSS布局属性6.4CSS盒子定位属性 6.5CSS3多列属性6.6CSS基本布局样式 6.7实训——制作社区网网页6.8练习

6.2CSS盒模型的属性6.2.1CSS内边距属性padding1.顶边的内边距属性padding-top语法：padding-top:auto|length|百分比|inherit示例：h1{padding-top:32pt;}

6.2CSS盒模型的属性2.右边的内边距属性padding-right语法：padding-right:auto|length|百分比|inherit示例：div{padding-right:12px;}

6.2CSS盒模型的属性3.底边的内边距属性padding-bottom语法：padding-bottom:length|百分比|inherit示例：body{padding-bottom:15px;}

6.2CSS盒模型的属性4.左边的内边距属性padding-left语法：padding-left:auto|length|百分比|inherit示例：img{padding-left:32pt;}

6.2CSS盒模型的属性5.四边的内边距属性padding语法：padding:auto|length|百分比|inherit示例：h1{padding:10px11px12px13px;}/*顺序为上右下左，顺时针*/p{padding:12.5%;}div{padding:10%10%10%10%;}

6.2CSS盒模型的属性6.边距值的复制在设置边距时，如果提供全部4个参数值，按照上右下左的顺时针顺序列出。例如：padding:10px10px10px10px;如果按照简写的形式，CSS将按照一定的规则顺序复制边距值。例如：padding:10px;由于padding:10px只定义了上内边距，按顺序右内边距将复制上内边距，变成如下形式：padding:10px10px;由于padding:10px10px只定义了上内边距和右内边距，按顺序下内边距将复制上内边距，变成如下形式：padding:10px10px10px;

6.2CSS盒模型的属性由于padding:10px10px10px只定义了上内边距、右内边距和下内边距，按顺序左内边距将复制右内边距，变成如下形式：padding:10px10px10px10px;根据这个规则，可以省略相同的值。例如：padding:10px5px15px5px可以简写为padding:10px5px15px。padding:10px5px10px5px可以简写为padding:10px5px。但是，有时虽然出现了重复却不能简写，例如：padding:10px5px5px10px和padding:5px5px5px10px。

6.2CSS盒模型的属性【例6-2】CSS内边距属性示例，本例文件6-2.html在浏览器中的显示效果，如图6-4所示。

6.2CSS盒模型的属性!DOCTYPEhtmlhtmlheadmetacharset=utf-8titleCSS内边距/titlestyletype=text/cssh3.title{padding-top:10px;padding-right:2em;padding-bottom:20px;padding-left:10%;background-color:coral;}.box{width:200px;height:80px;padding:20px30px10px20px;background-color:aqua;}/style/headbody