三栏布局

三栏布局，顾名思义就是两边固定宽度，中间随浏览器宽度自适应。

比如：

三栏布局 - 图1

直观图：

image.png

普通布局：

可以看出如果浏览器窗口发生改变时，右边的模块会遮盖中间部分
image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         .left{
  10.             width: 100px;
  11.             height: 200px;
  12.             background: pink;
  13.             float: left;
  14.             margin-right: 20px;
  15.         }
  16.         .right{
  17.             width: 200px;
  18.             height: 200px;
  19.             background: yellow;
  20.             float: right;
  21.             margin-left: 20px;
  22.         }
  23.         .main{
  24.             width: 900px;
  25.             height: 200px;
  26.             background: green;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.      <div class="container">
  32.         <div class="left">left</div>
  33.         <div class="right">right</div>
  34.         <div class="main">main</div>
  35.     </div>
  36. </body>
  37. </html>

1.流体布局

就像放在容器中的水流一样，内容区域会随着margin, padding, border的出现自动填满剩余空间，这就是块状元素的流体特性。

左右模块各自向左右浮动，设置中间模块的 margin 值使中间模块撑开。

要把中间模块放在最下边

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         .left{
  10.             width: 100px;
  11.             height: 200px;
  12.             background: pink;
  13.             float: left;
  14.         }
  15.         .right{
  16.             width: 200px;
  17.             height: 200px;
  18.             background: green;
  19.             float: right;
  20.         }
  21.         .main{
  22.             height: 200px;
  23.             margin-left: 120px;
  24.             margin-right: 220px;
  25.             background: yellow;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="container">
  31.       <div class="left">left</div>
  32.       <div class="right">right</div>
  33.       <div class="main">main</div>
  34.     </div>
  35. </body>
  36. </html>

缺点就是主要内容无法最先加载，当页面内容较多时会影响用户体验。

2.BFC三栏布局

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

BFC 规则：BFC 区域，不会与给了浮动的元素重叠。

可以任意调动左右模块的宽度，但是不会与给了浮动的模块重叠

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         .left{
  10.             width: 100px;
  11.             height: 200px;
  12.             background: pink;
  13.             float: left;
  14.             margin-right: 20px;
  15.         }
  16.         .right{
  17.             width: 200px;
  18.             height: 200px;
  19.             background: yellow;
  20.             float: right;
  21.             margin-left: 20px;
  22.         }
  23.         .main{
  24.             height: 200px;
  25.             overflow: hidden;
  26.             background: green;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.      <div class="container">
  32.         <div class="left">left</div>
  33.         <div class="right">right</div>
  34.         <div class="main">main</div>
  35.     </div>
  36. </body>
  37. </html>

3.双飞翼布局

主要为了解决中间模块最先加载

利用的是元素浮动+margin 负值的应用。

理解负边距的作用，left的margin-left:-100%使它上移一行，同时right向左移占据left原先位置，同理，right的margin-left:-200px使它上移并靠右

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         .container {
  10.             float: left;
  11.             width: 100%;
  12.         }
  13.         .main {
  14.             height: 200px;
  15.             margin-left: 110px;
  16.             margin-right: 220px;
  17.             background-color: green;
  18.         }
  19.         /* 用于清除浮动 */
  20.         .main::after {
  21.             display: block;
  22.             content: '';
  23.             clear: both;
  24.         }
  25.         .left {
  26.             float: left;
  27.             height: 200px;
  28.             width: 100px;
  29.             margin-left: -100%;      
  30.             background-color: pink;
  31.         }
  32.         .right {
  33.             width: 200px;
  34.             height: 200px;
  35.             float: right;
  36.             margin-left: -200px;   //宽度是多少它的margin-left就给多少
  37.             background-color: yellow;
  38.         }    
  39.     </style>
  40. </head>
  41. <body>
  42.         <div class="container">
  43.             <div class="main">main</div>
  44.         </div>
  45.         <div class="left">left</div>
  46.         <div class="right">right</div>
  47. </body>
  48. </html>

4.圣杯布局

主要运用相对定位+left/right负值
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.           .container{
  10.             padding:0 150px;
  11.           } 
  12.          .main{
  13.             width: 100%;
  14.             height: 200px;
  15.             float: left;
  16.             background: green;
  17.          }
  18.         .left{
  19.             width: 100px;
  20.             height: 200px;
  21.             background: pink;
  22.             float: left;            
  23.             position: relative;
  24.             left: -120px;
  25.             margin-left: -100%;     
  26.         }
  27.         .right{
  28.             width: 200px;
  29.             height: 200px;
  30.             background: yellow;
  31.             float: left;          
  32.             position: relative;
  33.             right: -220px;
  34.             margin-left: -200px;
  35.         }
  37.     </style>
  38. </head>
  39. <body>
  40.      <div class="container">
  41.         <div class="main">main</div>
  42.         <div class="left">left</div>
  43.         <div class="right">right</div>
  44.      </div>
  45. </body>
  46. </html>

这里需要注意：
1: 先写main,然后是left和right，因为需要先渲染main;
2: left、right需设置position:relative以及相应的left、right负值
3:理解负边距的作用，left的margin-left:-100%使它上移一行，同时right向左移占据left原先位置，同理，right的margin-left:-200px使它上移并靠右

5.Flex布局

order—元素的排列顺序，下标从0开始

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.          .container{
  10.             display: flex;
  11.         }
  12.          .main{
  13.             flex: 3;
  14.             height: 200px;
  15.             background: green;
  16.         }
  17.         .left{
  18.             order: -1;   //元素的排列顺序，下标从0开始
  19.             flex: 0 1 100px;  
  20.             height: 200px;
  21.             background: pink;
  22.             margin-right: 20px;
  23.         }
  24.         .right{
  25.             flex:0 1 200px;
  26.             height: 200px;
  27.             margin-left: 20px;
  28.             background: yellow;  
  29.         }
  31.     </style>
  32. </head>
  33. <body>
  34.      <div class="container">
  35.         <div class="left">left</div>
  36.         <div class="main">main</div>
  37.         <div class="right">right</div>
  38.      </div>
  39. </body>
  40. </html>

6.table布局

display:table-cell—子元素会平分table的宽度，
不能设置栏间距

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         .container{
  10.             display: table;
  11.             width: 100%;
  12.         }
  13.         .left,.right,.main{
  14.             display: table-cell;
  15.         }
  16.         .left{
  17.             width: 100px;
  18.             height: 200px;
  19.             background: pink;
  20.         }
  21.         .right{
  22.             width: 200px;
  23.             height: 200px;
  24.             background: yellow;  
  25.         }
  26.         .main{
  27.             background: green;
  28.         }
  30.     </style>
  31. </head>
  32. <body>
  33.      <div class="container">
  34.         <div class="left">left</div>
  35.         <div class="main">main</div>
  36.         <div class="right">right</div>
  37.      </div>
  38. </body>
  39. </html>

7.绝对定位布局

中间模块可以优先加载
给left、right绝对定位，main不用设置宽度

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         .container{
  10.             position: relative;
  11.         }
  12.         .main{
  13.             height: 200px;
  14.             margin: 0 120px;
  15.             background: yellow;
  16.         }
  17.         .left{
  18.             width: 100px;
  19.             height: 200px;
  20.             position: absolute;
  21.             left: 0;
  22.             top: 0;
  23.             background: pink;
  24.         }
  25.         .right{
  26.             width: 100px;
  27.             height: 200px;
  28.             position: absolute;
  29.             right: 0;
  30.             top: 0;
  31.             background: green;
  32.         }
  33.     </style>
  34. </head>
  35. <body>
  36.     <div class="container">
  37.         <div class="left">left</div>
  38.         <div class="main">main</div>
  39.         <div class="right">right</div>
  40.     </div>
  41. </body>
  42. </html>