网页布局及display属性

标准文档流

标准文档流组成

块级元素（block）

• • • …

      、

      、

      、列表

内联元素（inline）

• • • 、、、...

经验：

内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立

 

display属性

                   

示例

       display:inline;

                             

      display:inline;

                            

     display:inline-block;

                           

       display:none;       //隐藏起来

                          

        

display特性

                块级元素与行级元素的转变（block,inline）

                控制块元素排到一行（inline-block）

                控制元素的显示和隐藏（none）

浮动

             float属性

                          

            

示例:

……

 

 

 

 

浮动的盒子……

 

设置浮动后会脱离文档 提高层级

display:Inline-block和float的区别：

display:inline-block

                     可以让元素排在一行，并且支持宽度和高度，代码实现起来方便。

                     位置方向不可控制，会解析空格。

                     IE 6，IE 7以上支持

Float

                     可以让元素排在一行并且支持宽度和高度，可以决定排列方向。

                     float浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式。

 

清除浮动

         clear属性

                     

 

示例：img{

                     clear:both;     //清除左右浮动

}

 

解决父级边框塌陷的方法

 

                    

                         

           

                          

                          

浮动的盒子……

#father {height: 400px; border:1px #000 solid; }

 

                     解决父级边框塌陷的方法

父级添加overflow属性

 

 

 

 

浮动的盒子……

#father {overflow: hidden;border:1px #000 solid; }

                                   overflow属性

            

解决父级边框塌陷的方法

                

父级添加伪类after

             

                          

           

           

                         

浮动的盒子……

.clear:after{

    content: '';          /*在clear类后面添加内容为空*/

    display: block;      /*把添加的内容转化为块元素*/

    clear: both;         /*清除这个元素两边的浮动*/

}

 

小结：

1.          清除浮动，防止父级边框塌陷的四种方法
   1. 浮动元素后面加空div
      • 简单，空div会造成HTML代码冗余
   2. 设置父元素的高度
      • 简单，元素固定高会降低扩展性
   3. 父级添加overflow属性
      • 简单，下拉列表框的场景不能用
   4. 父级添加伪类after
      • 写法比上面稍微复杂一点，但是没有副作用，推荐使用

 

 

总结