赵工的个人空间

CSS的盒子模型与布局

一个网页，一般都需要一定的布局，以便让特定的内容显示在需要的位置上。比如常见的一种布局方式如下：

在上面的布局中，先把整个页面从上到下分为头部、菜单导航、内容、底部4个区域，然后对其中的内容区域从左到右分成大小不等的3个区域。这种分区方式就是一种布局。当然，其中每个区域还可以继续细分，类似报刊的排版。

1. 盒子模型及基本CSS设置：
早期，网页布局一般使用表格方式，使用table标记来实现，比较繁琐死板。后来发展出基于盒子模型的布局方式，也就是常说的div+css布局，这是目前网页布局中普遍使用的一种方法，灵活多变，布局基本全靠CSS相关属性来设置。
在这种div+css布局方式中，其实主要使用的是div标记。标记div是division的缩写，表示页面的一个空白分区，也被称为一个容器盒子，里面可以放置需要显示的任意内容：

在上图所示的div盒子模型中，content为盒子中需要放置显示的内容，在其外面有个边框border，border是盒子的边框，border与content之间的空白部分为padding，而border与邻近的div盒子之间的空白部分为margin。 这样，一个盒子模型由内到外是由content、padding、border、margin四部分组成，其中每部分的宽度及颜色等属性都可以通过CSS来设置，如果要实现不对称的宽度也可以分别设置每个边的属性，对每个方向进行控制。

对以上div盒子模型，可以设置相应CSS属性：
div{
   width: 200px;
   height: 50px;
   padding: 100px;
   margin: 20px;
   color: orange;
   background-color:yellow;
   border: 50px solid blue;
}

上述CSS样式中，设置了内容部分的宽度width和高度height；并给出了padding和margin宽度；还设置了前景色color和背景色background-color。注意，前景色color描述的是content部分的文本颜色，而background-color所描述的区域是border以内的部分，也就是包括padding部分的背景色，但不包括margin部分的背景色。
而其中的border为综合属性，按顺序包括了border-width、border-style、border-color三个属性值，其中border-style可以有solid、dashed、dotted常用属性值；而border-color可以使用任意CSS的合法颜色表示方法，包括颜色名、十六进制的#RGB或#RRGGBB格式、rgb(R,G,B)方式、rgba(R,G,B,A)方式、hsl(H,S,L)方式、hsla(H,S,L,A)方式。

border-style可用属性列表：

属性值	说明
hidden	隐藏边框，IE 不支持
dotted	定义边框为点线
dashed	定义边框为虚线
solid	定义边框为实线
double	定义边框为双线边框，两条线及其间隔宽度之和等于指定的border-width 值
groove	根据 border-color 定义 3D 凹槽
ridge	根据 border-color 定义 3D 凸槽
inset	根据 border-color 定义 3D 凹边
outset	根据 border-color 定义 3D 凸边

上述属性未必所有浏览器都支持，但一般都支持主要的几种线型。

2. 四个边分别进行CSS设置：
有时，为了更加细致区分border各边，把四个方向的边分为top、bottom、left、right，即border-top、border-bottom、border-left、border-right以分别设置CSS属性值，如：
border-top:5px solid red;
border-right:10px solid red;
border-bottom:5px solid red;
border-left:10px solid red;
这时，也可以缩写成为一行方式：
border:5px 10px solid red;
也可以使用以下的设置方法：
border-width:2px; /* 定义4个边都为2px*/
border-width:2px 4px; /* 定义上下边为2px,左右边为4px*/
border-width:2px 3px 4px; /* 定义上边为2px,左右边为3px,下边为4px*/
border-width:2px 3px 4px 5px; /* 定义上边2px,右边为 3px,下边为 4px，左边为5px*/
注意其中的各边的排列顺序。当然线型及颜色也可以按这个顺序来分别设置。
也可以可以按每个边及每个属性拆开来设置：
border-top-width:10px;
border-top-style:solid;
border-top-color:red;
border-right-width:10px;
border-right-style:solid;
border-right-color:red;
border-bottom-width:10px;
border-bottom-style:solid;
border-bottom-color:red;
border-left-width:10px;
border-left-style:solid;
border-left-color:red;
不过这样需要写很多行，对一些属性一样的，一般更倾向于合并来设，比较简明。
对于只有一个边不同的情况，也可以先设置所有边的共同值，然后对其中一个边单独设置不同的值，这样后设置的值会覆盖前面统一设置的CSS中对应边的属性值，这种方式简便有效。

