HTML中盒子问题！

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

position:属性值

属性值有 种： absolute | fixed | relative | static | inherit

值 描述

absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit 规定应该从父元素继承 position 属性的值。

1、块状元素：

块级元素是指本身属性为display:block的元素。因为它自身的特点，我们通常使用块级元素来进行大布局（大结构）的搭建。  

布局上：独占一行，可以容纳内联元素和其他块元素

 样式上：设置width、height有效，可以设置盒子模型的相关css属性，

 在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度

 在不设置高度的情况下，块级元素的高度是它本身内容的高度

2、 行内元素：

内联元素是指本身属性为display:inline的元素。因为它自身的特点，我们通常使用块级元素来进行文字、小图标（小结构）的应用。     

布局上：和其他元素从左到右在一行排列，只能容纳文本或者其他内联元素（不要在内联元素中嵌套块级元素）

样式上：不能直接控制width、height，只能使用盒模型部分属性，如padding、line_height、margin-left、margin-right。

内联元素的宽高是由本身内容的大小决定（文字、图标等）

 3、  行内块状元素：尽可能少的占用横向空间，和其他元素都在一行上；可以设置width、height、margin、padding等盒模型相关属性。

         *常用：img、input、td。

               display:block；(将元素变为块级元素)

               display:inline；  (将元素变为行级元素)

               display：inline-block；（将元素变为行级块元素）

       a. 块元素特立独行；内联元素随波逐流。

       b.块元素通常用作网页的主要构建模块，而内联元素常用来标记小段内容（修饰文本）

       c.设计一个页面时，一般从较大的块开始 ，然后完善页面的时候再加入内联元素。      

       d. 对标签能够清晰的分类，掌握标签的特性，在选择标签时避免犹豫不决，提高布局效率。

HTML5新结构标签

HTML5-新的属性语法

HTML5图形

HTML5音视频标签

对本地离线存储的更好的支持

新的表单控件，比如 calendar、date、time、email、url、search

移除的元素：

纯表现的元素：basefont，big，center，font, s，strike，tt，u

 对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签 ： IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

所谓盒子模型就是，在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

内容（CONTENT）就是盒子里装的东西；

而填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；

边框(BORDER)就是盒子本身了；至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有d性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。

填充只有宽度属性，可以理解为生活中盒子每个HTML标记都可看作一个盒子；

---