HTML&CSS核心速查表-块&内联、盒模型、定

2015-12-03 本文已影响322人冯走心

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

块元素共 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属性的元素清除浮动。当然，最投机取巧的方法就是直接一个<div style="clear:both;"></div>
放到当作最后一个子标签放到父标签那儿
清楚浮动推荐：
.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&CSS核心速查表-块&内联、盒模型、定

块元素共 27 个 `html5`

内联元素共 31 个 `html5`

IE盒模型与W3C标准盒模型

定位

浮动

IE浏览器hack

参考

猜你喜欢

热点阅读

HTML&CSS核心速查表-块&内联、盒模型、定

块元素 共 27 个 html5

内联元素 共 31 个 html5

IE盒模型与W3C标准盒模型

定位

浮动

IE浏览器hack

参考

猜你喜欢

热点阅读

块元素共 27 个 `html5`

内联元素共 31 个 `html5`