web学习（四）元素种类：区块元素，内联元素，内联块元素及区块元素在同行显示

1.区块元素

     div（盒子）、
     ul（无序列表）、ol（有序列表）、dl（定义列表）、li（列表的项）、
     p（段落）、h1~h6（网页中的标题，从大到小）、
     table（表格）、form（表单）、
     pre（源代码）、hr（分割线）   

每个元素独占一行
支持所有样式
不解析换行符
不设置宽时，宽度为0，有内容时，由内容撑开
不设置高时，高度与父元素相同

2.内联元素

   span（行间元素）、
   a（超链接）、
   b（加粗）、strong（加重）、i（斜体）、em（着重）、
   sub（下标）、sup（上标）、ins（插入）、del（删除）、
   img（图片）、
   input（表单项）、label（表单标记）、br（换行）

空间足够时，和非块元素在同一行显示
解析换行符
不支持宽高，完全由内容（文字图片）撑开，
有些标签的使用会出错，例：padding

3.内联块元素
空间足够时，和非块元素在同一行显示
解析换行符
支持宽高，不设置宽高时完全由内容（文字图片）撑开，
支持所有格式
！注意:img和input虽然都是内联元素，但是支持宽高

4.改变元素种类：

       display：block（区块元素）；
                inline（内联元素）；
                inline-block（内联块元素）；
                none（不占位元素，既隐藏）；

5.让区块元素在同行展示：
若是不做任何处理的区块元素，则如图1，
若希望区块元素在同一行展示，将元素种类改成内联块元素，如图2，
但此时会出现问题，即内联块元素解析换行符（div与div间出现空隙）
解决：

     1.将两个div标签写在同一行（不很符合书写规范）；
     2.给第二个div标签增加一个maring-left：-间隙大小的属性；
     3.给父元素设置一个font-size：0px；的标签属性（谷歌浏览器有时时更新的特点，此时最优）

6.假如想让两个div在一个父元素内展示：如图3
解决：

     1.给父元素设置一个font-size：0px；的标签属性；
     2.让子元素分别左浮动，右浮动
        缺点：子元素脱离文档流，使父元素高度崩塌
        拓展：overflow：hidden（溢出隐藏）
                        auto（撑开，破坏父元素）
                        scroll（撑开部分变成滚动条）
             清除浮动：1.clear：both；（加在两个子元素上，或后一个子元素与父元素上，亲测有效）
                      2.css伪类方法：clearfix:after{
                                         display:table;
                                         content:"";
                                         clear:both;
                                       }
.clearfix{*zoom:1} //兼容ie 触发haslayout