Div+Css块状元素和内联元素
Div+Css块状元素和内联元素
一、块元素
块元素（block element）一般是其他元素的容器元素,块元素一般是从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签“P”。“form” 这个块元素比较特殊,它只能用来容纳其他块元素。
如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆到你想要的位置上去,而不是每次都愚蠢的另起一行。需要指出的是：table 标签也是块元素的一种，table based layout 和css based layout 从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。但是如果普通使用者不经意点了查
看页面源代码按钮后，两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码，至少也能让没有web 开发经验的普通使用者把内容快速的读懂。从这个角度来说，css layout code 应该有更好的美学体验。
二、内联元素
内联元素(inline element)一般都是基于语义级（semantic）的基本元素,内联元素只能容纳文本或者其他内联元素,常见内联元素 “a”。
提到内联元素,我们会想到有个display的属性display:inline; 这个属性能够修复著名的IE双倍浮动边界问题。
块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都是从新行开始的。而当加入了css控制以后,块元素和内联元素的这种属性就不成为差异了。比如,我们完全可以把内联元素cite加上display:block 这样的属性,让它也有每次都从新行开始的属性。
块元素（block element）
address -地址 blockquote -块引用 center -居中对齐块
dir -目录列表 div -常用的块级元素,也是css layout的主要标签
dl -定义列表 filedset -form控制组 form -交互表单
h1 -大标题 h2 -副标题 h3 -3级标题
h4 -4级标题 h5 -5级标题 h6 -6级标题
hr -水平分割线 menu -菜单列表 ol -排序表单
p -段落 table -表格 ul -非排序列表
内联元素(inline element)
a -锚点 abbr -缩写 acronym -首字
b -粗体(不推荐) big -大字体 br -换行
cite -引用 code -计算机代码（在引用源代码的时候需要）
dfn -定义字段 em -强调 font -字体设定（不推荐）
i -斜体 img -图片 input -输入框
kbd -定义键盘文本 label -表格标签 q -短引用
s -中划线（不推荐） smap -定义范例计算机代码 select -项目选择
small -小字体文本 span -常用内联容器,定义文本区块
strike -中划线 strong -粗体强调 sub -下标
sup -上标 textarea -多行文本输入框 tt -电传文本
u -下划线 var -定义变量
当内联元素,在css中定义下列属性中的一种,便具有块元素的特征
1、display: block;
2、float:left; （不但具有块元素的特征,同时向左侧浮动）
这时候的内联元素,虽然具有了块状元素的特征,但是这两种有一点区别,第一种：彻头彻尾和块元素一模一样,都要单独占一行,从左至右,前提没有width 和 height属性,严格遵循流动布局模型块元素的流动布局方式,自上至下流动。第二种：大小是恰好能将内容包含,并且右侧浮动,可以多个在一行。
当加上position:absolute/relative的时候,块状元素和内联元素就不受父级区域的限制了,可以移动到任何位置,此时如果加上width和height属性,那么就具有层的特征了（加上width和height 还有一点好处,就是可以兼容IE浏览器了,所有的浏览器实现效果都一样了）。
