在php中页面布局 3列左右侧固定中间自适应居中,css三列布局--两边固定中间自适应和中间固定两边自适应...
三列布局
本篇講三列布局，面試常考題，自己總結的，如有什么問題，歡迎指出！我會用紅色標注出主要作用部分，都是最精簡的寫法，，沒有多余的修飾。
布局方式一:兩邊固定中間自適應
1.flex布局
思路：將父元素box設為display:flex;可將box設置為彈性盒模型進行布局(如果對flex不了解，可點擊打開鏈接學習)
#box{
width:100%;
height:100px;
display:flex;
margin:10px;
}
#left,#right{
width:200px;
height:100px;
margin:10px;
background-color:#999;
}
#center{
flex:1;
height:100px;
margin:10px;/*左右margin不會疊加*/
background-color:#f00;
}
leftcenterright2.利用浮動(float)
讓左右元素浮動，缺點是中間元素必須置于二者之后，不然right元素會進入下一行
.left,.right{
width:200px;
height:200px;
background-color:#999;
}
.left{
float:left;
}
.right{
float:right;
}
.center{
margin:0 200px;
height:300px;
background-color:#f00;
}
leftrightcenter3.利用絕對定位(position)
center居中并利用margin為左右兩邊留出位置，左右絕對定位
css三列布局/*左右固定，中間自適應 利用絕對定位*/
.container{
width: 100%;
height: 100%;
position: relative;
}
.left{
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 200px;
background-color: black;
color:#fff;
}
.center{
/*width: auto;*/ /*如果沒有這一句，那么，center這個div的文字就不會自動換行*/
margin: 0 400px;
height: 400px;
background-color: yellow;
}
.right{
position: absolute;
top: 0;
right: 0;
width: 400px;
height: 300px;
background-color: red;
}
leftcenterright4.對中間的寬度進行calc計算
三個元素都向左浮動，左右定寬，中間的對其進行計算，讓100%寬度減去左右寬度，即為中間寬度。
.container{
overflow: hidden;
}
.left,.right{
float: left;
width: 100px;
background:red;
}
.center{
float: left;
width:calc(100% - 200px);
background:yellow;
}
leftcenterright5.雙飛翼布局(重點來了)
目的：為了優先顯示中間主要部分，瀏覽器渲染引擎在構建和渲染渲染樹是異步的(誰先構建好誰先顯示)，故在編寫時，先構建中間main部分，但由于布局原因，將left置于center左邊，故而出現了雙飛翼布局。
body {min-width: 550px;}
.col {float: left;}
#main {
width: 100%;
height: 200px;
background-color: #ccc;
}
#main-wrap {
margin: 0 190px;/*這是圣杯和雙飛翼最明顯的區別，在main內部使用的是margin，而圣杯是直接在container部分使用padding*/
}
#left,#right {
width: 190px;
height: 200px;
background-color: #0000FF;
}
#left{
margin-left: -100%;
}
#right {
margin-left: -190px;
background-color: #FF0000;
}
#main #left#right這種布局的好處是：兩邊(left和right)不會蓋住中間(center)部分，left和right蓋住的是wrap元素的兩邊，即main-wrap的margin部分。
6.圣杯布局(也是重點)
優先渲染主要部分,此部分參考了木羽zwwill
.wrapper {
padding: 0 100px;
overflow:hidden;
}
.col {
position: relative;
float: left;
}
.main {
width: 100%;
height: 200px;
background:yellow;
}
.left,.right {
width: 100px;
height: 200px;
background:red;
}
.left{
margin-left: -100%;
left: -100px;
}
.right {
margin-left: -100px;
right: -100px;
}
main
left
right
圣杯布局的缺點：正常情況下是沒有問題的，但是特殊情況下就會暴露此方案的弊端，如果將瀏覽器無線放大時，「圣杯」將會「破碎」掉。如圖，當main部分的寬小于left部分時就會發生布局混亂。
圣杯布局和雙飛翼的區別：(按我自己理解)
圣杯布局是整體使用了一個container(上例的wrapper)，將三列放入其中，left和right占據的是wrapper的padding-left和 padding-right(上例第八行padding:0 100px;)。
雙飛翼布局是在center部分多加了一個節點元素，left和right部分的位置在main-wrap的margin(magin-left和margin-right)部分。
#main布局方式二:兩邊自適應中間固定
1.css3布局
目前沒有瀏覽器支持 box-flex 屬性。Firefox 支持替代的 -moz-box-flex 屬性。Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 屬性。
box-flex 屬性規定框的子元素是否可伸縮其尺寸。提示：可伸縮元素能夠隨著框的縮小或擴大而縮寫或放大。只要框中有多余的空間，可伸縮元素就會擴展來填充這些空間。
div[class=me] {
display: -webkit-box;
}
div div {
background: red;
height: 100px;
}
div div:nth-child(1) {
-webkit-box-flex:1;
}
div div:nth-child(2) {
width: 800px;
background: #ccc;
}
div div:nth-child(3) {
-webkit-box-flex:1;
}
leftcenterright2.flex布局
*{
margin:0;
padding:0;
}
.wrap{
display:flex;
flex-direction:row;
margin-top:20px;
}
.center{
width:800px;
text-align:center;
background:#ccc;
}
.left,.right{
/*flex-grow 屬性用于設置或檢索彈性盒的擴展比率。*/
flex-grow: 1;
line-height: 30px;
background:red;
}
leftcenterright利用flex-grow進行布局，詳見flex-grow屬性
3.左右利用calc()函數計算
#container{
height:200px;
width: 100%;
}
#left,#right{
float:left;
background-color:#ccc;
height:100%;
width: calc(50% - 500px);
}
#center{
float:left;
background-color:yellow;
height:100%;
width:1000px;
}
leftcenterright兩邊自適應中間固定暫時整理到這三種方法。
超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生總結
以上是生活随笔為你收集整理的在php中页面布局 3列左右侧固定中间自适应居中,css三列布局--两边固定中间自适应和中间固定两边自适应...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java使用varargs,Java 实
- 下一篇： 动态规划算法php,php算法学习之动态