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浏览器了,所有的浏览器实现效果都一样了）。