其实，不仅boder属性可以对四个边分别设置，这种方法对padding和margin同样有效，分别使用padding-top、padding-bottom、padding-left、padding-right、margin-top、margin-bottom、margin-left、margin-right来分别设置对应的属性，当然也可以使用在一行内的缩写方法。

3. 一些CSS扩展：
1）圆角边框：
现在的浏览器一般都支持设置圆角边框，使用border-radius，可以设置四个角的圆角半径，顺序为左上角、右上角、右下角、左下角，如果有相同值也可以合并：
border-radius: 10px; /* 一个数值表示4个角都是相同的 10px 的弧度 */
border-radius: 50%; /* 100px 50% 取宽度和高度 一半 则会变成一个圆形 */
border-radius: 10px 20px; /* 左上角 和 右下角 是 10px 右上角 左下角 20 对角线 */
border-radius: 10px 20px 30px; /* 左上角 10 右上角 左下角 20 右下角30 */
border-radius: 10px 20px 30px 40px; /* 左上角 10 右上角 20 右下角 30 左下角 右下角40 */
其中的属性值，可以使用px像素，也可以使用百分比表示。

2）盒子水平居中：
对一个设置了宽度width属性的块级元素，可以使用左右margin属性为auto来使其居中：
div{ width:500px; margin:0 auto;} /* margin:0 auto 相当于 left:auto;right:auto */
3）清除盒子模型默认的padding和margin：
div{
   padding:0; /* 清除内边距 */
   margin:0; /* 清除外边距 */
}
4）margin合并：
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。 这种情况下，一般都是为一个元素添加margin-top或者 margin-bottom ，不必同时为两个元素同时加，因为不起作用。
5）嵌套块元素垂直外边距的合并：
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。 为解决这个问题，可以为父元素定义1像素的上边框或上内边距，也可以为父元素添加overflow:hidden。
6）盒子阴影：
使用box-shadow可以设置盒子阴影，这也是综合属性，属性值顺序为水平阴影、垂直阴影、模糊距离、阴影尺寸、阴影颜色、内/外阴影，对应描述为：

属性值	说明
h-shadow	水平阴影的位置，允许负值，必需值
v-shadow	垂直阴影的位置，允许负值，必需值
blur	模糊距离，可选值
spreed	阴影的尺寸，可选值
color	阴影的颜色，可使用CSS颜色各种描述方法，可选值
inset	将外部阴影改为内部阴影，可选值

box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
7）table元素的细线表格：
table{ border-collapse:collapse; }
collapse是合并的意思。
8）利用border属性画一个三角形：
div{
  width:0px;
  height:0px;
  border:50px solid white;
  border-top-color:red;
  border-bottom:none;
}
4. 块级元素与行内元素：
div元素一般情况下会显示为块级元素，即以一个块的方式显示，单独占一行或几行，与其同级的元素只能垂直排列。与div不同的如span元素为行内元素，相邻元素默认是在一行中横向排列，直到一行结束才换行。
对块级元素来说，可以设置width和height，并能设置四个边的margin和padding，一般情况下宽度默认填满父元素的宽度；而行内元素不能设置宽和高，占用宽度随内容而变化，水平方向的margin和padding有效，而垂直方向则无效。
其实，div与span的块级元素和行内元素是相应display属性的默认设置。可用的display属性见下表：

属性值	说明
none	此元素不会被显示
block	此元素将显示为块级元素，此元素前后会带有换行符
inline	此元素会被显示为内联元素，元素前后没有换行符
inline-block	行内块元素
list-item	此元素会作为列表显示
run-in	此元素会根据上下文作为块级元素或内联元素显示
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）
table-row	此元素会作为一个表格行显示（类似 <tr>）
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值

