CSS 布局技巧-基础网页布局、圣杯布局、双飞翼布局

概述

image.png

image.png

image.png

image.png

概要

image.png

CSS基础布局

image.png

image.png

• 源码

    
    
    


    

        

            我是header
        
        

            
            

                中间
            
            

                左
            
            

                右
            

            

        
        

            版权信息
        
    

• 在浏览器中展现的效果，上面将 .content 的高度设置为了 300px 才会出现下面这样的情况，请接着看下面的 【圣杯布局】 演示

image.png

image.png

圣杯布局

image.png

• 这里还是照着上面的基础布局的基础上进行代码的修改
• 源码

    
    
    


    

        

            我是header
        
        

            
            

                中间
            
            

                左
            
            

                右
            

            

        
        

            版权信息
        
    

• 整个的步骤
  • .middle{float:left;width:100%;}
  • .left{width:100px;margin-left:-100%;}
  • .right{float:left;width:150px;margin-left:-150px;}
  • 再给容器 .content 加了 padding-left:100px;padding-right:150px;
  • .left{position:relative;left:-100px;}
  • .right{position:relative;left:150px;}
• 在浏览器中的效果图

image.png

双飞翼布局

image.png

• 这里是照着上面的圣杯布局的基础上进行代码的修改
• 源码

    
    
    


    

        

            我是header
        
        

            
            

                

                    中间
                
            
            

                左
            
            

                右
            

            

        
        

            版权信息
        
    

• 在浏览器中的效果图

image.png

• 整个的步骤
  • 将 .left 和 .right 中的 position 属性全都去掉，将 .content 的 padding 也都去掉
  • 之后再在 .middle 元素中增加一个 div.inner 元素
  • 给这个元素设置样式 .middle .inner{margin-left:100px;magin-right:150px;}

扩展

• 还是参照着上面最后完成的【双飞翼】布局的源码，如果说 .left .right .inner 这三个元素不设置固定的高度，就会出现下面的问题，这里我给 .inner 设置了一个背景颜色 blueviolet

image.png

• 接下来我们要实现的就是如何使三列布局可以等高
• 源码

    
    
    


    

        

            我是header
        
        

            
            

                

                    中间
                
            
            

                左
            
            

                右
            

            

        
        

            版权信息
        
    

• 在浏览器中的效果图，这样就完美的实现了等高的需求了

image.png

• 整个的步骤

  • 给 .left .right .inner 都加上两个样式 padding-bottom:9999px;margin-bottom:-9999px;
  • 再给 .content 加上 overflow:hidden;

• 上面的 padding 是增加了元素的高度，margin 是变相的将增加的高度给减去了，尽管在视觉上市一样的效果，这个 margin 是必须要加上的，这样值相互抵消使得元素也就是这个盒子模型中的内容还是在原来的位置上