adobe1992

常见的块状元素与内联元素小结

块状元素	内联元素
address – 地址 blockquote – 块引用 center – 举中对齐块 dir – 目录列表 div – 常用块级容易，也是CSS layout的主要标签 dl – 定义列表 fieldset – form控制组 form – 交互表单 h1 – 大标题 h2 – 副标题 h3 – 3级标题 h4 – 4级标题 h5 – 5级标题 h6 – 6级标题 hr – 水平分隔线 isindex – input prompt menu – 菜单列表 noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容 noscript – 可选脚本内容（对于不支持script的浏览器显示此内容） ol – 有序表单 p – 段落 pre – 格式化文本 table – 表格 ul – 无序列表	a – 锚点 abbr – 缩写 acronym – 首字 b – 粗体(不推荐) bdo – bidi override big – 大字体 br – 换行 cite – 引用 code – 计算机代码(在引用源码的时候需要) dfn – 定义字段 em – 强调 font – 字体设定(不推荐) i – 斜体 img – 图片 input – 输入框 kbd – 定义键盘文本 label – 表格标签 q – 短引用 s – 中划线(不推荐) samp – 定义范例计算机代码 select – 项目选择 small – 小字体文本 span – 常用内联容器，定义文本内区块 strike – 中划线 strong – 粗体强调 sub – 下标 sup – 上标 textarea – 多行文本输入框 tt – 电传文本 u – 下划线 var – 定义变量

块状元素

内联元素

address – 地址
blockquote – 块引用
center – 举中对齐块
dir – 目录列表
div – 常用块级容易，也是CSS layout的主要标签
dl – 定义列表
fieldset – form控制组
form – 交互表单
h1 – 大标题
h2 – 副标题
h3 – 3级标题
h4 – 4级标题
h5 – 5级标题
h6 – 6级标题
hr – 水平分隔线
isindex – input prompt
menu – 菜单列表
noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript – 可选脚本内容（对于不支持script的浏览器显示此内容）
ol – 有序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 无序列表

a – 锚点
abbr – 缩写
acronym – 首字
b – 粗体(不推荐)
bdo – bidi override
big – 大字体
br – 换行
cite – 引用
code – 计算机代码(在引用源码的时候需要)
dfn – 定义字段
em – 强调
font – 字体设定(不推荐)
i – 斜体
img – 图片
input – 输入框
kbd – 定义键盘文本
label – 表格标签
q – 短引用
s – 中划线(不推荐)
samp – 定义范例计算机代码
select – 项目选择
small – 小字体文本
span – 常用内联容器，定义文本内区块
strike – 中划线
strong – 粗体强调
sub – 下标
sup – 上标
textarea – 多行文本输入框
tt – 电传文本
u – 下划线
var – 定义变量

CSS文档流与块级元素（block）、内联元素（inline），这个概念实在太重要了。理解了它，一堆CSS布局的理论都变得易于理解，并且体会到CSS这套设计的合理性所在。

文档流

将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。

每个非浮动块级元素都独占一行，浮动元素则按规定浮在行的一端。若当前行容不下，则另起新行再浮动。

内联元素也不会独占一行。 几乎所有元素(包括块级，内联和列表元素）均可生成子行，用于摆放子元素。

有三种情况将使得元素脱离文档流而存在，分别是浮动，绝对定位，固定定位。 但是在IE中浮动元素也存在于文档流中（还让我觉得这样很合理><）。

浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。

浮动概念让人迷惑根源在于浏览器对理论的解读造成的。只能说很多人以IE做标准，其实它不是。

基于文档流，我们可以很容易理解以下的定位模式：

相对定位，即相对于元素在文档流中位置进行偏移。但保留原占位。

绝对定位，即完全脱离文档流，相对于position属性非static值的最近父级元素进行偏移。

固定定位，即完全脱离文档流，相对于视区进行偏移。

几个问题

作为三大基本元素之一的内联元素。它跟块级元素的主要区别在哪？
Clear属性取right值时怎么理解？貌似实验情况总跟理论不符.
内联元素是什么意思呢？什么是块级别元素？

《CSS权威指南》中文字显示：任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复，每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。

p、h1、或div等元素常常称为块级元素，这些元素显示为一块内容；Strong、span等元素称为行内元素，它们的内容显示在行中，即“行内框”。（可以使用display=block将行内元素转换成块元素，display=none表示生成的元素根本没有框，也既不显示元素，不占用文档中的空间）

行内就是在一行内的元素，只能放在行内；块级元素，就是一个四方块，可以放在页面上任何地方。
说白了，行内元素就好像一个单词；块级元素就好像一个段落，如果不另加定义的话，它将独立一行出现。
一般的块级元素诸如段落
、标题
...、列表。

常见的块状元素与内联元素小结

文档流

几个问题

你可能感兴趣的:(常见的块状元素与内联元素小结)