1 CSS盒模型

在以前，程序员们是通过表格来对一个网页进行排版，也就是通过大小不一的表格和表格嵌套来定位排版网页的内容。后来，CSS出现之后，在网页布局中，为了能够使页面中的各个部分合理的进行组织，开发人员们总结出了一套完整的、行之有效的原则和规范，也就是“盒模型”。它是通过使用CSS来定义大小不一的盒子和盒子嵌套来编排网页。

因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器。

页面中的所有元素都可以看成是一个盒子，一个页面由很多的盒子组成，这些盒子之间会相互影响，所以，掌握盒模型需要从两个方面来理解。

1. 理解一个单独的盒子的内部结构；

1. 理解多个盒子之间的相互关系；

1.1 一个独立盒子的内部结构

一个独立的盒子模型，由四个部分组成：

1. 内容；

1. padding : 内边距，也有资料将其翻译为填充；

1. border : 边框；

1. margin : 外边距，也有资料将其翻译为空白或空白边；

1.1.1 padding内边距

元素边框与元素内容之间的空白区域

padding-top 上 padding-right 右 padding-bottom 下 padding-left 左

注意：没有负值，不起作用

1.1.2 margin外边距

外边距指的是盒子与盒子之间的距离，也就是元素与元素之间的距离。

body本身也是一个盒子，在默认情况情况下，body会有一个若干像素的margin，具体数值因为各个浏览器而不尽相同。

margin的外边距属性：

margin-top 上 margin-right 右 margin-bottom 下 margin-left 左

简化设置：

margin:1px 1px 1px 1px 上 右 下 左 margin:1px 1px 1px 上 左右 下 margin:1px 1px 上下 左右 margin:1px 4个方向相同

注意：允许负值，向相反方向作用

margin的居中属性：

margin:0 auto;

可以让块级元素水平方向居中。

1.1.3 border边框

边框的属性主要有3个：

边框样式（border-style）

none 无边框 hidden 同none dashed 虚线 solid 实线 dotted 点线 double 双线

边框宽度（border-width）

1px、2px...

 边框颜色

border-top-color border-right-color border-bottom-color border-left-color

 透明边框

border-color: transparent

1.1.4 两种盒模型的区别

W3C标准盒子模型

元素空间高度 = content + padding + border + margin

IE盒子模型

元素空间高度 = content + margin

1.2 多个盒子之间的相互关系

1.2.1 DOM树

一个HTML从表面看是文本文件，从逻辑上看则具有内在的层次关系。“树”可以表示具有层次关系的结构。

任意一个HTML文档都对应一棵DOM树，body是所有对象的根节点。而该DOM树的节点如何在浏览器中表现，则由CSS确定。即HTML控制网页的结构，CSS控制网页的表现。

1.2.2 常规流布局

单独的一个盒子不难理解，实际上网页往往是很复杂的，一个网页可能存在着大量的盒子，并且它们之间以各种关系相互影响着。

为了适应各种排版要求，CSS规范的思路是：首先确定了一种标准的排版模式，这个就是“常规流”。

元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行， 除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。

1.2.3 浮动

浮动属性：

float：left,right,none,inherit(从父元素继承浮动属性的值)

1. 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

1. 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样

1. 浮动就是让框脱离文档流，并且向你需要的方向移动

浮动的特性：

1. 造成父级元素高度的塌陷；父级元素塌陷后，后面的元素会自动顶上去，但是文字不会。文字会自动环绕在四周。

1. 和对兄弟元素的位置影响；

1.2.4 清除浮动

1. overflow:hidden;

1. 清除浮动clear属性（both,left,right,none）

3. .mian:after{

content:"";

display:block;

clear:both;

}

1.2.5 position定位

position这个属性决定了元素将如何定位。它的值大概有以下五种：

position

属性值

static

relative

absolute

定位方式

position的默认值。元素将定位到它的正常位置，其实也就相当于没有定位。元素在页面上占据位置。不能用top right bottom left属性去移动元素位置。

相对定位。相对于元素的初始位置来进行定位。元素移动后，初始位置保留，在页面占据位置。而移动后的位置，元素脱离文档流，不占据页面空间。可以用top right bottom left属性去移动元素位置。

绝对定位。相对于里自己最近的且具有定位属性（不包含默认定位static属性）的祖先元素进行定位。元素脱离文档流，不占据页面空间。可以用top right bottom left属性去移动元素位置。

fixed 固定定位。相对于浏览器窗口来进行定位。其余特性和absolute一样，相当于一种特殊的absolute。

当一个元素的position属性值为absolute或fixed的时候，会发生三件事：

1. 当前元素会脱离文档流，不再占据文档流中的空间；

1. 当前元素如果为行内元素，会变为块级元素，相当于给该元素设置了display:block 属性；

1. 如果该元素为块级元素，元素的宽度由原来的100%（占据一整行），变为auto。

z-index元素的堆叠：

1.将一个元素放在另一个元素之后，默认为0，可设置正数和负数，正数为元素之上，负数为元素之后（下）

2.Z-index 仅能在定位元素上奏效（例如 position:absolute;）

图像替换技术

不论是对浏览者还是对搜索引擎，文字都是最佳的页面内容展示方式，但是，由于字体等原因的限制，纯文字的展示渐渐无法满足爱美的设计师的要求。

于是，出现了通过CSS来实现用图片替换文字的方法，这种方式既能实现页面上各种丰富的效果，又能满足搜索引擎优化的需要。

原理：

图像替换技术的原理就是在 HTML 标签中使用文字，然后用对应的图片遮盖住文字。