html的模型

在网页中，元素有三种布局模型： 1、流动模型（Flow） 2、浮动模型 (Float) 3、层模型（Layer）

 Flow:块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布.  

在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。 

div、p、table、img 等元素都可以被定义为浮动，float:left; 

层模型有三种形式：  1、绝对定位(position: absolute)  2、相对定位(position: relative)  3、固定定位(position: fixed)

1.position:absolute;     left:100px;     top:50px;

向右移动100px，向下移动50px。

2.position:relative;     left:100px;     top:50px;

相对以前的位置，向右移动100px，向下移动50px。

3.position:fixed;     left:100px;     top:50px;

因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。

组合使用：

1、参照定位的元素必须是相对定位元素的前辈元素：  <div id="box1"><!--参照定位的元素-->     <div id="box2">相对参照元素进行定位</div><!--相对定位元素--> </div> 

从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。 

 2、参照定位的元素必须加入position:relative;  #box1{     width:200px;     height:200px;     position:relative;         } 

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。 

 #box2{     position:absolute;     top:20px;     left:30px;          } 这样box2就可以相对于父元素box1定位了（注意参照物就不是浏览器了，而可以自由设置了）。

当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。

body{     font-style:italic;     font-variant:small-caps;      font-weight:bold;      font-size:12px;      line-height:1.5em;      font-family:"宋体",sans-serif; }

缩写：body{     font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif; }

颜色：color:red;

color:rgb(133,45,200);

color:rgb(20%,33%,25%);

color:#00ffff;

定宽居中显示：

width:200px;/*定宽*/     margin:20px auto;/* margin-left 与 margin-right 设置为 auto */

不定宽居中显示：

加入 table 标签 设置 

display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置

 设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的

1.table{     border:1px solid;     margin:0 auto; }

2.改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果

3.通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。

垂直居中：

height:100px;     line-height:100px;父元素

height:500px;vertical-align 为 middle；css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。

1. position : absolute    2. float : left 或 float:right

元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。