CSS布局

前言

網頁的布局有很多種,下面我來介紹一些常見的布局方式和小的Demo

單列布局

特征:中間盒子水平居中,寬度固定

  • 一種是header、content、footer寬度都相同,其一般不會占滿瀏覽器的最寬寬度,但當瀏覽器寬度縮小低于其最大寬度時,寬度會自適應。
image.png
  • 一種是header、footer寬度為瀏覽器寬度,但content以及header和footer里的內容卻不會占滿瀏覽器寬度。
image.png

二列布局

  • 浮動布局 float + margin (流體布局)
    左邊浮動,右邊margin-left,實現左邊固定,右邊自適應的布局
image.png
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="parent">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>
</html>
div{
   height:100px;
}
.left {
  border:1px red solid;
  float:left;
  background:grey;
  width:200px
}

.right{
  width:300px;
  background:red;
  border:1px black solid;
  margin-left:200px
}
  • 浮動 float + margin + (fix)
image.png
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="parent">
    <div class="del left">
    </div>
    <div class="right-fix">
       <div class="del right">
       </div>
    </div>
  </div>
</body>
</html>
div .del{
  width: 100px;
  height:20px;
}

.left {
  float: left;
  background:red;
  position: relative; 
}

.right-fix {
  float: right;
  width: 100%;
  margin-left: -100px;
}

.right {
  background:grey;
  margin-left: 120px;
}

通過在 right 上套上一層 right-fix,然后對 right-fix 設置浮動,然后提高 left 的層級設置定位屬性為 relative,可以解決 IE6 的兼容性問題

  • 浮動 float + overflow (BFC布局)
image.png
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="parent">
    <div class="left">
      <p>left</p>
    </div>
    <div class="right">
      <p>right</p>
    </div>
  </div>
</body>
</html>
.left {
  border:1px red solid;
  float: left;
  width: 100px;
  margin-right: 20px;
  background:green;
}

.right{
  border:1px red solid;
  overflow: hidden;
  background:grey;
}

三列布局 (傳統布局方法)

三列布局的特點就是 中間自適應,左右等寬

  • float+margin 流體布局
<div id="content">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="main">main</div>
</div>
.left {
  float: left;
  height: 200px;
  width: 100px;
  background-color: red;
}
.right {
  width: 200px;
  height: 200px;
  background-color: blue;
  float: right;
}
.main {
  margin-left: 120px;
  margin-right: 220px;
  height: 200px;
  background-color: green;
}

缺點就是主要內容無法最先加載,當頁面內容較多時會影響用戶體驗。

  • BFC 三欄布局
<div id="content">
  <div class="left">left</div>
  <div class="right">right</div>
  <div class="main">main</div>
</div>
.left {
  float: left;
  height: 200px;
  width: 100px;
  margin-right: 20px;
  background-color: red;
}
.right {
  width: 200px;
  height: 200px;
  float: right;
  margin-left: 20px;
  background-color: blue;
}   
.main {
  height: 200px;
  overflow: hidden;
  background-color: green;
}

主要內容模塊無法最先加載,當頁面中內容較多時會影響用戶體驗。

注意DOM文檔的書寫順序,先寫兩側欄,再寫主面板,更換后則側欄會被擠到下一列(圣杯布局和雙飛翼布局都會用到)。  
這種布局方式比較簡單明了,但缺點是渲染時先渲染了側邊欄,而不是比較重要的主面板。

  • 雙飛翼布局
<div class="content">
  <div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
 .content {
   float: left;
   width: 100%;
}
.main {
  height: 200px;
  margin-left: 110px;
  margin-right: 220px;
  background-color: green;
}
.left {
  float: left;
  height: 200px;
  width: 100px;
  margin-left: -100%;
  background-color: red;
}
.right {
  width: 200px;
  height: 200px;
  float: right;
  margin-left: -200px;
  background-color: blue;
}   

