水平居中
水平居中的頁面布局中最爲常見的一種布局形式,多出現於標題,以及内容區域的組織形式,下面介紹四種實現水平居中的方法(注:下面各個實例中實現的是child元素的對齊操作,child元素的父容器是parent元素)
ine-block 和 text-align實現
.parent{text-align: center;} .child{display: inline-block;}
優點:兼容性好;不足:需要同時設置子元素和父元素
使用margin:0 auto來實現
.child{width: 200px; margin: 0 auto;}
優點:兼容性好缺點: 需要指定寬度
使用table實現
.child{display: table; margin: 0 auto;}
優點:只需要對自身進行設置不足:IE6,7需要調整結構
使用絕對定位實現
.parent{position:relative;} /*或者實用margin-left的負值爲盒子寬度的一半也可以實現, 不過這樣就必須知道盒子的寬度,但兼容性好*/.child{ position:absolute; left:50%; transform:translate(-50%); }
不足:兼容性差,IE9及以上可用
實用flex布局實現
/*第一種方法*/ .parent{ display:flex; justify-content:center;}/*第二種方法*/ .parent{ display:flex; } .child{ margin:0 auto; }
缺點:兼容性差,如果進行大面積的布局可能會影響效率
垂直居中
vertical-align
我們都知道,每個人都有不同的嗜好,有的人喜歡吃甜食,有的人喜歡吃辣的東西,有的人不喜歡吃芹菜,有的人不喜歡吃羊肉等等。CSS中的有些元素也是這樣,他們有的只對牛嬭感興趣,有的只喜歡吃堅果和果凍,而討厭牛嬭。而vertical-align呢,是個比較挑食的家夥,它只喜歡吃果凍,從小吃果凍長大,沒有了果凍,它就會閙脾氣,對你不理不睬。我稱之爲“果凍依賴型元素”,又稱之爲“inline-block依賴型元素”,也就是說,只有一個元素屬於inline或是inline-block(table-cell也可以理解爲inline-block水平)水平,其身上的vertical-align屬性才會起作用。
在使用vertical-align的時候,由於對齊的基線是用行高的基線作爲標記,故需要設置line-height或設置display:table-cell;
/*第一種方法*/ .parent{ display:table-cell; vertical-align:middle; height:20px; } /*第二種方法*/ .parent{ display:inline-block; vertical-align:middle; line-height:20px; }
實用絕對定位
.parent{position:relative;} .child{ positon:absolute; top:50%; transform:translate(0,-50%); }
實用flex實現
.parent{ display:flex; align-items:center; }
水平垂直全部居中
利用vertical-align,text-align,inline-block實現
.parent{ display:table-cell; vertical-align:middle; text-align:center; } .child{display:inline-block;}
利用絕對定位實現
.parent{position:relative;} .child{ position:absolute; top:50%;left:50%; transform:translate(-50%,-50%); }
利用flex實現
.parent{ display:flex; justify-content:center; align-items:center; }
多列布局
左列定寬,右列自適應
該布局方式非常常見,適用於定寬的一側常爲導航,自適應的一側爲内容的布局
利用float+margin實現
.left{ float:left;width:100px; } .right{ margin-left:100px; }
注:IE6會有3px的bug
利用float+margin(fix)實現
<div class="parent"> <div class="left"></div> <div class="right-fix"> <div class="right"></div> </div> </div>
.left{ width:100px;float:left; } .right-fix{ width:100%; margin-left:-100px; float:right; } .right{ margin-left:100px; }
使用float+overflow實現
.left{ width:100px;float:left; } .right{ overflow:hidden; }
overflow:hidden,觸發bfc模式,浮動無法影響,隔離其他元素,IE6不支持,左側left設置margin-left當作left與right之間的邊距,右側利用overflow:hidden 進行形成bfc模式如果我們需要將兩列設置爲等高,可以用下述方法將“背景”設置爲等高,其實並不是内容的等高
.left{ width:100px;float:left; } .right{ overflow:hidden; } .parent{ overflow:hidden; } .left,.right{ padding-bottom:9999px; margin-bottom:-9999px; }
使用table實現
.parent{ display:table; table-layout:fixed; width:100%; } .left{ width:100px; } .right,.left{ display:table-cell; }
實用flex實現
.parent{display:flex;} .left{width:100px;} .right{flex:1;}
利用右側容器的flex:1,均分了剩餘的寬度,也實現了同樣的效果。而align-items 默認值爲stretch,故二者高度相等
右列定寬,左列自適應
實用float+margin實現
.parent{ background:red; height:100px; margin:0 auto; } .left{background:green; margin-right:-100px; width:100%; float:left; } .right{ float:right; width:100px; background:blue; }
使用table實現
.parent{ display:table; table-layout:fixed; width:100%; } .left{display:table-cell;} .right{ width:100px; display:table-cell; }
實用flex實現
.parent{display:flex;} .left{flex:1;} .right{width:100px;}
兩列定寬,一列自適應
基本html結構爲父容器爲parent,自容器爲left,center,right.其中,left,center定寬,right自適應
利用float+margin實現
.left,.center{ float:left:width:200px; } .right{margin-left:400px;} 利用float+overflow實現 .left,.center{ float:left:width:200px; } .right{overflow:hidden;}
利用table實現
.parent{ display:table; table-layout:fixed; width:100%; } .left,.center,.right{ display:table-cell; } .left,.center{width:200px;}
利用flex實現
.parent{display:flex;} .left,.center{width:100px;} .right{flex:1}
兩側定寬,中欄自適應
利用float+margin實現
.left{width:100px;float:left;} .center{ float:left; width:100%; margin-right:-200px; } .right{width:100px;float:right;}
利用table實現
.parent{ width:100%; display:table; table-layout:fixed } .left,.center,.right{ display:table-cell; } .left{width:100px;}.right{width:100px;}
利用flex實現
.parent{display:flex;} .left{width:100px;} .center{flex:1;} .right{width:100px;}
一列不定寬,一列自適應
利用float+overflow實現
.left{float:left;} .right{overflow:hidden;}
利用table實現
.parent{ display:table; table-layout:fixed; width:100%; } .left{width:0.1%;} .left,.right{display:table-cell;}
利用flex實現
.parent{display:flex;} .right{flex:1;}
多列等分布局
多列等分布局常出現在内容中,多數爲功能的,同階級内容的並排顯示等。
html結構如下所示
<div class="parent"> <div class="column">1</div> <div class="column">1</div> <div class="column">1</div> <div class="column">1</div> </div>
實用float實現
.parent{margin-left:-20px} /*假設列之間的間距爲20px*/ .column{ float:left; width:25%; padding-left:20px; box-sizing:border-box; }
利用table實現
.parent-fix{ margin-left:-20px; } .parent{ display:table; table-layout:fixed; width:100%; } .column{ display:table-cell; padding-left:20px; }
利用flex實現
.parent{display:flex;} .column{flex:1;} .column+.column{margin-left:20px;}
九宮格布局
使用table實現
<div class="parent"> <div class="row"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="row"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="row"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </div>
.parent{ display:table; table-layout:fixed; width:100%; } .row{ display:table-row; } .item{ display:table-cell; width:33.3%;height:200px; }
實用flex實現
<div class="parent"> <div class="row"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="row"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="row"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </div>
.parent{ display:flex; flex-direction:column; } .row{ height:100px; display:flex; } .item{ width:100px;background:red; }
全屏布局
利用絕對定位實現
<div class="parent"> <div class="top">top</div> <div class="left">left</div> <div class="right">right</div> <div class="bottom">bottom</div> </div>
html,body,parent{ height:100%; overflow:hidden; } .top{ position:absolute; top:0;left:0; right:0; height:100px; } .left{ position:absolute; top:100px;left:0; bottom:50px; width:200px; } .right{ position:absolute; overflow:auto; left:200px; right:0;top:100px; bottom:50px; } .bottom{ position:absolute; left:0;right:0; bottom:0;height:50px; }
利用flex實現
<div class="parent"> <div class="top">top</div> <div class="middle"> <div class="left">left</div> <div class="right">right</div> </div> <div class="bottom">bottom</div> </div>
.parent{ display:flex; flex-direction:column; } .top{height:100px;} .bottom{height:50px;} .middle{flex:1;display:flex;} .left{width:200px;} .right{flex:1;overflow:auto;}
響應式布局
meta標簽的實用
設置布局寬度等於設備寬度,布局viewport等於度量viewport
<meta name="viewport" content="width=device-width,initial-scale=1">
媒體查詢
HTML 4和CSS 2目前支持爲不同的媒體類型設定專有的樣式表, 比如, 一個頁面在屏幕上顯示時使用無襯線字體, 而在列印時則使用襯線字體, screen 和 print 是兩種已定義的媒體類型, 媒體查詢讓樣式表有更強的針對性, 擴展了媒體類型的功能;媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達式組成, 媒體查詢中可用於檢測的媒體特性有width、height和color(等), 使用媒體查詢, 可以在不改變頁面内容的情況下, 爲特定的一些輸出設備定制顯示效果。
語法
@media screen and (max-width:960px){....} <link rel="stylesheet" media="screen and (max-width:960px)" href="xxx" />