圣杯布局中對left盒子設置負內邊距-100%的一點解釋

LdhAndroid 發布于2019-08-02 10:15 / 1594人閱讀

摘要：但在前幾天偶然看到一篇講解圣杯布局的博客中，有同學對左側定寬盒子設置存在疑惑，大致是不清楚為什么這樣設置就會使盒子爬升到盒子的左側，想了一下，還是把自己的理解記錄下來，希望能幫到在此處有疑惑的同學，文中如有謬誤，歡迎指出。

圣杯布局算是一個“古老”的話題了，關于其來源網上資料眾多，在此不多做表述。
但在前幾天偶然看到一篇講解圣杯布局的博客中，有同學對左側定寬盒子設置 margin-left: -100% 存在疑惑，大致是不清楚為什么這樣設置就會使left盒子“爬升”到middle盒子的左側，想了一下，還是把自己的理解記錄下來，希望能幫到在此處有疑惑的同學，文中如有謬誤，歡迎指出。
簡單回顧一下圣杯布局的流程：令middle、left、right盒子的寬度分別為100%、200px、300px

HTML

1. 首先設置左右兩個div寬度以及container容器的左右內邊距分別為left、right盒子的寬度，以便給這兩個盒子“騰地兒”

//窗口小于一定值時布局會混亂，因此加一個最小寬度
//閾值 = 左width x 2 + 右width
body{
  min-width: 700px; 
}
.container{
  padding: 0 300px 0 200px;
}
.middle{
  width: 100%;
  height: 200px;
  background: #ccc;
}
.left{
  width: 200px;
  height: 200px;
  background: green;
}
.right{
  width: 200px;
  height: 200px;
  background: orange;
}

效果：

2. 添加左浮動

.middle,.left,.right{
  float: left
}

效果

3. 讓left與right“爬升”至第一行

現在我們知道這三個盒子全都脫離了文檔流，那么讓元素“爬升”至上一行，需要用到負margin，這個負margin是多少呢？這又要看他的上一行中還留下多長的“空白”，這個“空白”是用來放待上位元素減去負margin值（多說一句，當然減的是絕對值）的那一部分。因此用待上位元素的寬度（包括padding）減去這個“空白”的寬度，即為負margin的值。下面畫兩張圖理解：

設置 margin-left： -34px后效果：（兩張圖貌似大小不對等，我標注時沒量，請腦補一下上圖空白處166px與下圖的166px大小一樣就是了）

margin-left妙用無窮，感興趣請自行百度
那么在此布局中，讓left盒子“爬升”：
a. 首先，我們發現left的上一行沒有給它留一丁點“空白“，即“空白”=0，按照上面解釋的，left寬度減去“空白”寬，那么left向左移動200px它就“上位”成功了

//此非圣杯布局中的css，僅作解釋說明用
.left{
    margin-left: -200px
}

現在的效果：

left“上位”成功了！不過排在container的末端，我們要讓它到最左側。如果你以前不清楚如何進行圣杯布局，到這里可能會有點蒙圈，這移動到左邊的距離可咋算？那么咱們進行下一步

b. 我們先讓left盒子移動到父容器container的左側，即上圖中m與n重合。假設container寬度為x，left還需左移（x-200）px，敲黑板！！！還記得left怎么上的位么？設置margin-left為-200px！考驗小學數學功底的時間到了

問：left上位所必需的的200px占container寬度（去padding）的百分比是多少？
答： 200/x

問：據上圖看，left上位后mn重合所移動距離占container寬度（去padding）的百分比是多少？
答：(x-200)/x

問： left完成上位過程所移動的距離占container寬度（去padding）的百分比是多少？
答： (200/x) + (x-200)/x = 100%

問：container是不是left的父元素？
答：是

到這里，你的小學老師表示很欣慰=_=
這里還牽扯到一個基礎知識，margin-left設置百分比是相對于父元素寬度的，這個寬度是不包括padding在內的。
綜上，用margin-left完成left“上位”，只需設置

.left{
    margin-left: -100%
}

到這里，有疑惑的同學就該明白這-100%到底怎么回事了吧！
效果：

c. right盒子“上位”同理，不過不像左移動這么波折了

.right{
    margin-left: -300px
}

效果

4. 此時left與right分別在container的左右兩端，我們要讓它們最終在container給它們“騰的地兒”處安身，這兩個距離我們可是知道的，即padding的大小，設置絕對定位

.left{
    position: relative;
    left: -200px
}
.right{
    position: relative;
    right: -300px;
}

效果

至此，整個圣杯布局完成，想必對這些負邊距設置值有疑問的同學能清楚點了吧--
當然了，用flex布局更簡單，網上資料眾多，在此不做解釋。

本文首發于我的個人博客mapblog小站 ---一個vue-ssr博客

GPU云服務器云服務器負內邊距內邊距 html文字內邊距 html 左右內邊距

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52222.html

圣杯布局中對left盒子設置負內邊距-100%的一點解釋

摘要：但在前幾天偶然看到一篇講解圣杯布局的博客中，有同學對左側定寬盒子設置存在疑惑，大致是不清楚為什么這樣設置就會使盒子爬升到盒子的左側，想了一下，還是把自己的理解記錄下來，希望能幫到在此處有疑惑的同學，文中如有謬誤，歡迎指出。圣杯布局算是一個古老的話題了，關于其來源網上資料眾多，在此不多做表述。但在前幾天偶然看到一篇講解圣杯布局的博客中，有同學對左側定寬盒子設置 margin-left:...

JellyBool 2019-08-29 15:08 評論0 收藏0
圣杯布局和雙飛翼布局

摘要：比起雙飛翼布局，它的起源不是源于對頁面的形象表達。一起來看看這兩種布局的區別在哪一雙飛翼布局可以看到，我們在里面又加了一個內容層。稍微了解前端的人都知道，圣杯布局和雙飛翼布局是前端面試時必問的問題，因為它既能體現你懂HTML結構又能體現出你對ＤIV+CSS布局的掌握，畢竟我們學習CSS主要就是為了更好地布局帶來最好的用戶體驗嘛~ 事實上，圣杯布局其實和雙飛翼布局是一回事。它們實現的都...

Clect 2019-08-02 16:17 評論0 收藏0
圣杯布局和雙飛翼布局

摘要：比起雙飛翼布局，它的起源不是源于對頁面的形象表達。一起來看看這兩種布局的區別在哪一雙飛翼布局可以看到，我們在里面又加了一個內容層。稍微了解前端的人都知道，圣杯布局和雙飛翼布局是前端面試時必問的問題，因為它既能體現你懂HTML結構又能體現出你對ＤIV+CSS布局的掌握，畢竟我們學習CSS主要就是為了更好地布局帶來最好的用戶體驗嘛~ 事實上，圣杯布局其實和雙飛翼布局是一回事。它們實現的都...

468122151 2019-08-30 10:49 評論0 收藏0
CSS 布局方式

摘要：中間左欄右欄清除浮動如下圖缺點結構不正確多了一層標簽布局左欄中間右欄如下圖缺點兼容性問題參考文章 W3C標準由萬維網聯盟制定的一系列標準，包括：結構化標準語言（HTML和XML）表現標準語言（CSS）行為標準語言（DOM和ECMAScript） CSS中的定位機制在CSS中存在三種定位機制：標準文檔流（Normal flow）浮動（Floats）絕對定位（Abs...

LancerComet 2019-08-29 15:27 評論0 收藏0