WEB(一）——圣杯布局、双飞翼布局（超详细）

10.21-10.25之 WEB任务（一）

1、一周复习hcj,HTML一般用的也就那些东西，了解一下行内元素、块级元素、行内块元素。
2、清除浮动（好像是五种还是六种方式）
3、BFC（概念、触发、作用、应用）
4、居中问题（水平垂直居中方法，大概有十来种，你自己总结一下）
5、圣杯布局（flex、float、position要会，尤其前两种，gird和table了解就行）
6、轮播图:js原生做弄清楚原理有箭头，实现了写导航点自动播放然后无缝

注:就是不是让你全背下来，但是常用的要会，不能写什么都要翻文档，菜鸟或者w3c都可以 。

上一篇：居中问题方法总结

五、圣杯布局、双飞翼布局

圣杯布局的三大特点：

• 三列布局，中间宽度自适应，两边定宽
• 中间栏要在浏览器中优先展示渲染
• 允许任意列的高度最高

具体示例 left宽200px，right宽300px，main在中间，宽度自适应，允许增加额外的DOM节点，但不能修改现有的节点顺序。
HTML：

CSS:

.main,.left,.right{
			min-height: 130px;
		}
		
		.main{
			background-color: blue;
		}
		.left{
			background-color: aqua;
			width: 200px;
		}
		.right{
			background-color: aquamarine;
			width: 300px;
		}

图示：

现在我们开始做布局吧！！！

• 首先给container加一个css的padding: 0 300px 0 200px;
  
• 再给这三个加一个float:left
  
• main被挤压了，给main加一个width:100%
  
• 现在要做的就是把left、right移上去到两边就好了。技巧：left增加一个margin-left：-100%，right增加一个margin-left:-300px（解释一下-100%，会让本来就在第二行左边界的left继续向左移动就跳到了上一行，-100%就到了上一行最左边，-300px又为什么到了上一行末尾呢？是因为当left走了之后right自动到第二行开头因为float嘛，然后有了-300px和自身宽度相同就也向左移动，到上一行末尾刚好300px）
  
• 会发现main被遮住了，用相对位置定义一下就可以解决啦！给这三个块块加一个position:relative，再给left单独加left:-200px，right单独加right:-300px，就成功啦！！！
  
  完整代码呈上：

    
    
    


 
　　
main
 
　　
left
 
　　
right
 

双飞翼布局
与圣杯布局差别不大，效果相同
HTML:

 
　　

			

				inner
			
		
 
　　
left
 
　　
right
 

CSS：不用相对定位，container最初的留白也可以注释掉

    .container {
        /* padding: 0 300px 0 200px; */
    }
    .main,.left,.right{
			min-height: 130px;
			float: left;
		}
		
		.main{
			background-color: blue;
			width: 100%;
		}
		.left{
			background-color: aqua;
			width: 200px;
			margin-left: -100%;
		}
		.right{
			background-color: aquamarine;
			width: 300px;
			margin-left: -300px;
		}
		.inner{
			margin: 0 300px 0 200px;
		}

绝对定位布局

• 绝对定位就好比暴力输出，简单易懂，直接上代码

HTML:

        
main
        
left
        
right
    

CSS:

.container{
			position: relative;
		}
		
		.main,.left,.right{
			top: 0;
			min-height: 130px;
		}
		
		.main{
			margin: 0 300px 0 200px;
			background-color: aqua;
		}
		
		.left{
			position: absolute;
			left: 0;
			width: 200px;
			background-color: aquamarine;
		}
		
		.right{
			position: absolute;
			right: 0;
			width: 18.75rem;
			background-color: antiquewhite;
		}

flex布局
建议在不熟悉flex的朋友点击链接复习一下，这篇flex的介绍很是详细Flex布局教程我在学习之后再写的如下的圣杯布局。
首先老规矩给出HTML：

		
我在右边，自适应
        
我在左边,width: 200px;

        
我在右边，width：300px
    

CSS:

 #flex{
            display: flex;//首先设置为flex布局
            background-color: skyblue;//也可以单独设置子元素颜色
            height: 100px;//定高
            line-height: 100px;//让文字垂直居中
        }

        .right{
            width: 300px;
        }
		#left{
			width: 200px;
			order: -1;//让这个flex-item移动到最左边
		}
        #center{
            background:pink;
            flex-grow: 1;因为left和right定宽了有剩余空间，1就可以铺满剩余空间，默认是0
           text-align: center;//文字水平居中
        }

效果图：

下一篇：原生JS轮播图实现