Div+Css块状元素和内联元素css
1、块元素html
块元素（block element）通常是其余元素的容器元素,块元素通常是重新行开始,它能够容纳内联元素和其余块元素,常见块元素是段落标签“P”。“form” 这个块元素比较特殊,它只能用来容纳其余块元素。web
若是没有css的做用,块元素会顺序以每次另起一行的方式一直往下排。而有了css之后,咱们能够改变这种html的默认布局模式,把块元素摆到你想要的位置上去,而不是每次都愚蠢的另起一行。须要指出的是：table 标签也是块元素的一种，table based layout 和css based layout 从通常使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差异外，没有其余的差异。可是若是普通使用者不经意点了查
看页面源代码按钮后，二者所表现出来的差别就很是大了。基于良好重构理念设计的css布局页面源码，至少也能让没有web 开发经验的普通使用者把内容快速的读懂。从这个角度来讲，css layout code 应该有更好的美学体验。浏览器
2、内联元素ide
内联元素(inline element)通常都是基于语义级（semantic）的基本元素,内联元素只能容纳文本或者其余内联元素,常见内联元素 “a”。布局
提到内联元素,咱们会想到有个display的属性display:inline; 这个属性可以修复著名的IE双倍浮动边界问题。性能
块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差别是块元素通常都是重新行开始的。而当加入了css控制之后,块元素和内联元素的这种属性就不成为差别了。好比,咱们彻底能够把内联元素cite加上display:block 这样的属性,让它也有每次都重新行开始的属性。字体
块元素（block element）spa
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中定义下列属性中的一种,便具备块元素的特征
一、display: block;
二、float:left; （不但具备块元素的特征,同时向左侧浮动）
这时候的内联元素,虽然具备了块状元素的特征,可是这两种有一点区别,第一种：彻头彻尾和块元素如出一辙,都要单独占一行,从左至右,前提没有width 和 height属性,严格遵循流动布局模型块元素的流动布局方式,自上至下流动。第二种：大小是刚好能将内容包含,而且右侧浮动,能够多个在一行。
当加上position:absolute/relative的时候,块状元素和内联元素就不受父级区域的限制了,能够移动到任何位置,此时若是加上width和height属性,那么就具备层的特征了（加上width和height 还有一点好处,就是能够兼容IE浏览器了,全部的浏览器实现效果都同样了）。