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

作者: 冯走心 | 来源:发表于2015-12-03 15:14 被阅读322次

HTML&CSS核心速查表-块&内联、盒模型、定
区块、内联和内联块的区别和转换
CSS 盒模型 BoxModel
【CSS非全解02】CSS基础-文档流
慕课网HTML+CSS基础教程(11-15章)
CSS布局模型（5.11）
BFC原理解析
CSS布局相关——盒模型和浮动
6.3盒模式
深入理解之vertical-align

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

块元素共 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浏览器*/
  }

参考

网友评论

饥人谷_曾萍:已收藏。。随时查阅。。
饥人谷_陆恩泽:mark一下，明天看。
饥人谷_关芬舍:不错不错，整理得真详细。。。我在打算整理呢。。。看了你的都不好意思了。。。- -！太专业了呵呵！
冯走心:@饥人谷_关芬舍过奖了没有~
冯走心:float 和定位还要再改改还没有完全结束这篇速查表主要就想做一个简单没那么多啰嗦的一看就知道什么意思的版本
冯走心:多谢老师我会努力的！
饥人谷_青青: 恭喜被评选为2015.12.06饥人谷最优博客！
饥人谷_若愚:总结和推荐的资源都很赞啊

本文标题：HTML&CSS核心速查表-块&内联、盒模型、定

本文链接：https://www.haomeiwen.com/subject/mklshttx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

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

块元素共 27 个 `html5`

内联元素共 31 个 `html5`

IE盒模型与W3C标准盒模型

定位

浮动

IE浏览器hack

参考

相关文章