圣杯布局——浮动、负边距、定位

一、参考文章

　　1.圣杯布局的实现过程（https://www.cnblogs.com/tinyphp/p/4742922.html）

　　2.http://www.jianshu.com/p/f9bcddb0e8b4

二.圣杯布局中用到的属性：

　　1.浮动——float：设置浮动后，元素会脱离文档流，如果希望文档流按照布局顺序显示，那么需要用到“清除浮动”的hack

　　　　(1).left：将元素像右浮动

　　　　(2).right：将元素向左浮动

　　　　(3).none（默认值）：取消元素的浮动

　　2.清除浮动——clearfix hack（http://nicolasgallagher.com/micro-clearfix-hack/）：主要实现如下

 1 .clearfix:before,
 2 
 3 .clearfix:after{
 4 
 5 content:" ";
 6 
 7 display:table;
 8 
 9 }
10 
11  
12 
13 .clearfix:after{
14 
15 clear:both;
16 
17 }

　　3.定位——position

　　　　(1).static（默认值）：元素正常定位

　　　　(2).relative：相对定位，不脱离文档流。配合top、right、bottom、left使用。

　　　　(3).absolute：绝对定位，脱离文档流。对于最近的一个非static父元素进行定位，配合top、right、bottom、left使用。

　　　　(4).fixed：固定定位，脱离文档流。对于viewport进行定位，配合top、right、bottom、left使用。

　　4.边距——margin

　　　　(1).此属性为正值时，用于设置元素的外边距。

　　　　(2).此属性为负值时，会将元素往前拉。

三.总结：

　　1.圣杯布局的核心在于负边距的运用，再配合浮动、定位来完成整体布局。

　　2.关键点拆分：

　　　　(1).中间不定宽的元素放在最前，然后是左侧元素和右侧元素。（目的是为了让不定宽元素最先渲染）

　　　　(2).子元素浮动后，需要在父元素清除浮动。

　　　　(3).利用负边距，将左侧和右侧元素拉到中间不定宽元素的两侧。

　　　　(4).给包含了左侧元素、右侧元素、中间不定宽元素的父元素设置外边距，给左右两侧元素腾出空间。

　　　　(5).左右两侧元素使用相对定位，拉开和中间不定宽元素的距离。

四.界面截图：

五.代码：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5   <meta charset="UTF-8">
  6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8   <title>Document</title>
  9   <style>
 10     * {
 11       margin: 0px;
 12       padding: 0px;
 13     }
 14 
 15     ul {
 16       list-style: none;
 17     }
 18 
 19     .clearfix:before,
 20     .clearfix:after {
 21       content: " ";
 22       display: table;
 23     }
 24 
 25     .clearfix:after {
 26       clear: both;
 27     }
 28 
 29     body {
 30       min-width: 800px;
 31     }
 32 
 33     header,
 34     footer {
 35       background: yellowgreen;
 36     }
 37 
 38     .container {
 39       padding: 0 150px;
 40       background: gray;
 41     }
 42 
 43     .container>main {
 44       width: 100%;
 45       float: left;
 46       background: deeppink;
 47     }
 48 
 49     .container>nav,
 50     .container>aside {
 51       width: 150px;
 52       float: left;
 53       background: aqua;
 54     }
 55 
 56     .container>nav {
 57       margin-left: -100%;
 58       position: relative;
 59       left: -150px;
 60     }
 61 
 62     .container>aside {
 63       margin-left: -150px;
 64       position: relative;
 65       left: 150px;
 66     }
 67   </style>
 68 </head>
 69 
 70 <body>
 71   <header>
 72     this is header
 73   </header>
 74   <div class="container clearfix">
 75     <main class="main">
 76       this is main content.
 77     </main>
 78     <nav>
 79       <ul>
 80         <li>
 81           <a href="#">link1</a>
 82         </li>
 83         <li>
 84           <a href="#">link2</a>
 85         </li>
 86         <li>
 87           <a href="#">link3</a>
 88         </li>
 89         <li>
 90           <a href="#">link4</a>
 91         </li>
 92         <li>
 93           <a href="#">link5</a>
 94         </li>
 95         <li>
 96           <a href="#">link6</a>
 97         </li>
 98         <li>
 99           <a href="#">link7</a>
100         </li>
101         <li>
102           <a href="#">link8</a>
103         </li>
104         <li>
105           <a href="#">link9</a>
106         </li>
107         <li>
108           <a href="#">link10</a>
109         </li>
110       </ul>
111     </nav>
112     <aside>
113       <ul>
114         <li>
115           <a href="#">link1</a>
116         </li>
117         <li>
118           <a href="#">link2</a>
119         </li>
120         <li>
121           <a href="#">link3</a>
122         </li>
123         <li>
124           <a href="#">link4</a>
125         </li>
126         <li>
127           <a href="#">link5</a>
128         </li>
129         <li>
130           <a href="#">link6</a>
131         </li>
132         <li>
133           <a href="#">link7</a>
134         </li>
135         <li>
136           <a href="#">link8</a>
137         </li>
138         <li>
139           <a href="#">link9</a>
140         </li>
141         <li>
142           <a href="#">link10</a>
143         </li>
144       </ul>
145     </aside>
146   </div>
147   <footer>
148     this is footer
149   </footer>
150 </body>
151 
152 </html>