【CSS盒子模型】

1 本节目标

• 准确阐述盒子模型的4个组成部分
• 利用边框复合写法给元素添加边框
• 计算盒子的实际大小
• 利用盒子模型布局模块案例
• 给盒子设置圆角边框
• 给盒子添加阴影
• 给文字添加阴影

2 盒子模型

• 页面布局要学习三大核心：盒子模型、浮动和定位。

2.1 看透网页布局的本质

• 网页布局过程：
  1>先准备好相关的网页元素，网页元素基本都是盒子Box。
  2>利用CSS设置好盒子样式，然后摆放到相应位置。
  3>往盒子里面装内容。
• 网页布局的核心本质：就是利用CSS摆盒子。

2.2 盒子模型(Box Model)组成

• 所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
• CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框(border)、外边距(margin)、内边距（padding）和实际内容(content)。
  

2.2.1 边框(border)

• border可以设置元素的边框。边框有三部分组成：边框宽度(粗细)、边框样式、边框颜色。
• 语法：

border: border-width || border-style || border-color

• 边框的复合写法：

border: 1px solid red;没有顺序

• 边框分开写法：

border-top:1px solid red;
/*只设定上边框 其余同理*/

2.2.2 表格的细线边框

• border-collapse属性控制浏览器绘制表格边框的方式。他控制相邻单元格的边框。
• 语法：

border-collapse:collapse;
表示相邻的边框合并在一起。

• collapse是合并的意思。

• 边框会影响(额外增加)盒子实际大小。
  1>测量盒子大小的时候，不量边框。
  2>如果测量的时候包含了边框，则需要width/height减去边框宽度。

2.2.3 内边距（padding）

• padding属性用于设置内边距，即边框与内容之间的距离。
  
  
• 内边距复合写法：
  
  
• 当我们给盒子指定padding值之后，发生了2件事情：
  1>内容和边框有了距离，添加了内边距；
  2>padding影响了盒子实际大小。
  解决方案：如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。
• 如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

2.2.4 外边距(margin)

• margin属性用于设置外边距，即控制盒子和盒子之间的距离。
  
• 简写方式与padding相同。
• 外边距典型应用：
  1>外边距可以让块级盒子水平居中，但是必须满足两个条件：①盒子必须指定了宽度(width)。②盒子左右的外边距都设置为auto(自动)。

第一种写法：margin-left:auto; margin-right:auto;
第二种写法：margin:auto;
第三种写法：margin:0 auto;

• 注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align: center;即可。
  

2.2.5 外边距合并

• 使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
  
  
  
  
  
• 父子盒子用padding 兄弟盒子用margin

2.2.6 清除内外边距

• 网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
• 语法：

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

• 注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。

3 PS基本操作

• 因为网页美工大部分效果图都是利用PS(photoshop)来做的，所以以后我们大部分切图工作都是在PS里面完成。
  

4 ★★圆角边框★★

• 在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。
• border-radius属性用于设置元素的外边框圆角。
• 语法：

	border-radius:length;

• radius半径(圆的半径)原理：(椭)圆与边框的交集形成圆角效果。
  
• 参数值可以为数值或百分比的形式。
• 如果是正方形，想要设置为一个圆，把数值修改为高度或宽度的一半即可。或者直接写为50%。
• 如果是个矩形，设置为高度的一半即可。
• 该属性是一个简写属性，可以跟四个值，分别代表：左上角、右上角、右下角、左下角。可以三个值：左上、右上左下、右下 。可以两个值：左上右下、右上左下。
• 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。
  

5 ★★盒子阴影★★

• CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。
• 语法：

box-shadow: h-shadow v-shadow blur spread color inset;

• 注意：
  1>默认的是外阴影（outside），但是不可以拿这个单词，否则导致阴影无效。
  2>盒子阴影不占用空间，，不会影响其他盒子排列。

6 文字阴影

• 在CSS3中，我们可以使用text-shadow属性将阴影应用于文本。
• 语法：

text-shadow: h-shadow v-shadow blur color;