先把main中的內容顯示,main 的margin-left和margin-right的寬度設置成下面兩個div的寬度,而之后兩個div的margin-left都取負值,左側的負100%,右側的負(寬度)

  • 圣杯布局
  <div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
.container {
  margin-left: 120px;
  margin-right: 220px;
}
.main {
  float: left;
  width: 100%;
  height: 300px;
  background-color: red;
}
.left {
  float: left;
  width: 100px;
  height: 300px;
  margin-left: -100%;
  position: relative;
  left: -120px;
  background-color: blue;
}
.right {
  float: left;
  width: 200px;
  height: 300px;
  margin-left: -200px;
  position: relative;
  right: -220px;
  background-color: green;
}

跟雙飛翼布局很像,有一些細節上的區別,相對于雙飛翼布局來說,HTML 結構相對簡單,但是樣式定義就稍微復雜,也是優先加載內容主體。

  • 絕對定位布局
<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
.container {
  position: relative;
}
.main {
  height: 300px;
  margin: 0 120px;
  background-color: green;
}
.left {
  position: absolute;
  width: 100px;
  height: 300px;
  left: 0;
  top: 0;
  background-color: red;
}
.right {
  position: absolute;
  width: 100px;
  height: 300px;
  background-color: blue;
  right: 0;
  top: 0;
}

簡單實用,并且主要內容可以優先加載。

簡書 - 圣杯布局和雙飛翼布局(前端面試必看)
百度前端學院筆記 - 三欄式布局之雙飛翼與圣杯

居中布局

Centering in CSS: A Complete Guide

  • 水平居中
  1. 行內元素(inline):text-align: center;
  2. 塊級元素(block):設置寬度且 marigin-left 和 margin-right是設成 auto 。比如:margin:0 auto;
  3. 多個塊級元素:對父元素設置 text-align: center;,對子元素設置 display: inline-block;或者使用 flex 布局
  • 垂直居中
  1. 行內元素(inline)
    單行:設置上下 pandding 相等;或者設置 line-heightheight 相等
# 第一種
.link{
padding-top: 30px;
padding-bottom: 30px;
}
# 第二種
.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

多行:設置上下 pandding 相等;或者設置 display: table-cell;vertical-align: middle; 或者使用 flex 布局;或者使用偽元素

  1. 塊級元素(block):下面前兩種方案,父元素需使用相對布局
    a. 已知高度:子元素使用絕對布局 top: 50%;,再用負的 margin-top 把子元素往上拉一半的高度
    b. 未知高度:子元素使用絕對布局 position: absolute; top: 50%; transform: translateY(-50%);
    c. 使用 Flexbox:選擇方向,justify-content: center;
  • 水平垂直居中
  1. 定高定寬:先用絕對布局 top: 50%; left: 50%;,再用和寬高的一半相等的負 margin`把子元素回拉
  2. 高度和寬度未知:先用絕對布局 top: 50%; left: 50%;,再設置 transform: translate(-50%, -50%);
  3. 使用 Flexbox:justify-content: center; align-items: center;
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,792評論 1 92
  • CSS 定位問題 主要就是經典的絕對定位,相對定位問題。 10個文檔學布局:通過十個例子講解布局,主要涉及相對布局...
    強哥科技興閱讀 371評論 0 1
  • CSS布局 布局是CSS中一個重要部分,本文總結了CSS布局中的常用技巧,包括常用的水平居中、垂直居中方法,以及單...
    web前端學習閱讀 1,614評論 1 38
  • CSS 定位問題 主要就是經典的絕對定位,相對定位問題。 10個文檔學布局:通過十個例子講解布局,主要涉及相對布局...
    強哥科技興閱讀 771評論 0 0
  • 今天吃晚飯的時候,媽媽說:“明天家里要來客人,家里菜不多。今天晚上我們去逛超市。 我們先把家里的彈子帶上。...
    加油一高博閱讀 502評論 0 1