虽然列表中有多种属性，但常用的主要是none、block、inline、inline-block等几种。其中none表示此元素不显示，页面显示时认为其不存在；block为块级元素，inline为行内元素；inline-block为可以设置margin和padding的行内元素，img和input元素具有这种特性。
可以通过把div的dispaly属性值设为inline使其变为行内元素，也可以通过设置span的display属性值为block使其变为块级元素，在一些特殊应用场景下很有用。但一般不建议改变所有div或span的display属性的默认设置，这样只会造成混乱并使代码可读性变差，但可以在特定场景下改变某一个或几个div或span的display属性，可以达到特殊显示效果。

常用的块级元素还包括：

address	地址		blockquote	块引用		center	居中对齐块
dir	目录列表		div	常用块级容器		dl	定义列表
fieldset	form控制组		form	交互表单		h1	大标题
h2	副标题		h3	3级标题		h4	4级标题
h5	5级标题		h6	6级标题		hr	水平分隔线
isindex	input prompt		menu	菜单列表		noframes	frames可选内容
noscript	可选脚本内容		ol	排序表单		p	段落
pre	格式化文本		table	表格		ul	无序列表

常用的行内元素包括：

a	锚点		abbr	缩写		acronym	首字
b	粗体		bdo	bidi override		big	大字体
br	换行		cite	引用		code	源码
dfn	定义字段		em	强调		font	字体设定
i	斜体		img	图片		input	输入框
kbd	定义键盘文本		label	表格标签		q	短引用
s	中划线		samp	范例计算机代码		select	项目选择
small	小字体		span	常用内联容器		strike	中划线
strong	粗体强调		sub	下标		sup	上标
textarea	多行文本输入		tt	电传文本		u	下划线
var	定义变量

5. 浮动与清除：
虽然块级元素一般情况下需要占满一行或几行，但也可以通过设置浮动来使几个块级元素排列在同一行。这是通过设置块级元素的float属性来实现的。
div{float:left;}
块级元素的float属性值有none、left、right、inherit四种，其中none表示不浮动，left表示向左浮动，right表示向右浮动，inherit表示继承父元素的float属性值。如果块级元素设置float属性为left或right，如果父级元素宽度足够，就会浮动到父级元素下同级上一个元素的左边或右边，形成一个并排的布局形式。 这种浮动方式对于在一排中有多个div块排列时非常有用，比如本页面开始的那种布局中，内容区域就有左中右三个区域，就可以通过设置float属性来实现。

不过，如果设置了前面块级元素的float属性为left或right，后面紧随的元素会自动上升填补空余位置。如果希望后面的块级元素保持原有位置，如页面开始的布局的底部区域仍处在页面最后，就可以使用clear属性：
#footer{clear:both;}
CSS的clear属性有以下几种取值：

值	描述
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左右两侧均不允许浮动元素
none	允许浮动元素出现在两侧，默认值
inherit	规定应该从父元素继承 clear 属性的值

通过设置块级元素的clear的属性值，就可以取消前面设置的float属性影响，后面的块级元素仍旧占满一行或多行。通过块级元素的float和clear属性的设置，就可以实现各式各样的流式排版。

6. position属性与布局：

虽然通过块级元素的浮动与清除，可以处理大部分情况下需要的排版要求，但有时还需要使用绝对定位与相对定位的排版方式，比如让页面中一个块级元素与另一个块级元素前后重叠，或者总是保持一个固定的相对位置，这时就需要使用position属性来设置。 CSS的position属性有以下几种取值：

值	描述
static	没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明），默认值
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过left、top、right、bottom属性进行规定
absolute	生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位，元素位置通过left、top、right、bottom"属性进行规定
relative	生成相对定位的元素，相对于其正常位置进行定位，"left:20"会向元素的left位置添加20像素
inherit	规定应该从父元素继承 position 属性的值

注意，如果使用position方式时两个块级元素重叠在一起，需要通过设置相应的z-index不同值来形成前后关系，值大的在前面，z-index值小的块级元素会被值大的前面的块级元素遮挡住一部分。