20-盒子模型基础（CSS3）

知识目标

1.掌握div、span标签的语法与使用
2. 掌握盒子模型的概念和结构
3. 掌握盒子模型有关样式属性的语法与使用

1. div、span标签的语法与使用

1.1 div标签

<div>标签是HTML最基础的标签之一，通常用于划分网站页面的区域，完成网站页面的布局。
div标签的语法格式： <div>其他标签或内容</div>
虽然<div>标签可以替代一些具有块元素特点的标签如<h>标签、<p>标签等，但是它们在语义上有一定的区别。例如<div>标签和<h2>标签的不同在于<h2>标签具有特殊的含义，代表着标题，而<div>标签自身没有任何含义，用于网页的布局。

1.2 span标签

<span> 标签也没有特定的含义，可作为文本的容器。
<span> 标签与 <div> 标签不同，默认情况下，多个 span 标签可以存在于同一行，将按照从左到右的方式进行排列。

2. 盒子模型的概念和结构

在CSS中，每个元素被视作一个矩形的盒子，这个盒子由内容区域（content）、内边距（padding）、边框（border）和外边距（margin）4个组成。

2.1 边框（border）属性

边框属性是盒子模型的属性之一，用于给元素设置边框效果。在CSS中，边框属性包括下列属性:

设置内容	样式属性	常用属性值
边框颜色	border-color	颜色值、十六进制、rgb等
边框样式	border-style	none:无（默认）solid:单实线 dashed:虚线 dotted：点线 double：双实线
边框颜色	border-color	颜色值、十六进制、rgb等
边框宽度	border-width	像素值
边框	border	复合属性取值 border: border-width border-style border-color;
圆角边框	border-radius	像素值或百分比数值
图片边框	border-images	复合属性取值 border-image: source slice width outset repeat

2.1.1 border-style

在CSS属性中，border-style属性用于设置边框样式。
border-style属性的基本语法格式：

设置边框样式时也可以统一设置4条边的样式。在统一设置4条边的样式时，可以按照值复制原则，所谓值复制原则，是指在设置属性值时，可以按既定规则，省略部分相同的属性值。
在设置边框样式时，值复制原则：

• 设置一个属性值，代表4条边样式。
• 设置两个属性值，第1个属性值代表上边和下边，第2个属性值代表左边和右边。
• 设置三个属性值，第1个属性值代表上边，第2个属性值代表左边和右边，第3个值代表下边。

border-style属性的常用属性值

• solid：边框样式为单实线
• dashed：边框样式为虚线
• dotted：边框样式为点线
• double：边框样式为双实线
  

2.1.2 border-width

border-width属性用于设置边框的宽度。

2.1.3 border-color

border-color属性用于设置边框的颜色。
属性值可为十六进制颜色值，可为RBG颜色值或颜色英文单词，按上右下左的规则遵循值复制原则。

2.1.4 border复合属性

基本语法格式：border：宽度 样式 颜色
省略的属性将取默认值，但边框样式不能省略。不分顺序，但推荐用上述顺序。
当每一条边框样式都不相同，或者只需单独定义某一侧的边框时，可以使用单侧边框的综合属性border-top、border-bottom、border-left或border-right进行设置。
例如：p{border-top:2px solid #CCC;} /定义上边框，各个值顺序任意/

2.1.5 border-radius

在网页设计中，为了美化页面效果，经常会将边框设置为圆角样式。运用CSS3中的border-radius属性可以将矩形边框圆角化。

border-radius属性的值复制原则：

• 参数1和参数2设置一个参数值时，表式四角的圆角半径；
• 参数1和参数2设置两个参数值时，第一个参数值代表左上圆角半径和右下圆角半径，第二个参数值代表右上和左下圆角半径；
• 参数1和参数2设置三个参数值时，第一个参数值代表左上圆角半径，第二个参数值代表右上和左下圆角半径；第三个参数值代表右下圆角半径；
• 参数1和参数2设置四个参数值时，第一个参数值代表左上圆角半径，第二个参数值代表右上圆角半径，第三个参数值代表右下圆角半径，第四个参数值代表左下圆角半径。

2.1.6 border-collapse

border-collapse 是一个 CSS 属性，它主要用于控制表格边框的合并方式。
border-collapse：collapse 该取值会让表格相邻单元格的边框合并为一个单一的边框，而不是为每个单元格都绘制独立的边框。这样会使表格看起来更加简洁，没有多余的间隙。
border-collapse：separate 这是 border-collapse 的默认值。它会为每个单元格都绘制独立的边框，单元格之间会有间隔，这个间隔大小可以通过 border-spacing 属性来设置。
border-collapse: inherit 该取值会让元素继承其父元素的 border-collapse 属性值。

2.2 padding属性

内边距也被称为内填充，指的是元素内容与边框之间的距离。在CSS中padding属性用于设置内边距，padding属性也是复合属性。
内边距的设置方式: padding:上内边距 [右内边距 下内边距 左内边距]; 遵循值复制原则, 不能是负值。
也可以设置单边内边距：

• padding-top： 上内边距；
• padding-right： 右内边距；
• padding-bottom：下内边距；
• padding-left： 左内边距；

2.3 margin

外边距指的是相邻元素（盒子）之间的距离。在CSS中margin属性用于设置外边距，它是一个复合属性。
设置方法：margin:上外边距 [右外边距 下外边距 左外边距];
margin属性的取值遵循值复制的原则。外边距的属性值可以使用负值。当外边距设置为负值时，相邻元素会发生重叠。
通过单边外边距属性精准设置元素某一边的外边距：

• margin-top:上外边距;
• margin-right:右外边距;
• margin-bottom:下外边距;
• margin-left:左外边距;

在开发页面时，建议先清除标签默认的内外边距：

* {
	 padding:0;         /*清除内边距*/
	 margin:0;          /*清除外边距*/
}

2.4 width、height

在CSS中使用宽度属性width和高度属性height可以对盒子的大小进行控制。width和height的属性值可以为不同单位的数值或相对于父元素的百分比，实际工作中最常用的是像素值。
CSS规范中，盒子的width属性和height属性仅指块元素内容的宽度和高度，块元素周围的内边距、边框和外边距是单独计算的。但浏览器都采用了W3C规范。
盒子模型的宽度和高度的计算原则:

盒子的宽度= width值+左右内边距值+左右边框宽度值+左右外边距值
盒子的高度= height值+上下内边距值+上下边框宽度值+上下外边距值

3. CSS3新特性

在之前，当我们设置盒子的宽高时并不包括边距、边框的大小，仅仅是设置区域content的大小。但为了避免手动计算，CSS3出了一个属性叫box-sizing;
box-sizing: content-box; 此时设置元素的宽高仅包括内容区域(content)的大小；不包括内边距、边框、外边距；
box-sizing: border-box； 此时设置元素的宽高已包括了内容、内边距和边框的大小；但不包括外边距。