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

页面中的每个元素都包含在一个矩形区域内，这个矩形区域通过一个模型来描述其占用空间，这个模型被称为盒模型（BoxModel），也称框模型。CSS3的盒模型CSS盒模型的组成和大小

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

6.1CSS盒模型的组成和大小6.1.1盒子的组成1.内容区域contentarea2.内边距区域paddingarea3.边框区域borderarea（1）边框与背景（2）边框的样式（3）边框的宽度（4）边框的颜色4.外边距区域marginarea

6.1CSS盒模型的组成和大小6.1.2盒子的大小1．盒子的宽度和高度的计算盒子的宽度=margin-left（左边距）+border-left（左边框）+padding-left（左填充）+width（内容宽度）+padding-right（右填充）+border-right（右边框）+margin-right（右边界）

6.1CSS盒模型的组成和大小2.盒子的高度盒子的高度=margin-top（上边距）+border-top（上边框）+padding-top（上填充）+height（内容宽度）+padding-bottom（下填充）+border-bottom（下边框）+margin-bottom（下边界）

6.1CSS盒模型的组成和大小#test{margin:10px20px;/*定义元素上下外边距为10px，左右外边距为20px*/padding:20px10px;/*定义元素上下内边距为20px，左右内边距为10px*/border-width:10px20px;*定义元素上下边框宽度为10px，左右边框宽度为20px*/border:solid#f00; *定义元素边框类型为实线型，颜色为红色*/width:100px;/*定义元素宽度为100px*/height:100px;/*定义元素高度为100px*/}*{margin:0;/*清除外边距*/padding:0;/*清除内边距*/}

6.1CSS盒模型的组成和大小2．盒模型的几点提示一是理解一个孤立的盒子的内部结构；二是理解多个盒子之间的相互关系。

6.1CSS盒模型的组成和大小6.1.3块级元素与行级元素的宽度和高度【例6-1】块级元素与行级元素宽度和高度的区别，本例文件6-1.html在浏览器中的显示效果，如图6-2所示。

6.1CSS盒模型的组成和大小!DOCTYPEhtmlhtmlheadmetacharset=utf-8title块级元素与行级元素/titlestyletype=text/css.special{border:1pxsolidred;/*元素边框为1px红色实线*/width:300px;/*元素宽度300px*/height:100px;/*元素高度100px*/background:yellow;/*背景色为黄色*/margin:5px;/*元素外边距5px*/}/style/headbodydivclass=special这是div元素/divspanclass=special这是span元素/span/body/html

6.1CSS盒模型的组成和大小!DOCTYPEhtmlhtmlheadmetacharset=utf-8title块级元素与行级元素/titlestyletype=text/css.special{border:3pxsolidred;/*元素边框为3px红色实线*/width:300px;/*元素宽度300px*/height:100px;/*元素高度100px*/background:ye