html5浮动层选择列表,HTML&CSS核心速查表-块&内联、盒模型、定位、浮动、兼容性、其它。。。...

目的就是想写一个核心知识的简洁明了的文档于人于己都方便,方便日后工作忘记的知识点查询使用一片文档就搞定，把所有核心的知识点能结合的全部结合进来，一来是以免以后忘记，二来是看来看去好多篇文章，通篇全是文字描述真的很啰嗦，顾名思义叫做速查表。目前的阶段还未完成，还要完善。很多内容都是查询各种官方和非官方的一些资料，包括一些前端大牛的流弊思想，如果错误的地方请给予指正！ 斯密马赛！

块元素 共 27 个 html5

块级元素的 width 默认为 100%

元素名称|语义| 独占一行 | 宽高| margin| padding|

-------|----|----|----|----|----|----|----|

address | 联系方式信息| Y| Y| Y| Y

figcaption| 图文信息组标题| Y| Y| Y| Y

article| 文章内容| Y| Y| Y| Y

figure| 图文信息组| Y| Y| Y| Y

output| 表单输出| Y| Y| Y| Y

aside| 伴随内容| Y| Y| Y| Y

footer| 区段尾或页尾| Y| Y| Y| Y

audio| 音频播放| Y| Y| Y| Y

section| 一个页面片段| Y| Y| Y| Y

canvas| 绘制图形| Y| Y| Y| Y

header| 区段头或页头| Y| Y| Y| Y

hgroup| 标题组| Y| Y| Y| Y

video| 视频| Y| Y| Y| Y

dl、dd| 自定义列表| Y| Y| Y| Y

ol| 有序列表| Y| Y| Y| Y

ul| 无序列表| Y| Y| Y| Y

p| 行| Y| Y| Y| Y

blockquote| 块引用| Y| Y| Y| Y

form| 表单| Y| Y| Y| Y

pre| 预格式化文本| Y| Y| Y| Y

hr|水平分割线| Y| Y| Y| Y

h1~h6| 标题级别 1-6.| Y| Y| Y| Y

table|表格| Y| Y| Y| Y

tfoot|表脚注| Y| Y| Y| Y

div|文档分区| Y| Y| Y| Y

fieldset|表单元素分组| Y| Y| Y| Y

noscript|不支持脚本或禁用脚本| Y| Y| Y| Y

内联元素 共 31 个 html5

内联元素的width 自身内容宽度。

内联元素可以设置line-height 改变高度

内联元素可以设置左右的 margin、padding

元素名称|语义| 独占一行 | 宽高| margin| padding|

-------|----|----|----|----|----|----|----|

a | 锚点| N| N| 上下无效 | 上下无效

abbr | 缩写| N| N| 上下无效 | 上下无效

acronym |首字| N| N| 上下无效 | 上下无效

b | 粗体(不推荐)| N| N| 上下无效 | 上下无效

bdo| bidi override| N| N| 上下无效 | 上下无效

big|大字体| N| N| 上下无效 | 上下无效

br |换行| N| N| 上下无效 | 上下无效

cite |引用| N| N| 上下无效 | 上下无效

code | 计算机代码(在引用源码的时候需要)| N| N| 上下无效 | 上下无效

dfn| 定义字段| N| N| 上下无效 | 上下无效

em | 强调| N| N| 上下无效 | 上下无效

font | 字体设定(不推荐)| N| N| 上下无效 | 上下无效

i| 斜体| N| N| 上下无效 | 上下无效

img | 图片| N| N| 上下无效 | 上下无效

input | 输入框| N| N| 上下无效 | 上下无效

kbd | 定义键盘文本| N| N| 上下无效 | 上下无效

label | 表格标签| N| N| 上下无效 | 上下无效

q| 短引用| N| N| 上下无效 | 上下无效

s| 中划线(不推荐)| N| N| 上下无效 | 上下无效

samp | 定义范例计算机代码| N| N| 上下无效 | 上下无效

select | 项目选择| N| N| 上下无效 | 上下无效

small | 小字体文本| N| N| 上下无效 | 上下无效

span | 常用内联容器，定义文本内区块| N| N| 上下无效 | 上下无效

strike | 中划线| N| N| 上下无效 | 上下无效

strong | 粗体强调| N| N| 上下无效 | 上下无效

sub | 下标| N| N| 上下无效 | 上下无效

sup| 上标| N| N| 上下无效 | 上下无效

textarea | 多行文本输入框| N| N| 上下无效 | 上下无效

tt| 电传文本| N| N| 上下无效 | 上下无效

u| 下划线| N| N| 上下无效 | 上下无效

var| 定义变量| N| N| 上下无效 | 上下无效

IE盒模型与W3C标准盒模型

内联元素的width 自身内容宽度。

内联元素可以设置line-height 改变高度

内联元素可以设置左右的 margin、padding

eg：一个div设置width是500px(因为我们肯定设置的时候是设置div的宽度 而不会设置内容宽度具体是多少)

在标准盒模型中 盒子实际宽度 = 500px+padding+border (500即为内容宽度 )

在ie的盒模型中 盒子实际宽度 = 500px(这个500是包含了内容宽度 padding 和border)

转过来想 实际的内容的宽度：

标准下=500px ；

ie下=500-padding-border(这下与图中的事例正好吻合了)

简单地说：

标准盒摸型盒子的实际宽度是 width+padding+border ；

ie的盒摸型盒子的实际宽度是 就是width

定位

position 属性规定元素的定位类型。有以下 5 种值可供选择。

relative 一般配合absolute使用，先相对后绝对，否则绝对定位的元素会找到最上层的父元素就是视窗本身了。

fixed是一种特殊的绝对定位，对其设置的偏移量永远是相对于视窗本身。我们常见到的导航条固定在页面顶部，回到页面顶部按钮基本都是采用此定位方式。

值|描述|偏移|层级|定位后display|

-------|----|

static|默认值。没有定位，元素出现在正常的流中|||

relative|相对定位，相对于其正常位置进行定位。|top right bottom left |z-index |不改变

absolute|绝对定位 相对于static定位以外的第一个父元素进行定位。|top right bottom left |z-index |inline-block

fixed|绝对定位，相对于浏览器窗口进行定位。|top right bottom left |z-index |block

inherit|从父元素继承，IE8之前不支持。|||

浮动

float

浮动就是个带有方位的display:inline-block属性”。

left

right

IE下清除浮动准则很简单，使元素haslayout就可以了。如宽度值，高度值，绝对定位，zoom，浮动本身都可以让元素haslayout。显然，首选zoom:1;不会干扰任何样式。

非IE浏览器常用的是overflow属性，overflow:hidden;或是overflow:scroll都可以，不过由于后者经常一不小心出现滚动条，所以前者用的更多些。由于现代浏览器都支持after伪类伪元素，所以常常也会用after写入一个clear属性的元素清除浮动。当然，最投机取巧的方法就是直接一个

放到当作最后一个子标签放到父标签那儿

清楚浮动推荐：

.fix{zoom:1;}

.fix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}

IE浏览器hack

.ie6_7_8{

color:blue; /*所有浏览器*/

color:red\9; /*IE8以及以下版本浏览器*/

*color:green; /*IE7及其以下版本浏览器*/

_color:purple; /*IE6浏览器*/

}

参考