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浏览器*/
  }

---

参考

• HTML
  html-css列表元素uloldl的研究与应用
  html5终极备忘大全（图片版文字版）
  关于HTML5中一些被舍弃的元素及特征
  div模拟textarea文本域轻松实现高度自适应
  i, b, em, strong元素在HTML5中的新语义
  去除inline-block元素间间距的N种方法
  自适应表格连续字符换行及单行溢出点点点显示
• 盒子模型
  ie盒模型和w3c标准盒模型
• 定位
  绝对定位的非绝对定位用法
  CSS 相对|绝对(relative/absolute)定位系列（一）
  CSS 相对/绝对(relative/absolute)定位系列（二）
  CSS 相对/绝对(relative/absolute)定位系列（三）
  CSS 相对/绝对(relative/absolute)定位系列（四）
  CSS相对定位|绝对定位(五)之z-index篇
  absolute元素在text-align属性下的对齐显示
  值简介,相对底部右侧定位,理解百分比定位
• 浮动
  CSS 定位 浮动 非常详细
  CSS float浮动的深入研究、详解及拓展(一)
  CSS float浮动的深入研究、详解及拓展(二)
  拜拜了,浮动布局-基于display:inline-block的列表布局
  对overflow与zoom”清除浮动”的一些认识
• CSS其它
  我对CSS vertical-align的一些理解与认识（一）
  CSS vertical-align的深入理解(二)之text-top篇
  CSS reset的重新审视 – 避免样式重置
  精简高效的CSS命名准则/方法
  css3下的147个颜色名称及对应颜色值
  HTML5 css reset
  我所知道的几种displaytable-cell的应用
  实验：absolute/display隐藏与回流等性能
  您可能不知道的CSS元素隐藏“失效”以其妙用
  letter-spacing+first-letter实现按钮文字隐藏
  CSS计数器(序列数字字符自动递增)详解
  CSS深入理解vertical-align和line-height的基友关系
  了不起的IE7浏览器-CSS新特性-实现与思维变革
• 布局
  display:inline-block/text-align:justify下列表的两端对齐布局
  *学习
  说说CSS学习中的瓶颈