几个样式

好吧，好久没碰前端，样式也是一塌糊涂了，样式我就根本没学过好不好~~看见群里别人讨论几个样式入门的问题，我确实不知道，摘抄资料，记录下来。

1、position:

文档流：自我理解就是HTML页面的内容按照顺序依次输出到浏览器上布局。

static:position的默认值，按照正常的文档流进行排列，为了解决子元素不愿意继承父元素的position属性，用来取消继承。

fixed:一句话解释，牛逼的absolute,不过这个定位是基于浏览器窗口的，浏览器大小为1280*640，如果它定位的位置不在这个范围，它将隐藏，不会出现滚动条给机会瞧见。（IE6不支持）

下面两个属性开始支持top left bottom right跟z-index属性  top与left会覆盖bottom和right的值

relative:相对定位，即为相对于其原始位置进行定位。按照文档流，排序输出，不过top与left位置的偏移基于父元素。这里注意的是他偏离的位置是相对于他原来文档流输出的位置进行偏移，比如两个元素都有position:relative属性，第一个向下(top)偏离100px,则第二个元素的位置在第一个元素没有偏离，按照正常文档流输出后，接着的位置。

position:绝对定位，脱离出文档流，向父元素寻找，如果向上寻找的第一个父元素拥有position为relateive或者absolute属性，则停止，否则继续向上寻找，直到body，该元素的位置就是基于寻找的父元素定位，偏离的位置，以父元素的位置计算，从文档流中脱离出来，该元素接着的元素可以视为该元素已被删除，按照文档流继续排位布局。

这里注意的是如果parent设定了margin，border，padding等属性，那么这个定位点将忽略padding，将会从padding开始的地方(即只从padding的左上角开始)进行定位，也就是忽略padding，当然并不会忽略margin和border。relative则不会忽略到父元素的padding属性。

2、行内元素与块级元素

块级元素：

块级元素总是和其同级的兄弟块在竖直方向进行排列，并左右撑满

<address>     定义地址

<caption>     定义表格标题

<dd>     定义列表中定义条目

<div>     定义文档中的分区或节

<dl>     定义列表

<dt>     定义列表中的项目

<fieldset>     定义一个框架集

<form>     创建 HTML 表单

<h1>     定义最大的标题

<h2>     定义副标题

<h3>     定义标题

<h4>     定义标题

<h5>     定义标题

<h6>     定义最小的标题

<hr>     创建一条水平线

<legend>     元素为 fieldset 元素定义标题

<li>     标签定义列表项目

<noframes>     为那些不支持框架的浏览器显示文本，于 frameset 元素内部

<noscript>     定义在脚本未被执行时的替代内容

<ol>     定义有序列表

<ul>     定义无序列表

<p>     标签定义段落

<pre>     定义预格式化的文本

<table>     标签定义 HTML 表格

<tbody>     标签表格主体（正文）

<td>     表格中的标准单元格

<tfoot>     定义表格的页脚（脚注或表注）

<th>     定义表头单元格

<thead>     标签定义表格的表头

<tr>     定义表格中的行

行内元素

行内元素则与其同级的兄弟元素水平排列，呈现在一行里面

<a>     标签可定义锚

<abbr>     表示一个缩写形式

<acronym>     定义只取首字母缩写

<b>     字体加粗

<bdo>     可覆盖默认的文本方向

<big>     大号字体加粗

<br>     换行

<cite>     引用进行定义

<code>     定义计算机代码文本

<dfn>     定义一个定义项目

<em>     定义为强调的内容

<i>     斜体文本效果

<img>     向网页中嵌入一幅图像

<input>     输入框

<kbd>     定义键盘文本

<label>     标签为 input 元素定义标注（标记）

<q>     定义短的引用

<samp>     定义样本文本

<select>     创建单选或多选菜单

<small>     呈现小号字体效果

<span>     组合文档中的行内元素

<strong>     语气更强的强调的内容

<sub>     定义下标文本

<sup>     定义上标文本

<textarea>     多行的文本输入控件

<tt>     打字机或者等宽的文本效果

<var>     定义变量

可变元素素列表--可变元素为根据上下文语境决定该元素为块元素或者内联元素

<button>     按钮

<del>     定义文档中已被删除的文本

<iframe>     创建包含另外一个文档的内联框架（即行内框架）

<ins>     标签定义已经被插入文档中的文本

<map>     客户端图像映射（即热区）

<object>     object对象

<script>     客户端脚本

块级元素可以设置宽和高度值，内联元素就不行了，他们的宽和高总是随着自身的内容自动扩大和缩小

块级元素的margin和padding都正常，内联元素左右maring和左右padding正常，上下不正常不识别，也就是说不能通过margin-top和padding-top来改变行高

块级元素与行内元素可以相互转换，display:block;display:inline;前者让块级元素转换为行内元素，后者相反。

当通过display:inline;让块级元素转换为行内元素时，以前块级元素的宽度跟高度会自动忽略掉，为自身内容大小。如果通过display:inline-block;也是把块级元素转换为行内元素，可以设置宽和度，打破了块级元素和内联元素的区别。不过由于兼容性，有些浏览器不认识这个属性，不过触发了IE的haslayout(类似zoom:1),还是能支持。因此块级元素如果用这个属性的兼容写法为(display:inline;zooom:1)或 div{display:inline-block;//先触发layout}div{display:inline;}这两个顺序不能颠倒了,不然就失效了。

text-align属性在这两个不同元素表现也不同，w3c标准里说这个属性是用来对齐行内内容的，所以，不应该对块级内容起作用。行内内容是说由行内元素组成的内容，但是，问题来了，虽然标准里这么规定，

IE6/7及IE8混杂模式中，text- align:center可以使块级元素也居中对齐。其他浏览器中，text-align:center仅作用于行内内容上。

行内元素的行高会影响其它行内元素的行高，设置input{vertical-align:middle} 能够使他们对齐，FF和IE8的label标签表现正常,没有间距,IE6和IE7的label标签左右都有一定的间距,在一开始reset为0都不行,IE7左右有6像素的间距，IE6有4像素的间距，以后为了排版在各个浏览器一致的情况{margin:0 6px;*margin:0;_margin:0 2px}

3、img元素的特殊性

元素分为替换和不可替换元素，<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容，即是一个空元素，浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。

替换元素一般有内在尺寸，所以具有width和height，可以设定。例如你不指定img的width和height时，就按其内在尺寸显示，也就是图片被保存的时候的宽度和高度。

对于表单元素，浏览器也有默认的样式，包括宽度和高度。

img元素接收到 input 焦点时，并不会触发 onfocus 事件，除非该元素已经与 MAP 元素相关联。