溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹css中的柵格布局是什么，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
柵格布局能將網頁分成簡單屬性的行和列，CSS頁面布局技術允許我們拾取網頁中的元素，并且控制它們相對正常布局流、周邊元素、父容器或者主視口/窗口的位置。
圣杯布局
圣杯布局是一種三列布局，兩邊定寬，中間自適應：
css：
* {
box-sizing: border-box;
}
html, body{
width: 100%;
height: 100%;
margin: 0;
}
.container{
width:100%;
}
.container:after{
display: table;
content:".";
clear:both;
}
.container .cl{
float:left;
border: 1px solid red;
height: 200px;
}
.main{
width:100%;
padding 0 290px 0 320px;
background-color: blue;
}
.sub{
width: 320px;
margin-left:-100%;
background-color: white;
}
.extra{
width: 290px;
margin-left:-290px;
background-color: yellow;
}
CSSHTML：
<body> <div class="container"> <div class="cl main"> </div> <div class="cl sub"></div> <div class="cl extra"></div> </div> </body>
圣杯布局的原理就是當子元素處于浮動狀態時，設置負margin，子元素會疊蓋到兄弟元素之上。
那么能否用現在想要將其中藍色區域再次劃分成三個區域，相信有很多種辦法。但能否通過嵌套的方式實現呢？我們可以試一下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="window-target" content="_top">
<title>Writing to Same Doc</title>
<style type="text/css">
* {
box-sizing: border-box;
}
html, body{
width: 100%;
height: 100%;
margin: 0;
}
.container{
width:100%;
}
.container:after{
display: table;
content:".";
clear:both;
}
.container .cl{
float:left;
border: 1px solid red;
height: 200px;
}
.main{
width:100%;
padding: 0 290px 0 320px;
background-color: blue;
}
.sub{
width: 320px;
margin-left:-100%;
background-color: white;
}
.extra{
width: 290px;
margin-left:-290px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="cl main">
<div class="container">
<div class="cl main"></div>
<div class="cl sub"></div>
<div class="cl extra"></div>
</div>
</div>
<div class="cl sub"></div>
<div class="cl extra"></div>
</div>
</body>
</html>
柵格系統的原理
假設：Flowline的寬度為W，column的寬度為c，Gutter的寬度為g，Margin的寬度為m，柵格列數為N
W = c*N + g*(N-1) + 2m；g的寬度通常為m的兩倍，所以：
W = (c+g) * N；把c+g記為C，得：
W = C * N;
大部分的柵格系統都是此公式的變體。
Bootstrap的柵格系統
下面我們將一起來看一下常見的柵格布局的設計和bootstrap中的設計實現。BootStrap中合理的使用柵格布局，必須將列放入row中，而row必須放入container中。container類在布局中主要有兩個作用：
在不同的寬度區間內（響應式斷點）提供寬度限制。當寬度變化時，采用不同的寬度。
提供一個padding，阻止內部內容觸碰到瀏覽器邊界。
Bootstrap中使用padding代替上文中的margin。大小為15px，如下圖所示，粉紅色為padding大小。
Row是column的容器，每個row中的column之和必須為12，不過我們可以通過嵌套的方式擴展。Row的左右margin都為-15px，用來抵消container中的padding，如下圖藍色部分所示：
row的這種設計主要為了方便嵌套，后文中會提到。
Colomn是柵格系統的主角，每個column左右padding都為15px，上文中row的負margin抵消了container的padding，所以為每個column設置padding就是為了防止內容直接觸碰邊界，同時不同的column之間擁有30px的卡槽（Gutter）。如下圖黃色部分所示：
現在想想上文中提到的公式：W = C * N;
上文提到row的負margin設計主要為了嵌套，如果要在column中嵌套column首先要把被嵌套的column放到row中，把row放到作為容器的column中，而不需要在放置一個container。如下圖中藍色所示，是放入column中的row的負margin區域。
現在將被嵌套的column放入row中，如下圖所示，上層column便是起到了container的作用。
以上是“css中的柵格布局是什么”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
