整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
現(xiàn)效果：
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
實(shí)現(xiàn)代碼：
示：點(diǎn)擊上方"藍(lán)色字體"↑ 可訂閱！
關(guān)于我們 51RGB官方微信
CSS中的級聯(lián)(cascade)在同一時(shí)間可謂是幸福的，也可以說是痛苦不堪的。通常能工作得非常好，但有問題的時(shí)候，也讓人們都很激動(dòng)，甚至事件中也離開不CSS。我們所涉及的不僅是CSS的級聯(lián)也還涉及到CSS的權(quán)重。不是說碰到特殊問題才顯得困難，可以說CSS的困難無處不在。
在這篇文章中，我將通過一些示例來向大家展示一些CSS的小技巧，讓你知道如何使用CSS的級聯(lián)能變得更友好，也減少一些不必要的需求，從而也減少權(quán)重上遇到的麻煩。
技巧一
每當(dāng)你寫CSS時(shí)，你想盡可能的回到樹形頂部。換句話說，回到:root。
例如，我們的網(wǎng)站有一個(gè)側(cè)邊欄，希望在這個(gè)側(cè)邊欄上添加一個(gè)簡短的個(gè)人介紹。其HTML的結(jié)構(gòu)看起來可能會(huì)像這樣：
<body>
<main class=“Posts”>
<aside class=“SideBar”>
<nav class=“Nav”>
<p class=“Bio”>
CSS是這樣寫的：
.Bio {
font-size: .8em;
line-height: 1.5;
color: #888;
}
這樣寫是能正常工作的，并不存在樣式上的問題。但是，側(cè)邊欄還有一個(gè)導(dǎo)航 nav ，很有可能他們有一些樣式是相同的。在我們這個(gè)示例中 font-size 和 color 都是相同的。讓我們把這些屬性從 nav 和 .Bio 中提取出來，并且將它們添加到其父元素 .SideBar 中：
.SideBar {
font-size: .8em;
color: #888;
}
事實(shí)證明，在 .Posts 中已經(jīng)設(shè)置了 line-height:1.5; 。似乎整個(gè)頁面都使用了相同的行高，那么我們可以將 .Bio 和 .Posts 中的 line-height 移到根元素中：
:root {
line-height: 1.5;
}
這看起來是一個(gè)CSS常識，但他也不會(huì)太關(guān)注兄弟元素定義同樣的事情。這也讓你發(fā)現(xiàn)，有一些代碼產(chǎn)生重復(fù)。其實(shí)這并不可怕，因?yàn)槲覀冎恍枰c(diǎn)時(shí)間重新重構(gòu)代碼，但這樣保持了CSS的代碼處理健康狀態(tài)。
在樹支上寫樣式，而不應(yīng)該在樹葉上寫樣式
技巧二
樣式總是作為特定屬性組合出現(xiàn)
一個(gè)很好的例子就是 color 和 bakground-color 的組合。除非你只做小調(diào)整，不然你需要一起調(diào)整他們。當(dāng)給一個(gè)元素添加背景顏色時(shí)，它可能不包含任何文本，但可能會(huì)有一些子元素。因此，我們一起設(shè)置前景色(color)和背景色(background-color)，我們總是可以確定這些元素不會(huì)遇到任何易讀性和對比問題。下次我們改變背景色時(shí)，不需要到處尋找需要修改的文本顏色，因?yàn)樗麄兌家砸粋€(gè)組合的形式出現(xiàn)在一起。
技巧三
使用動(dòng)態(tài)值，比如currentColor和em等
有時(shí)候文本顏色也會(huì)使用在其他屬性上。比如說border、box-shadow或者SVG圖標(biāo)中的fill上。定義相同顏色有一個(gè)替代方案，可以直接使用currentColor。默認(rèn)情況下，color是可以繼承的，你只需要在一個(gè)地方修改就可以改變其他屬性的顏色。
同樣的，給font-size屬性使用em單位，允許你只修改:root的font-size就可以改變元素的盒模型大小。
有關(guān)于這方面更多的細(xì)節(jié)，可以查閱《使用字符串(STRINGS)設(shè)置樣式》一文。
技巧四
使用 inherit 屬性值繼承其父元素樣式來覆蓋UA自帶樣式。
像 button 、 input 這樣的表單控件，不同的瀏覽器都會(huì)有自己的樣式風(fēng)格(UA樣式)。我們可以使用 inherit 繼承其父元素樣式，從而覆蓋瀏覽器的UA樣式。
button,
input,
select,
textarea {
color: inherit;
font-family: inherit;
font-style: inherit;
font-weight: inherit;
}
上面示例代碼取自sanitize.css。normalize.css也是這樣使用的。如果你不是這樣使用，說明你已經(jīng)…
你也可以嘗試在 input[type="range"] 、 input[type="radio"] 和 input[type="checkbox"] 等元素上直接使用前面介紹的currentColor屬性自動(dòng)匹配顏色?；蛟S你不需要改變什么，可以將一個(gè)亮色系變成一個(gè)暗色系。
總結(jié)
這些都是好東西，當(dāng)然并不是強(qiáng)迫大家使用。我想說，這些小技巧，簡單實(shí)用，讓你的Web站點(diǎn)能獲取最大的好處。即使你使用一個(gè)CSS預(yù)處理器，他們也不會(huì)有損代碼的輸出量減少，甚至可以少設(shè)置幾個(gè)變量。
也適合單一類名，比如像Tachyons。或許還能減少復(fù)雜性和所需的類。
另外一個(gè)有趣的事情即將到來，那么在CSS中也可以自定義屬性，也就是CSS變量。與預(yù)處理器不同，覆蓋自定義屬性時(shí)，它只會(huì)影響當(dāng)前的選擇范圍。所以從某種意義上來說，他們是“層疊變量”。但我還是想試試，看看它是如何工作的。
關(guān)于我們 51RGB官方微信
51RGB在線教育 (www.51rgb.com) ：聘請WEB前端開發(fā)高級講師，現(xiàn)任職騰訊UED前端開發(fā)工程師。曾就職于卓望信息前端工程師。從事前端開發(fā)8年，在卓望期間負(fù)責(zé)移動(dòng)微博的前端頁面架構(gòu)及開發(fā)工作。來到騰訊之后主要做手機(jī)端HTML5方向。網(wǎng)頁前端技術(shù)一流，大型企業(yè)實(shí)戰(zhàn)經(jīng)驗(yàn)豐富。期待你的加入！
微信：tyacheng
客服電話：400 110 9151
↓↓↓
文概要
本文將介紹如下幾種常見的布局：
一、單列布局
常見的單列布局有兩種：
1.如何實(shí)現(xiàn)
對于第一種，先通過對 header,content,footer 統(tǒng)一設(shè)置 width：1000px;或者 max-width：1000px(這兩者的區(qū)別是當(dāng)屏幕小于 1000px 時(shí)，前者會(huì)出現(xiàn)滾動(dòng)條，后者則不會(huì)，顯示出實(shí)際寬度);然后設(shè)置 margin:auto 實(shí)現(xiàn)居中即可得到。
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
.header{
margin:0 auto;
max-width: 960px;
height:100px;
background-color: blue;
}
.content{
margin: 0 auto;
max-width: 960px;
height: 400px;
background-color: aquamarine;
}
.footer{
margin: 0 auto;
max-width: 960px;
height: 100px;
background-color: aqua;
}
對于第二種，header、footer 的內(nèi)容寬度不設(shè)置，塊級元素充滿整個(gè)屏幕，但 header、content 和 footer 的內(nèi)容區(qū)設(shè)置同一個(gè) width，并通過 margin:auto 實(shí)現(xiàn)居中。
<div class="header">
<div class="nav"></div>
</div>
<div class="content"></div>
<div class="footer"></div>
.header{
margin:0 auto;
max-width: 960px;
height:100px;
background-color: blue;
}
.nav{
margin: 0 auto;
max-width: 800px;
background-color: darkgray;
height: 50px;
}
.content{
margin: 0 auto;
max-width: 800px;
height: 400px;
background-color: aquamarine;
}
.footer{
margin: 0 auto;
max-width: 960px;
height: 100px;
background-color: aqua;
}
二、兩列自適應(yīng)布局
兩列自適應(yīng)布局是指一列由內(nèi)容撐開，另一列撐滿剩余寬度的布局方式
1.float+overflow:hidden
如果是普通的兩列布局， 浮動(dòng)+普通元素的 margin 便可以實(shí)現(xiàn)，但如果是自適應(yīng)的兩列布局，利用 float+overflow:hidden 便可以實(shí)現(xiàn)，這種辦法主要通過 overflow 觸發(fā) BFC,而 BFC 不會(huì)重疊浮動(dòng)元素。由于設(shè)置 overflow:hidden 并不會(huì)觸發(fā) IE6-瀏覽器的 haslayout 屬性，所以需要設(shè)置 zoom:1 來兼容 IE6-瀏覽器。具體代碼如下：
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
<p>right</p>
</div>
</div>
.parent {
overflow: hidden;
zoom: 1;
}
.left {
float: left;
margin-right: 20px;
}
.right {
overflow: hidden;
zoom: 1;
}
注意點(diǎn):如果側(cè)邊欄在右邊時(shí)，注意渲染順序。即在 HTML 中，先寫側(cè)邊欄后寫主內(nèi)容
2.Flexbox 布局
Flexbox 布局，也叫彈性盒子布局，區(qū)區(qū)簡單幾行代碼就可以實(shí)現(xiàn)各種頁面的的布局。
//html部分同上
.parent {
display:flex;
}
.right {
margin-left:20px;
flex:1;
}
3.Grid 布局
Grid 布局，是一個(gè)基于網(wǎng)格的二維布局系統(tǒng)，目的是用來優(yōu)化用戶界面設(shè)計(jì)。
//html部分同上
.parent {
display:grid;
grid-template-columns:auto 1fr;
grid-gap:20px
}
三、三欄布局
特征：中間列自適應(yīng)寬度，旁邊兩側(cè)固定寬度 ，實(shí)現(xiàn)三欄布局有多種方式：
1.浮動(dòng)布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layout</title>
<style media="screen">
html * {
padding: 0;
margin: 0;
}
.layout article div {
min-height: 150px;
}
</style>
</head>
<body>
<!--浮動(dòng)布局 -->
<section class="layout float">
<style media="screen">
.layout.float . left {
float: left;
width: 300px;
background: red;
}
.layout.float .center {
background: yellow;
}
.layout.float . right {
float: right;
width: 300px;
background: blue;
}
</style>
<h1>三欄布局</h1>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div> // 右欄部分要寫在中間內(nèi)容之前
<div class="center">
<h2>浮動(dòng)解決方案</h2>
1.這是三欄布局的浮動(dòng)解決方案； 2.這是三欄布局的浮動(dòng)解決方案； 3.這是三欄布局的浮動(dòng)解決方案； 4.這是三欄布局的浮動(dòng)解決方案； 5.這是三欄布局的浮動(dòng)解決方案； 6.這是三欄布局的浮動(dòng)解決方案；
</div>
</article>
</section>
</body>
</html>
這種布局方式，dom 結(jié)構(gòu)必須是先寫浮動(dòng)部分，然后再中間塊，否則右浮動(dòng)塊會(huì)掉到下一行。浮動(dòng)布局的優(yōu)點(diǎn)就是比較簡單，兼容性也比較好。但浮動(dòng)布局是有局限性的，浮動(dòng)元素脫離文檔流，要做清除浮動(dòng)，這個(gè)處理不好的話，會(huì)帶來很多問題，比如父容器高度塌陷等 。
2.絕對定位布局
<!--絕對布局 -->
<section class="layout absolute">
<style>
.layout.absolute . left-center- right>div{
position: absolute;//三塊都是絕對定位
}
.layout.absolute . left {
left:0;
width: 300px;
background: red;
}
.layout.absolute .center {
right: 300px;
left: 300px;//離左右各三百
background: yellow;
}
.layout.absolute . right {
right: 0;
width: 300px;
background: blue;
}
</style>
<h1>三欄布局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>絕對定位解決方案</h2>
1.這是三欄布局的浮動(dòng)解決方案； 2.這是三欄布局的浮動(dòng)解決方案； 3.這是三欄布局的浮動(dòng)解決方案； 4.這是三欄布局的浮動(dòng)解決方案； 5.這是三欄布局的浮動(dòng)解決方案； 6.這是三欄布局的浮動(dòng)解決方案；
</div>
<div class="right"></div>
</article>
</section>
絕對定位布局優(yōu)點(diǎn)就是快捷，設(shè)置很方便，而且也不容易出問題。缺點(diǎn)就是，容器脫離了文檔流，后代元素也脫離了文檔流，高度未知的時(shí)候，會(huì)有問題，這就導(dǎo)致了這種方法的有效性和可使用性是比較差的。
3.flexbox 布局
<!--flexbox布局-->
<section class="layout flexbox">
<style>
.layout.flexbox .left-center- right{
display: flex;
}
.layout.flexbox .left {
width: 300px;
background: red;
}
.layout.flexbox .center {
background: yellow;
flex: 1;
}
.layout.flexbox .right {
width: 300px;
background: blue;
}
</style>
<h1>三欄布局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>flexbox解決方案</h2>
1.這是三欄布局的浮動(dòng)解決方案； 2.這是三欄布局的浮動(dòng)解決方案； 3.這是三欄布局的浮動(dòng)解決方案； 4.這是三欄布局的浮動(dòng)解決方案； 5.這是三欄布局的浮動(dòng)解決方案； 6.這是三欄布局的浮動(dòng)解決方案；
</div>
<div class="right"></div>
</article>
</section>
flexbox 布局是 css3 里新出的一個(gè)，它就是為了解決上述兩種方式的不足出現(xiàn)的，是比較完美的一個(gè)。目前移動(dòng)端的布局也都是用 flexbox。 flexbox 的缺點(diǎn)就是 IE10 開始支持，但是 IE10 的是-ms 形式的。
4.表格布局
<!--表格布局-->
<section class="layout table">
<style>
.layout.table . left-center- right {
display: table;
height: 150px;
width: 100%;
}
.layout.table . left-center- right>div {
display: table-cell;
}
.layout.table . left {
width: 300px;
background: red;
}
.layout.table .center {
background: yellow;
}
.layout.table . right {
width: 300px;
background: blue;
}
</style>
<h1>三欄布局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>表格布局解決方案</h2>
1.這是三欄布局的浮動(dòng)解決方案； 2.這是三欄布局的浮動(dòng)解決方案； 3.這是三欄布局的浮動(dòng)解決方案； 4.這是三欄布局的浮動(dòng)解決方案； 5.這是三欄布局的浮動(dòng)解決方案； 6.這是三欄布局的浮動(dòng)解決方案；
</div>
<div class="right"></div>
</article>
</section>
表格布局的兼容性很好，在 flex 布局不兼容的時(shí)候，可以嘗試表格布局。當(dāng)內(nèi)容溢出時(shí)會(huì)自動(dòng)撐開父元素 。
表格布局也是有缺陷:① 無法設(shè)置欄邊距；② 對 seo 不友好；③ 當(dāng)其中一個(gè)單元格高度超出的時(shí)候，兩側(cè)的單元格也是會(huì)跟著一起變高的，然而有時(shí)候這并不是我們想要的效果。
5.網(wǎng)格布局
<!--網(wǎng)格布局-->
<section class="layout grid">
<style>
.layout.grid .left-center- right {
display: grid;
width: 100%;
grid-template-columns: 300px auto 300px;
grid-template-rows: 150px;//行高
}
.layout.grid .left {
background: red;
}
.layout.grid .center {
background: yellow;
}
.layout.grid .right {
background: blue;
}
</style>
<h1>三欄布局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>網(wǎng)格布局解決方案</h2>
1.這是三欄布局的浮動(dòng)解決方案； 2.這是三欄布局的浮動(dòng)解決方案； 3.這是三欄布局的浮動(dòng)解決方案； 4.這是三欄布局的浮動(dòng)解決方案； 5.這是三欄布局的浮動(dòng)解決方案； 6.這是三欄布局的浮動(dòng)解決方案；
</div>
<div class="right"></div>
</article>
</section>
CSS Grid 是創(chuàng)建網(wǎng)格布局最強(qiáng)大和最簡單的工具。就像表格一樣，網(wǎng)格布局可以讓 Web 設(shè)計(jì)師根據(jù)元素按列或行對齊排列，但他和表格不同，網(wǎng)格布局沒有內(nèi)容結(jié)構(gòu)，從而使各種布局不可能與表格一樣。例如，一個(gè)網(wǎng)格布局中的子元素都可以定位自己的位置，這樣他們可以重疊和類似元素定位 。
但網(wǎng)格布局的兼容性不好。IE10+上支持，而且也僅支持部分屬性 。
6.圣杯布局
① 特點(diǎn)
比較特殊的三欄布局，同樣也是兩邊固定寬度，中間自適應(yīng)，唯一區(qū)別是 dom 結(jié)構(gòu)必須是先寫中間列部分，這樣實(shí)現(xiàn)中間列可以優(yōu)先加載 。
.container {
padding-left: 220px;//為左右欄騰出空間
padding-right: 220px;
}
.left {
float: left;
width: 200px;
height: 400px;
background: red;
margin-left: -100%;
position: relative;
left: -220px;
}
.center {
float: left;
width: 100%;
height: 500px;
background: yellow;
}
.right {
float: left;
width: 200px;
height: 400px;
background: blue;
margin-left: -200px;
position: relative;
right: -220px;
}
<article class="container">
<div class="center">
<h2>圣杯布局</h2>
</div>
<div class="left"></div>
<div class="right"></div>
</article>
② 實(shí)現(xiàn)步驟
③ 缺點(diǎn)
7.雙飛翼布局
① 特點(diǎn)
同樣也是三欄布局，在圣杯布局基礎(chǔ)上進(jìn)一步優(yōu)化，解決了圣杯布局錯(cuò)亂問題，實(shí)現(xiàn)了內(nèi)容與布局的分離。而且任何一欄都可以是最高欄，不會(huì)出問題 。
.container {
min-width: 600px;//確保中間內(nèi)容可以顯示出來，兩倍 left寬+ right寬
}
.left {
float: left;
width: 200px;
height: 400px;
background: red;
margin-left: -100%;
}
.center {
float: left;
width: 100%;
height: 500px;
background: yellow;
}
.center .inner {
margin: 0 200px; //新增部分
}
.right {
float: left;
width: 200px;
height: 400px;
background: blue;
margin-left: -200px;
}
<article class="container">
<div class="center">
<div class="inner">雙飛翼布局</div>
</div>
<div class="left"></div>
<div class="right"></div>
</article>
② 實(shí)現(xiàn)步驟(前兩步與圣杯布局一樣)
③ 缺點(diǎn)
多加一層 dom 樹節(jié)點(diǎn)，增加渲染樹生成的計(jì)算量 。
④ 圣杯布局和雙飛翼布局實(shí)現(xiàn)方式對比:
四、等高列布局
等高布局是指子元素在父元素中高度相等的布局方式。等高布局的實(shí)現(xiàn)包括偽等高和真等高,偽等高只是看上去等高而已,真等高是實(shí)實(shí)在在的等高。
1.利用背景圖片
這種方法是我們實(shí)現(xiàn)等高列最早使用的一種方法，就是使用背景圖片，在列的父元素上使用這個(gè)背景圖進(jìn)行Y軸的鋪放，從而實(shí)現(xiàn)一種等高列的假象。實(shí)現(xiàn)方法簡單，兼容性強(qiáng)，不需要太多的css樣式就可以輕松實(shí)現(xiàn),但此方法不適合流體布局等高列的布局。
在制作樣式之前需要一張類似下面的背景圖：
<div class=”container clearfix”>
<div class=”left”></div>
<div class=”content”></div>
<div class=”right”></div>
</div>
.container {
background: url("column.png") repeat-y;
width: 960px;
margin: 0 auto;
}
.left {
float: left;
width: 220px;
}
.content {
float: left;
width: 480px;
}
.right {
float: left;
width: 220px;
}
2.利用正padding+負(fù)margin
我們通過等布局便可解決圣杯布局的第二點(diǎn)缺點(diǎn)，因?yàn)楸尘笆窃?padding 區(qū)域顯示的， 設(shè)置一個(gè)大數(shù)值的 padding-bottom，再設(shè)置相同數(shù)值的負(fù)的 margin-bottom，并在所有列外面加上一個(gè)容器，并設(shè)置 overflow:hidden 把溢出背景切掉 。這種可能實(shí)現(xiàn)多列等高布局，并且也能實(shí)現(xiàn)列與列之間分隔線效果，結(jié)構(gòu)簡單，兼容所有瀏覽器。新增代碼如下：
.center,
.left,
.right {
padding-bottom: 10000px;
margin-bottom: -10000px;
}
.container {
padding-left: 220px;
padding-right: 220px;
overflow: hidden;//把溢出背景切掉
}
3.模仿表格布局
這是一種非常簡單，易于實(shí)現(xiàn)的方法。不過兼容性不好，在ie6-7無法正常運(yùn)行。
<div class="container table">
<div class="containerInner tableRow">
<div class="column tableCell cell1">
<div class="left aside">
....
</div>
</div>
<div class="column tableCell cell2">
<div class="content section">
...
</div>
</div>
<div class="column tableCell cell3">
<div class="right aside">
...
</div>
</div>
</div>
</div>
.table {
width: auto;
min-width: 1000px;
margin: 0 auto;
padding: 0;
display: table;
}
.tableRow {
display: table-row;
}
.tableCell {
display: table-cell;
width: 33%;
}
.cell1 {
background: #f00;
height: 800px;
}
.cell2 {
background: #0f0;
}
.cell3 {
background: #00f;
}
4.使用邊框和定位
這種方法是使用邊框和絕對定位來實(shí)現(xiàn)一個(gè)假的高度相等列的效果。結(jié)構(gòu)簡單，兼容各瀏覽器，容易掌握。假設(shè)你需要實(shí)現(xiàn)一個(gè)兩列等高布局，側(cè)欄高度要和主內(nèi)容高度相等。
#wrapper {
width: 960px;
margin: 0 auto;
}
#mainContent {
border-right: 220px solid #dfdfdf;
position: absolute;
width: 740px;
height: 800px;
background: green;
}
#sidebar {
background: #dfdfdf;
margin-left: 740px;
position: absolute;
height: 800px;
width: 220px;
}
<div id="wrapper">
<div id="mainContent">...</div>
<div id="sidebar">...</div>
</div>
五、粘連布局
1.特點(diǎn)
具體代碼如下：
main
main
main
footer
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;//高度一層層繼承下來
}
#wrap {
min-height: 100%;
background: pink;
text-align: center;
overflow: hidden;
}
#wrap .main {
padding-bottom: 50px;
}
#footer {
height: 50px;
line-height: 50px;
background: deeppink;
text-align: center;
margin-top: -50px;
}
2.實(shí)現(xiàn)步驟
(1)footer 必須是一個(gè)獨(dú)立的結(jié)構(gòu)，與 wrap 沒有任何嵌套關(guān)系
(2)wrap 區(qū)域的高度通過設(shè)置 min-height，變?yōu)橐暱诟叨?/strong>
(3)footer 要使用 margin 為負(fù)來確定自己的位置
(4)在 main 區(qū)域需要設(shè)置 padding-bottom。這也是為了防止負(fù) margin 導(dǎo)致 footer 覆蓋任何實(shí)際內(nèi)容。
參考文章
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
