网页布局

时间 2019-11-29

标签网页布局栏目 HTML 繁體版

原文原文链接

圣杯布局和双飞翼布局实现的问题都是三列布局，两边定宽，中间自适应布局，要注意的是中间栏(重要的东西)要在放在文档流前面以优先渲染。css

一，圣杯布局html

一、首先定义三列，为它们设置简单的css样式，代码以下：web

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>圣杯布局</title>
</head>
<body>
	<style> 
	   .left{
	        background: #E79F6D;  
	        width:150px;  
	        float:left;
	        margin-left:-100%;
	    }  
	    .main{  
	        background: #D6D6D6;  
	        width:100%;  
	        float:left;   
	    }  
	    .right{
	        background: #77BBDD;  
	        width:190px;  
	        float:left;
	    }  
	</style>
	<div class="con">  
        <div class="main">Main</div>  
        <div class="left">Left</div>  
        <div class="right">Right</div>  
    </div> 
</body>
</html>

实现效果图以下：浏览器

二、咱们让Left和Right与main在同一排，这里须要用到margin-left的负值，这里若是margin-left是负值，我理解的是在此基础上往左边移，设置Left的margin-left:-100%，也就是往左移main的整个宽度，这时Left的左边缘跟main的左边缘重叠，即Left的150px宽覆盖住了main的150px宽；布局

这时Right跑到左边了，再对Right设置margin-left:-190px;即right也跑到上面去了，Right的右边缘和main的右边缘对齐，Right的宽度覆盖了main的右边的宽度；如今Left和Right都跑上面去了，可是须要注意的是main的值不见了，由于它被覆盖了，设置left和right的margin值只是改变Left和Right的位置，对于main来讲仍是在之前的位置上，接下来要考虑的问题就是如何定位main的位置？flex

三、须要给con容器加padding值，padding值的做用是给这整个容器均移动padding值，如在刚开始Left和Right没上移的时候，给con加padding-left:150px;padding-right:190px;值的效果以下：spa

如今在Left和Right以及main都在同一排的状况下，加padding的值，就把main的定位到合适的位置了，可是这时的问题是：Left和Right也跟着一块儿缩了，因此要把Left和Right定位带以前的位置，该怎么定位呢？.net

四、这时Left和Right须要用到css 的left属性了，left 属性规定元素的左边缘,该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。注意使用属性left的时候要给这个元素定位，绝对定位和相对定位均可以，若是不使用定位的话没有效果，具体为何我也不知道，你们能够自行百度。code

Left的css样式加上：position:relative;left：-150px; 同理css的right属性也是如此，position:relative;right:-190px; Left和Right回到它们各自的位置上，OK，完成圣杯的布局，效果图贴上：htm

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>圣杯布局</title>
</head>
<body>
	<style>
		.con{
			padding-left:150px;
			padding-right:190px;
		}
	   .left{
	        background: #E79F6D;  
	        width:150px;  
	        float:left;
	        margin-left:-100%;
	        position:relative;
	        left:-150px;
	    }  
	    .main{  
	        background: #D6D6D6;  
	        width:100%;  
	        float:left;   
	    }  
	    .right{
	        background: #77BBDD;  
	        width:190px;  
	        float:left;
	        margin-left:-190px;
	        position:relative;
	        right:-190px;
	    }  
	</style>
	<div class="con">  
        <div class="main">Main</div>  
        <div class="left">Left</div>  
        <div class="right">Right</div>  
    </div> 
</body>
</html>

二，双飞翼布局

双飞翼布局能够当作是对圣杯布局的改进，由于圣杯布局用到的标签属性较多，用着也较麻烦，因此淘宝玉伯大大就提出来双飞翼的布局，双飞翼是把三列布局比做鸟，中间栏是鸟身，两边宽是鸟的两翼，重要的是鸟的身体摆好，再安两翼。思路和圣杯布局同样，这里我仍是以上一个做例子，用到main，left，right（其实用main sub extra更形象）。前两步都是同样的，重要的是第三步，在前两步的完成后已经造成同行排列，只不过main值被覆盖了，圣杯布局的第三步是给con容器添加padding属性，而双飞翼布局是为main里面的内容再加一个div，让main的内容包含在内层div里，

这时，只要设置mc的margin属性就能够实现三列布局了，并且main也正常显示；这里，不用设置con容器的padding属性，也不用给Left和Right运用left，right属性，由于设置padding属性就是为了避免覆盖main的值，如今将main里的内容放在一个div里，再为它设置margin属性，也就实现了不遮挡main里面的内容值，所以双飞翼布局使用属性个数减小，看着更简便。代码以下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>双飞翼布局</title>
</head>
<body>
	<style>        
        .left{  
            background: #E79F6D;  
            width:150px;  
            float:left;  
            margin-left: -100%;  
        }  
        .main{  
            background: #D6D6D6;  
            width:100%;  
            float:left;   
        }  
        .mc {  
            margin-left: 150px;  
        }  
        .right{  
            background: #77BBDD;  
            width:190px;  
            float:left;  
            margin-left: -190px;  
        }  
	</style>  
	<div class="con">  
        <div class="main">  
            <div class="mc">Main</div>  
        </div>  
        <div class="left">Left</div>  
        <div class="right">Right</div>  
    </div> 
</body>
</html>

三，布局传统的解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性

案例：左右2懒，左侧宽度200，左侧高度随右侧改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{ margin:0; padding:0;}
        .container{position:relative; width:100%; height:auto;}
        .left{ position:absolute; width:200px; height:100%; float:left; background:yellow}
        .right{ margin-left:210px; background:#eee;}
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left12<br>left12<br>left23<br>left44<br>left44<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left</div>
        <div class="right">right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br>right<br></div>
    </div>
</body>
</html>

四，flex布局，

任一个容器均可以设置为flex布局

.box{
  display:flex;
}

行内元素也可使用 Flex 布局, display:inline-flex;

Webkit 内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意，设为 Flex 布局之后，子元素的float、clear和vertical-align属性将失效。

flex-direction:row|row-reverse|column|column-reverse
               //row:左->右 row-reverse:右->左 column:上->下 column-reverse:下->上

flex-wrap:nowrap|wrap|wrap-reverse
          //nowrap:不换行  wrap:换行，第一行在上  wrap-reverse:换行，第一行在下

flex-flow:flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

justify-content:flex-start|flex-end|center|space-between|space-around
                //flex-start:左对齐  flex-end:右对齐 center:水平居中 space-between:两端对齐有间隔  space-around:居中对齐，有间隔

align-item:flex-start|flex-end|center|baseline|stretch
           //flex-start:上对齐  flex-end:下对齐  center:垂直居中  baseline:项目第一行文字基线对齐  stretch:高未知时高占满整个容器

align-content:flex-start|flex-end|center|space-between|space-around|stretch

参考：1，http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

2，https://blog.csdn.net/Sunshine_ZCC/article/details/51622599