第9章盒子模型主讲教师：朱铁樱《Web前端开发》
9.1盒子模型概述盒子模型是网页布局的基础，读者只有掌握了盒子模型的各种规律和特征，才可以更好地控制网页中各个元素。项目中将详细讲解盒子模型的概念、盒子模型相关属性、元素类型、元素类型转换、div标签、span标签等知识，带领初学者运用盒子模型划分网页模块。
9.1盒子模型概述在浏览网站时，我们会发现网站页面的内容都是按照区域划分的。在网站页面中，每一块区域分别承载不同的内容，使得网站页面的内容虽然零散，但是在版式排列上依然清晰有条理。
9.1盒子模型概述内容：手机可以看做盒子模型的内容。宽度和高度：手机盒子的大小代表盒子模型的宽度和高度。内边距：填充泡沫可以看做盒子模型的内边距。边框：纸盒的厚度可以看做盒子模型的边框。外边距：当多个手机盒子放在一起时，它们之间的距离为盒子模型的外边距。
9.2内边距内边距也被称为内填充，指的是元素内容与边框之间的距离。在CSS中padding属性用于设置内边距，padding属性是复合属性。Padding分为四个方向，顺序上、右、下、左。padding属性的基本语法格式padding:上内边距[右内边距下内边距左内边距];注意：1、padding相关属性的取值可为auto、不同单位的数值、相对于父元素（或浏览器）宽度的百分比。2、内边距属性值为百分比是相对于父元素宽度width的百分比，内边距随父元素width的变化而变化，和高度height无关。
9.2内边距
9.2内边距
外边距指的是相邻元素之间的距离。在CSS中margin属性用于设置外边距，它是一个复合属性。margin分为四个方向，顺序上、右、下、左。margin属性的基本语法格式margin:上外边距[右外边距下外边距左外边距];9.3外边距注意：1、外边距设置为负值时，相邻元素会发生重叠。2、如果没有明确定义标签的宽度和高度时，内边距相比外边距的容错率高。
9.3外边距
9.3外边距标准流中，垂直方向的margin不叠加，以较大的为准，叫做margin的塌陷现象。水平方向没有此现象。如果不在标准流中（盒子浮动），则两个盒子之间是没有塌陷现象。
9.3外边距margin的值可以为auto，表示自动，盒子相对于整个页面布局会水平居中。使用margin:0auto居中的限制条件：必须有明确的width，否则无效，必须处于标准流中，否则无效。表示盒子居中，而不是盒子中的文本居中，文本居中使用text-align:center。
9.3外边距有一些标签默认带有padding、margin，如ul标签。网页设计时为了便于控制标签的样式，先清除默认的padding、margin。可以使用通配符删除，但效率较低。可以使用组选择器清除默认的padding、margin。
9.4边框边框属性用于给元素设置边框效果。在CSS中，边框属性包括边框样式属性、边框宽度属性、边框颜色属性、边框综合属性。同时为了进一步满足设计需求，CSS3中还增加圆角边框属性、图片边框属性。设置内容样式属性常用属性值边框样式border-stylenone：无（默认）solid：单实线、dashed：虚线dotted：点线、double：双实线边框宽度border-width像素值边框颜色border-color颜色的英文单词、十六进制颜色值、rgb颜色值边框综合属性border复合属性取值
9.4边框在CSS属性中，border-style属性用于设置边框样式，必须按上、右、下、左的顺时针顺序书写边框样式的属性值，各属性值之间用空格分隔。border-style属性的基本语法格式border-style:上边[右边下边左边];设置边框样式时既可以针对4条边分别设置，也可以统一设置4条边的样式。在统一设置4条边的样式时，可以按照值复制原则。（1）边框属性-边框样式（border-style）
9.4边框值复制原则，是指在设置属性值时，可以按既定规则，省略部分相同的属性值。设置一个属性值，代表4条边样式。设置两个属性值，第1个属性值代表上边和下边，第2个属性值代表左边和右边。设置三个属性值，第1个属性值代表上边，第2个属性值代表左边和右边，第3个值代表下边。（1）边框属性-边框样式（border-style）
9.4边框在CSS中，border-width属性用于设置边框的宽度，border-width属性常用取值为像素值。border-width属性的基本语法格式border-width:上边[右边下边左边];（2）边框宽度（border-width）
9.4边框在CSS3中，border-color属性用于设置边框的颜色。border-color的属性值