網頁佈局

時間 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。