前言：
现在我们对“html三列布局定义”大约比较关注，咱们都需要学习一些“html三列布局定义”的相关内容。那么小编也在网摘上收集了一些有关“html三列布局定义””的相关内容，希望大家能喜欢，咱们快快来了解一下吧！页面布局之经典三栏布局
我们在学习前端技术时，首先避免不了的就是你的页面布局问题，其中布局中比较流行的布局方式就是三栏布局，其主要要求是 三列布局，中间宽度自适应，两边定宽； 经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局。
实现三栏布局主要有以下几种方法：
1.float+margin
原理：设置两个侧栏分别向左向右浮动，中间列通过外边距给两个侧栏腾出空间，中间列的宽度根据浏览器窗口自适应；
[html]
1. <span style="font-family:'Courier New';"><body>
2. <div class="left">left</div>
3. <div class="right">right</div>
4. <div class="main">main</div>
5. </body></span>
[html]
1. <span style="font-family:'Courier New';">html,body{
2. margin: 0;
3. height: 100%;
4. }
5. .left{
6. float: left;
7. width: 200px;
8. background: #1de;
9. height: 100%;
10. }
11.
12. .right{
13. float: right;
14. width: 200px;
15. background: red;
16. height: 100%;
17. }</span>
[html]
1. <span style="font-family:'Courier New';">.main{
2. height: 100%;
3. margin: 0 200px;
4. background: #11e;
5. }</span>
1.对.left,.right分别设置宽度，并对.left添加左浮动，对.right添加有浮动。2.对.main设置外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度(也可以使用margin:0 200px;上下边距为0，左右边距为200)。
2.position+margin
原理：通过绝对定位将两个侧栏固定，同样通过外边距给两个侧栏腾出空间，中间列自适应。
[html]
1. <span style="font-family:'Courier New';font-size:12px;"><body>
2. <div class="left">left</div>
3. <div class="main">main</div>
4. <div class="right">right</div>
5. </body></span>
[html]
1. <span style="font-family:'Courier New';font-size:12px;">html,body{
2. margin: 0;
3. height: 100%;
4. }
5.
6. .left{
7. height: 100%;
8. position: absolute;
9. top:0;
10. left: 0;
11. width: 200px;
12. background: #ac1;
13. }
14.
15. .right{
16. height: 100%;
17. position: absolute;
18. top:0;
19. right: 0;
20. width: 200px;
21. background: #1c1;
22. }
23.
24. .main{
25. height: 100%;
26. margin: 0 200px;
27. background: #12e;
28. }</span>
1.对两边侧栏分别设置宽度，设置定位方式为绝对定位，设置两侧栏的top值都为0，设置左侧栏的left值为0， 右侧栏的right值为0。
2.对主面板设置左右外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度
3.圣杯布局(float + 负margin)
原理：主面板设置宽度为100%，主面板与两个侧栏都设置浮动，常见为左浮动，这时两个侧栏会被主面板挤下去。通过负边距将浮动的侧栏拉上来，左侧栏的负边距为100%，刚好是窗口的宽度，因此会从主面板下面的左边跑到与主面板对齐的左边，右侧栏此时浮动在主面板下面的左边，设置负边距为负的自身宽度刚好浮动到主面板对齐的右边。为了避免侧栏遮挡主面板内容，在外层设置左右padding值为左右侧栏的宽度，给侧栏腾出空间，此时主面板的宽度减小。由于侧栏的负margin都是相对主面板的，两个侧栏并不会像我们理想中的停靠在左右两边，而是跟着缩小的主面板一起向中间靠拢。此时使用相对布局，调整两个侧栏到相应的位置。
[html]
1. <span style="font-family:'Courier New';font-size:12px;"><body>
2. <div class="main">main</div>
3. <div class="left">left</div>
4. <div class="right">right</div>
5. </body></span>
[html]
1. <span style="font-family:'Courier New';font-size:12px;">html,body{
2. margin: 0;
3. height: 100%;
4. padding: 0 200px 0 200px;
5. }
6. .main{
7. float: left;
8. height: 100%;
9. width: 100%;
10. background: #12e;
11. }
12.
13. .left {
14. float: left;
15. width: 200px;
16. height: 100%;
17. margin-left: -100%;
18. position: relative;
19. left: -200px;
20. background-color: rgb(255, 0, 0);
21. }
22.
23. .right {
24. float: left;
25. width: 200px;
26. height: 100%;
27. margin-left: -200px;
28. position: relative;
29. right: -200px;
30. background-color: yellow;
31. }</span>
1.三个部分都设置向左浮动，并设置width为100%、200px、200px；
2.设置 负边距，.left设置负左边距为100%，.right设置负左边距为负的自身宽度(将left的margin-left设置为-100%，此时左栏会移动到第一行的首部);
3.设置父元素的padding值给左右两个子面板留出空间。
4.设置两个子面板为相对定位，.left的left值为负的left宽度，.right的right值为负的right宽度。
4.双飞翼布局(float + 负margin)
原理：双飞翼布局和圣杯布局的思想有些相似，都利用了浮动和负边距，但双飞翼布局在圣杯布局上做了改进，在main元素上加了一层div, 并设置margin,由于两侧栏的负边距都是相对于main-wrap而言，main的margin值变化便不会影响两个侧栏，因此省掉了对两侧栏设置相对布局的步骤。
[html]
1. <body>
2. <div class="main">
3. <div class="content">main</div>
4. </div>
5. <div class="left">left</div>
6. <div class="right">right</div>
7. </body>
[html]
1. html,body{
2. margin: 0;
3. height: 100%;
4. padding: 0 100px 0 100px;
5. }
6. .main {
7. float: left;
8. height: 100%;
9. width: 100%;
10. }
11. .content {
12. height: 100%;
13. margin-left: 100px;
14. margin-right: 200px;
15. background-color: green;
16. }
17. .left {
18. float: left;
19. height: 100%;
20. width: 100px;
21. margin-left: -100%;
22. background-color: red;
23. }
24. .right {
25. width: 200px;
26. height: 100%;
27. float: left;
28. margin-left: -200px;
29. background-color: blue;
30. }
5.Flex布局
原理：用一个容器container包裹三栏，设置comtainer容器的display属性为flex，左右栏设置宽度为300px，中间栏设置flex:1，这里的1表示宽度比例，具体数值取决于其它盒子的flex值，由于这里其它盒子宽度固定，所以中间栏会自动填充
[html]
1. <div class="container">
2. <div class="left"></div>
3. <div class="main"></div>
4. <div class="right"></div>
5. </div>
[html]
1. .container{
2. display: flex;
3. }
4. .left{
5. background: red;
6. width: 200px;
7. height: 100%;
8. }
9. .main{
10. height: 100%;
11. flex: 1;
12. background: yellow;
13. }
14. .right{
15. height: 100%;
16. background:blue;
17. width: 200px;
18. }
待续。。。
标签： #html三列布局定义
