CSS面试题-圣杯布局

什么是圣杯布局

圣杯布局：两侧栏的宽度固定，中间栏的宽度自适应。

圣杯布局的特点

• 中间部分在DOM结构上优先，以便先行渲染
• 允许三列中的任意一列成为最高列（三列高度不一样并且可以以任一列的高度为最高）

圣杯布局如何实现

• 标准流
• 浮动
• Flex布局

标准流-实现圣杯布局

要点：

• 定宽栏设置绝对定位，定位在大框架的左右两侧；
• 可变宽栏不设置绝对定位和宽度，因此为标准流。

	 <div class="container">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
	</div>

 	 	body {
 	 		margin: 0;
            padding: 0;    
            width: 100%;
            min-width: 600px; //防止页面过小，影响布局
       }
        
        .container {
            height: 200px;
            width: 100%;
            overflow: hidden;
        }
        
        .left,
        .right {
            position: absolute; //设置绝对定位
            top: 0;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        
        .left {
            left: 0; //左定位
        }
        
        .right {
            right: 0;//右定位
        }
        
        .center {
            /*标准流，不用设置宽度100%，直接随父元素宽度*/
            height: 200px;
            margin: 0 210px;
            background-color: red;
        }

浮动-实现圣杯布局

要点：

• 三栏都设置为浮动和相对定位；
• 可变宽栏放在最前面，且宽度100%；
• 由于浮动，可变宽栏占据了整个container，定宽栏被挤下去了；
• 对于左定宽栏，我们要把它拉到container的最左侧，因此设置它的margin-left：100%。但这会左定宽栏把middle给遮住了，所以这时给外层的container设置 padding值，给left空出位置；
• 对于右定宽栏，设置它的margin-left：自身宽度，将它拉回了上一行，最后再设置它的right，把它拉到container内。

 	<div class="container">
        <div class="center">center</div>//可变宽栏放在最前面，先渲染
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

		body { 
			margin: 0;
            padding: 0;    
            width: 100%;
            min-width: 600px; //防止页面过小，影响布局
        }
        
        .container {
            height: 200px;
            padding: 0 200px 0 200px;
            overflow: hidden;
        }
        
        .left,
        .right,
        .center {
            position: relative;
            float: left;
            height: 200px;
        }
        
        .left,
        .right {
            width: 200px;
            background-color: blue;
        }
        
        .center {
            width: 100%;
            background-color: red;
        }
        
        .left {
            margin-left: -100%;
            left: -200px;
        }
        
        .right {
            margin-left: -200px;
            right: -200px;
        }

Flex-实现圣杯布局

要点：

• container设置diaplay:flex；
• 将左右定宽栏设置固定宽度；
• 可变宽栏设置flex:1，即整栏宽度减去左右两个固定栏宽度，剩下宽度全给可变宽栏;
• 可变宽栏设置oerder：1；或者把它放在定宽栏前面，以便先行渲染。

	<div class="container">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>

		body {
            margin: 0;
            padding: 0;
            width: 100%;
            min-width: 600px;//防止页面过小，影响布局
        }
        
        .container {
            height: 200px;
            width: 100%;
            overflow: hidden;
            display: flex; //felx布局
        }
        
        .left,
        .right {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        
        .center {
            flex: 1;
            order：1;
            height: 200px;
            margin: 0 10px;
            background-color:red;
        }