理解并運(yùn)用CSS的負(fù)margin值
本文樣式代碼采用 SCSS。
瀏覽器兼容性為 IE6+。
你的網(wǎng)頁(yè)中，不可能沒有使用過 margin。大多數(shù)情況下，我們采用的都是正數(shù)的 margin 值，可能有時(shí)候會(huì)用到負(fù)的 margin 值。在我們的印象中，負(fù)的 margin 值就類似于瀏覽器的 hack 一樣，不被人接受。但是，本文要說明的就是，負(fù)的 margin 值并不是 hack，這是正常范圍內(nèi)的寫法。
Negative values for margin properties are allowed, but there may be implementation-specific limits. —— W3C
根據(jù) W3C，margin 是能夠接受負(fù)值的，只是在具體實(shí)現(xiàn)上有一些區(qū)別。
那么，設(shè)置 margin 為負(fù)值究竟會(huì)是什么樣的效果呢?
與設(shè)置正值不同，margin 設(shè)置負(fù)值需要根據(jù)設(shè)置的方向以及元素是否浮動(dòng)以及其定位方式來判斷最終的行為。
所以，具體行為按照以下幾種情況說明。
***種情況：元素沒有設(shè)置浮動(dòng)且沒有設(shè)置定位或者 position 為 static
如果元素沒有設(shè)置浮動(dòng)并且沒有設(shè)置定位或者 position 屬性為 static 的情況下，對(duì)元素的 margin 設(shè)置負(fù)值會(huì)有以下的效果：
設(shè)置的 margin 的方向?yàn)?top 或者 left
當(dāng)設(shè)置負(fù)值的 margin 的方向?yàn)?top 或者 left 的時(shí)候，元素會(huì)按照設(shè)置的方向移動(dòng)相應(yīng)的距離。
比如，設(shè)置 margin-left: -100px;。 那么，元素會(huì)往左移動(dòng) 100px。對(duì)于設(shè)置 margin-top 也是一樣的道理。
設(shè)置的 margin 的方向?yàn)?bottom 或者 right
當(dāng)設(shè)置負(fù)值的 margin 的方向?yàn)?bottom 或者 right 的時(shí)候，元素本身并不會(huì)移動(dòng)，元素后面的其他元素會(huì)往該元素的方向移動(dòng)相應(yīng)的距離，并且覆蓋在該元素上面。
比如，設(shè)置 margin-right: -100px;。那么，元素本身并不會(huì)移動(dòng)，后面的元素會(huì)向左移動(dòng) 100px 到該元素上。對(duì)于設(shè)置 margin-bottom 也是同樣的道理。
同時(shí)，在元素不指定寬度的情況下，如果設(shè)置 margin-left 或者 margin-right 為負(fù)值的話，會(huì)在元素對(duì)應(yīng)的方向上增加其寬度。效果就和設(shè)置 padding-left 或者 padding-right 一樣。
第二種情況：元素沒有設(shè)置浮動(dòng)且 position 為 relative
如果元素沒有設(shè)置浮動(dòng)，但是設(shè)置了相對(duì)定位，設(shè)置 margin 為負(fù)值的時(shí)候，表現(xiàn)如下：
設(shè)置的 margin 的方向?yàn)?top 或者 left
當(dāng)設(shè)置負(fù)值的 margin 的方向?yàn)?top 或者 left 的時(shí)候，元素也會(huì)按照設(shè)置的方向移動(dòng)相應(yīng)的距離。
設(shè)置的 margin 的方向?yàn)?bottom 或者 right
當(dāng)設(shè)置 margin-bottom/left 的時(shí)候，元素本身也不會(huì)移動(dòng)，元素后面的其他元素也會(huì)往該元素的方向移動(dòng)相應(yīng)的距離，但是，該元素會(huì)覆蓋在后面的元素上面 (當(dāng)然，此處說的情況肯定是后面的元素沒有設(shè)置定位以及 z-index 的情況)。
第三種情況：元素沒有設(shè)置浮動(dòng)且 position 為 absolute
如果元素沒有設(shè)置浮動(dòng)，但是設(shè)置了絕對(duì)定位，設(shè)置 margin 為負(fù)值的時(shí)候，表現(xiàn)如下：
設(shè)置的 margin 的方向?yàn)?top 或者 left
當(dāng)設(shè)置負(fù)值的 margin 的方向?yàn)?top 或者 left 的時(shí)候，元素也會(huì)按照設(shè)置的方向移動(dòng)相應(yīng)的距離。
設(shè)置的 margin 的方向?yàn)?bottom 或者 right
由于設(shè)置絕對(duì)定位的元素已經(jīng)脫離了標(biāo)準(zhǔn)文檔流，所以，設(shè)置 margin-right/bottom 對(duì)后面的元素并沒有影響。
第四種情況：元素設(shè)置了浮動(dòng)
肯定沒有既設(shè)置了浮動(dòng)又設(shè)置絕對(duì)定位的情況，那樣太荒唐了。
設(shè)置了浮動(dòng)的元素，再設(shè)置 postion: relative; 的話，元素的行為和單獨(dú)設(shè)置 float 是一樣的。
對(duì)于設(shè)置了浮動(dòng)的元素，設(shè)置 margin 為負(fù)值的時(shí)候，表現(xiàn)如下：
如果設(shè)置的 margin 的方向與浮動(dòng)的方向相同，那么，元素會(huì)往對(duì)應(yīng)的方向移動(dòng)對(duì)應(yīng)的距離。
比如：
- .elem {
- float: right;
- margin-right: -100px;
- }
該元素則會(huì)向右移動(dòng) 100px。
如果設(shè)置 margin 的方向與浮動(dòng)的方向相反，則元素本身不動(dòng)，元素之前或者之后的元素會(huì)向鈣元素的方向移動(dòng)相應(yīng)的距離。
比如：
- .elem {
- float: right;
- margin-left: -100px;
- }
位于該元素左邊的元素則會(huì)向右移動(dòng) 100px，同時(shí)覆蓋在該元素上。
如果后面的元素也設(shè)置了浮動(dòng)的話，我們以一個(gè)具體的例子來說明。
- <div class="container">
- <div class="left"></div>
- <div class="right"></div>
- </div>
- .container {
- min-height: 300px;
- margin: 30px auto;
- overflow: hidden;
- border: 1px solid #000000;
- .left {
- float: left;
- width: 400px;
- height: 200px;
- margin-right: -300px;
- background: purple;
- }
- .right {
- float: left;
- width: 300px;
- height: 200px;
- background: #cccccc;
- }
- }
.left 和 .right 都設(shè)置了浮動(dòng)，在 .left 上設(shè)置了 margin-right: -300px;，那么，.right 會(huì)向左移動(dòng) 300px，從而覆蓋在.left 上。這種行為與沒有既沒有設(shè)置浮動(dòng)也沒有設(shè)置定位的表現(xiàn)類似。
到此，我們把設(shè)置負(fù) margin 的各種情況以及在各種情況下的表現(xiàn)都大概了解了一遍。那么，我們真正運(yùn)用到實(shí)際中會(huì)是什么樣子呢。
半遮擋的標(biāo)題
原諒我措辭不好，大概就是下圖的效果：
按照一般的思想，肯定是直接給 title 設(shè)置絕對(duì)定位，然后再將其調(diào)整過去。
但是，按照我們現(xiàn)在所說的，其實(shí)很簡(jiǎn)單就能實(shí)現(xiàn)這個(gè)效果。
這里只寫了主要部分的代碼。
- <div class="title">Hey This is title!</div>
- <div class="content">Hah! This is content.</div>
- .title {
- position: relative;
- width: 200px;
- height: 60px;
- margin-bottom: -30px;
- margin-left: -20px;
- background: #000000;
- }
- .content {
- max-width: 800px;
- height: 400px;
- padding: 0 50px;
- background: yellow;
- }
我們?yōu)?title 設(shè)置了兩個(gè) margin 的負(fù)值，分別是 margin-bottom: -30px;，以及 margin-left: -20px;。
設(shè)置 margin-bottom 是為了讓 content 向上移動(dòng)，設(shè)置 margin-left 是為了讓 title 向左移動(dòng)一小段距離。
還有個(gè)需要注意的地方就是，需要給 title 設(shè)置 position: relative;，根據(jù)我們的第二種情況所說的，這樣，才能保證 title 覆蓋在 content 之上。
簡(jiǎn)單的一列定寬的兩列流式布局
根據(jù)我們的***一種情況，通過設(shè)置 margin 為負(fù)值，我們可以很容易的實(shí)現(xiàn)一列定寬的兩列流式布局。
- <div class="container">
- <div class="left"></div>
- <div class="right"></div>
- </div>
- .left {
- float: left;
- width: 100%;
- height: 200px;
- margin-right: -300px;
- background: purple;
- }
- .right {
- float: left;
- width: 300px;
- height: 200px;
- background: #cccccc;
- }
唯一需要注意的地方就是設(shè)置了 100% 寬度的元素上的 margin 負(fù)值的絕對(duì)值一定要和定寬的元素的寬度相同。
兩邊固定，中間自適應(yīng)的三列布局
這是一個(gè)很老的話題了，以前也有各種實(shí)現(xiàn)的方式，比如雙飛翼布局，或者圣杯布局。
我們此處就以雙飛翼布局來作示例。
先設(shè)置頁(yè)面結(jié)構(gòu)：
- <div class="container">
- <div class="center"></div>
- <div class="left"></div>
- <div class="right"></div>
- </div>
此處我們沒有把 center 放在中間，具體原因后面會(huì)解釋。
然后，我們?cè)O(shè)置這三列都浮動(dòng)：
- .left,
- .right,
- .center {
- float: left;
- height: 500px;
- }
同時(shí)為他們指定寬度：
- .left {
- width: 300px;
- background: #000000;
- }
- .right {
- width: 400px;
- background: #00FFFF;
- }
- .center {
- width: 100%;
- background: #93c759;
- }
現(xiàn)在我們要讓 left 在左邊，相當(dāng)于就是讓它覆蓋在 center 的上面，所以，只需要這樣一句：
- margin-left: -100%;
同時(shí)，要讓 right 在右邊，同理，這樣設(shè)置：
- margin-left: -400px;
注意，此處的 margin 值的絕對(duì)值與 right 的寬度值相同。
其實(shí)，這樣設(shè)置，我們的三列布局就基本完成了。
那么，我們?yōu)槭裁匆?center 放在 left 和 right 之前呢?
這個(gè)其實(shí)涉及到元素的堆疊順序的知識(shí) (這里就不詳細(xì)講解了，后面有時(shí)間的話專門拿一篇文章來講解吧)，此處簡(jiǎn)單說明一下。
由于我們的三列都設(shè)置了浮動(dòng)，所以，從某種意義上說，它們?nèi)齻€(gè)是在同一個(gè)平面的 (相當(dāng)于 z-index 相同)，那么，這里就不能根據(jù) CSS 來判斷堆疊順序了。所以，此處的 HTML 結(jié)構(gòu)就決定了它們的堆疊順序：所謂后來居上。
我們要讓 left 在 center 之上，所以，肯定需要讓 left 元素放在 center 之前。
所以，三列布局完整的 SCSS 代碼如下：
- .container {
- overflow: hidden;
- .left,
- .right,
- .center {
- float: left;
- height: 500px;
- }
- .left {
- width: 300px;
- margin-left: -100%;
- background: #000000;
- }
- .right {
- width: 400px;
- margin-left: -400px;
- background: #00FFFF;
- }
- .center {
- width: 100%;
- background: #93c759;
- }
- }
References
