HTML学习笔记（6）-盒子模型

1. 盒子模型

在对网页的布局过程中，盒子模型是最常见的一种操作方式。

一个网页中标签默认有两类：块元素和内联元素。

块元素能够设置宽度和高度，块元素的display:block。在网页中，多个块元素之间可能需要设置间距，边框，元素的填充这种情况下就需要
通过盒子模型相关的css进行设置。

一个网页中的块元素浏览器在渲染时，得到的必定是一个矩形。这个矩形可以是其他逻辑区域的父级容器。这种情况下我们可以将这个元素称为一个盒子。

任何一个盒子都可以设置其外边距、内边距、边框等样式。这些样式构成了盒子模型。

1.1 外边距

用于设置盒子与盒子之间的距离。（个体与个体之间的距离）

每个盒子都有4个方向（上top、右right、下bottom、左left）。

  margin-top:20px; /*上外边距*/
  margin-right:20px; /*右外边距*/
  margin-bottom:20px; /*下外边距*/
  margin-left:20px; /*左外边距*/
  
  /*缩写形式*/
  margin:10px;  /*上、右、下、左4个方向的外边距都为10px*/
  margin:10px 20px; /*上下为10px，左右为20px*/
  margin:10px 20px 30px;  /*顺时针方向，上10px，右20x，下30px，左边和右边相同20px*/
  margin:10px 20px 30px 40px; /*顺时针方向，上10px，右20x，下30px，左40px*/

1.1.1 通过外边距设置盒子在父级元素中水平方向居中显示

  margin:0 auto; /*盒子在父级容器的水平居中显示*/

1.2 边框

在盒子的4个方向上设置边框。

• border-top：上边框
• border-right:右边框
• border-bottom:下边框
• border-left:左边框

具体的方向上的边框由边框的颜色，粗细，风格决定。

• border-top-color: 上边框的颜色
• border-top-width: 上边框的粗细
• border-top-style: 上边框的风格
• …
• border-left-color
• border-left-width
• border-left-style

1.2.1 边框的风格

边框的风格有实线、虚线、点线、双实线组成。

border-style:

• solid:实线
• dotted：点线
• dashed：虚线
• double：双实线

1.2.2 按方向缩写

每个边框都由颜色，粗细，风格组成，因此可以将这三个属性缩写为一个属性。

  border-方向
  
  border-top:颜色 粗细 风格;
  border-right: 颜色 粗细 风格;
  border-bottom: 颜色 粗细 风格;
  border-left: 颜色 粗细 风格;

1.2.3 4个方向相同的边框

4个方向的边框通常情况的颜色，粗细，风格为相同的。

进一步缩写：

  border:颜色 粗细 风格;  /*同时设置4个方向的颜色 粗细 风格*/

1.3 内边距

内边距也叫做填充，内边距发生在盒子的内部。内边距越大，盒子看起来就越大。内边距会影响盒子的实际宽度和高度。

  padding-top
  padding-right
  padding-bottom
  padding-left
  
  /*内边距的缩写形式*/
  padding:10px;  /*4个方向内边距为10*/
  padding:10px 20px;  /*上下10，左右20*/
  padding:10px 20px 30px; /*上10，右20，下30，左和右对应20*/
  padding:10px 20px 30px 40px; /*顺时针方向，上10px，右20x，下30px，左40px*/

1.4 计算盒子模型在网页中的实际宽高

已知边框具有宽度，内边距同样能够影响盒子的大小，因此一个盒子在网页中的实际大小默认情况下不是width和height属性设置的大小。

盒子实际宽度 = 左边框宽度 + 左内边距 + width属性宽度 + 右内边距 + 右边框
盒子实际高度 = 上边框宽度 + 上内边距 + height属性高度 + 下内边距 + 下边框

1.5 box-sizing

盒子模型的默认的宽度和高度的计算方式我们已经得知。
有一种情况是，每个在设计网页中的区域时，没有考虑边框以及内边距的问题，因此当我们按照美工的宽度和高度加上边框和内边距之后
会发现网页中的布局会出现问题。

  box-sizing:content-box; /*默认值，盒子的宽度和高度计算方式按照如上*/
  box-sizing:border-box; /**/

1.5 css3 边框圆角

在css3中，新增了border-radius属性，使矩形的盒子四个角呈圆形。

  border-radius:20px 15px 18px 30px;
  /*依次在盒子的左上角，右上角，右下角，左下角绘制圆形*/
  
  /*缩写形式，4个角都绘制半径为20px的圆*/
  border-radius:20px;

1.5.1 利用圆角边框绘制圆形

1. 盒子必须是正方形
2. 绘制的圆的半径是宽度一半

  border-radius: 50%;

1.5.2 利用圆角边框绘制半圆

1. 盒子必须是长方形
2. 宽度是高度的2倍或者高度是宽度的2倍

1.5.3 利用圆角边框绘制扇形

1. 正方形
2. 绘制圆的半径等于边长
3. 一个角绘制角度，其他三个角不需要绘制

1.6 盒子阴影

css3中为盒子新增了阴影的效果。在盒子的4周显示阴影效果。

  /*
  	x-offset: 正数，阴影在盒子的右边。反之负数在盒子的左边
  	y-offset: 正数，阴影在盒子的下边，反这负数在盒子的上边
  */
  box-shadow:x-offset y-offset radius [size] color [inset];
  

多个重阴影之间通过逗号分隔。

  box-shadow:x-offset y-offset radius [size] color [inset],x-offset y-offset radius [size] color [inset];