常见的CSS布局
各種常見的CSS布局
在工作中會經常用到很多的布局方式，這里總結一下所遇到的布局，會持續更新。
懸掛布局
實現這種布局的方式有很多，這邊主要挑兩個，如下：
方式一：使用浮動和塊級格式化上下文特性
這種方式好處是左右兩部分都會自適應。
<style type="text/css"> *{margin: 0;padding: 0; } .title{float: left; } .con{overflow: hidden;display: block; } </style> <body><p><span class="title">標題</span><span class="con">內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</span></p> </body>方式二：利用父元素壓縮自身內容區域
該方式并不能自適應左邊的部分，也就是說左邊部分必須要是一個已知的寬度，但是也有好處，好處是少使用一個DOM元素。
原理就是父元素給了一個內邊距，將自身的內容壓縮，然后讓title1**脫離文檔流**，給title1一個負外邊距定位在父元素的邊框處，這樣也是一個實現方式。
而對于怎么脫離文檔流除了使用浮動，還可以絕對定位。為什么要脫離文檔流？這個和行內格式化上下文有關，行內元素是一個接著一個排布的，如果需要左負邊距的元素沒有脫離文檔流，那么父元素的左內邊距并不能真正的擠壓內容的空間，跟在title1后面的元素還是會跟在title1后面，即使父元素有了左內邊距。
總結：其實這個懸掛布局從本質上來說也是一個兩列布局。
雙飛翼布局和圣杯布局
圣杯和雙飛翼布局解決的問題是相同的只是實現方式不同，都是左右兩列寬度固定的三列布局的解決方案，并且保持中間一列的元素在三列中的最前方，確保瀏覽器能夠盡量早的解析這部分內容。
圣杯布局
圣杯布局很早就被提出，下面參考的文章就是2006年寫的，可以說相當古老，實現思路相對于雙飛翼要難懂一點。其中有一個知識點是 margin（無論垂直還是水平方向） 百分比值是相對于父元素的width來計算的，同時padding（無論垂直還是水平方向）其實也是。
<style type="text/css"> .header{height: 50px;background: #ccc; } .container{overflow: hidden;padding: 0 100px; /*父元素上擠出了左右兩列的空間*/ } .center{float: left; /*必須要脫離文檔流塊元素才能在一樣顯示，三列都浮動了*/height: 200px;width: 100%;background: #999; } .left{float: left;margin-left: -100%; /*是相對于父元素的width的，所以是在父元素的padding-left邊界處*/position: relative;right: 100px; /*在邊界處還是不夠的，還遮住了center，還需要向左移動自身的寬度大小的距離，這里的手段是相對定位*/width: 100px;height: 200px;background: #666; } .right{float: left;margin-left: -100px; /*這里應該是在父元素padding-right的邊界處*/position: relative; left: 100px; /*同上還是不夠，需要向右移動自身的寬度大小的距離*/width: 100px;height: 200px;background: #333; } .footer{height: 50px;background: #ccc; } </style> <div class="header"></div> <div class="container"><div class="center"></div><div class="left"></div><div class="right"></div> </div> <div class="footer"></div>雙飛翼布局
雙飛翼的來歷相信不介紹大家也都有所耳聞。在學習雙飛翼布局的時候在網上找了很多的資料，但是也是這些資料給我造成了很大的困惑，在不明白雙飛翼是什么的情況下，我看到很多文章中center部分只有一個元素（DOM結構居然和圣杯布局一樣）也實現了看上去正確的三列布局，這真的很神奇。（PS：可能我寫的也是不知所云，如有謬誤感謝指正）
<style type="text/css"> .header{height: 50px;background: #ccc; } .container{overflow: hidden; /*塊級格式化上下文，來清除浮動，真正要用的時候需要.clearfix*/ } .center{float: left;width: 100%; /*浮動之后會失去自己的寬度，所以要顯示的設置寬度為100%*/height: 200px;background: #999; } .center-content{margin: 0 100px; /*我自身是沒有浮動的寬度會充滿父元素，同時父元素是100%寬，然后使用水平margin擠出左右兩欄的空間，防止自身內容被覆蓋*/height: 200px; } .left{float: left;margin-left: -100%;width: 100px;height: 200px;background: #666; } .right{float: left;margin-left: -100px;width: 100px;height: 200px;background: #333; } .footer{height: 50px;background: #ccc; } </style> <div class="header"></div> <div class="container"><div class="center"><div class="center-content"></div></div><div class="left"></div><div class="right"></div> </div> <div class="footer"></div>保持更新中。。。
參考
圣杯布局
CSS布局中圣杯布局與雙飛翼布局的實現思路差異在哪里？
總結
- 上一篇： TypeScript中怎么用接口（int
- 下一篇： CSS中的三种样式来源：创作人员、读者和