css頁面佈局

在CSS中，html中的標籤元素大致被分爲三種不一樣的類型：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。

經常使用的塊狀元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
經常使用的內聯元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
經常使用的內聯塊狀元素有：<img>、<input>

1、塊狀元素特色

一、每一個塊級元素都重新的一行開始，而且其後的元素也另起一行。

二、元素的高度、寬度、行高以及頂和底邊距均可設置。

三、元素寬度在不設置的狀況下，是它自己父容器的100%（和父元素的寬度一致），除非設定一個寬度。

將內聯元素a轉換爲塊狀元素，a{display:block;}

2、內聯元素特色

一、和其餘元素都在一行上；

二、元素的高度、寬度及頂部和底部邊距不可設置；

三、元素的寬度就是它包含的文字或圖片的寬度，不可改變。

塊狀元素div轉換爲內聯元素
div{
     display:inline;
 }

3、內聯塊狀元素特色 

一、和其餘元素都在一行上；

二、元素的高度、寬度、行高以及頂和底邊距均可設置。

4、盒子模型

 

佈局模型

在網頁中，元素有三種佈局模型：

一、流動模型（Flow）
二、浮動模型 (Float)
三、層模型（Layer）

 

流動模型

流動（Flow）是默認的網頁佈局模式。

第二點，在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分佈顯示。（內聯元素可不像塊狀元素這麼霸道獨佔一行）。

浮動模型

塊狀元素這麼霸道都是獨佔一行，若是如今咱們想讓兩個塊狀元素並排顯示，怎麼辦呢？不要着急，設置元素浮動就能夠實現這一願望。任何元素在默認狀況下是不能浮動的，但能夠用 CSS 定義爲浮動，如 div、p、table、img 等元素均可以被定義爲浮動。以下代碼能夠實現兩個 div 元素一行顯示。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
<div id="div1"></div>
<div id="div2"></div>

什麼是層佈局模型？

層佈局模型就像是圖像軟件PhotoShop中很是流行的圖層編輯功能同樣，每一個圖層可以精肯定位操做，但在網頁設計領域，因爲網頁大小的活動性，層佈局沒能受到熱捧。可是在網頁上局部使用層佈局仍是有其方便之處的。

如何讓html元素在網頁中精肯定位，就像圖像軟件PhotoShop中的圖層同樣能夠對每一個圖層可以精肯定位操做。CSS定義了一組定位（positioning）屬性來支持層佈局模型。

層模型有三種形式：
一、絕對定位(position: absolute)
二、相對定位(position: relative)
三、固定定位(position: fixed)

絕對定位：若是想爲元素設置層模型中的絕對定位，須要設置position:absolute(表示絕對定位)，這條語句的做用將元素從文檔流中拖出來，而後使用left、right、top、bottom屬性相對於其最接近的一個具備定位屬性的父包含塊進行絕對定位。若是不存在這樣的包含塊，則相對於body元素，即相對於瀏覽器窗口。

相對定位：須要設置position:relative（表示相對定位），它經過left、right、top、bottom屬性肯定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(而且元素像層同樣浮動了起來)，而後相對於之前的位置移動，移動的方向和幅度由left、right、top、bottom屬性肯定，偏移前的位置保留不動。

相對定位（fixed）：表示固定定位，與absolute定位類型相似，但它的相對移動的座標是視圖（屏幕內的網頁窗口）自己。因爲視圖自己是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，所以固定定位的元素會始終位於瀏覽器窗口內視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed;屬性功能相同。如下代碼能夠實現相對於瀏覽器視圖向右移動100px，向下移動50px。而且拖動滾動條時位置固定不變。

水平居中設置-行內元素

若是被設置元素爲文本、圖片等行內元素時，水平居中是經過給父元素設置 text-align:center 來實現的。

水平居中設置-定寬塊狀元素（定寬塊狀元素：塊狀元素的寬度width爲固定值。）

知足定寬和塊狀兩個條件的元素是能夠經過設置「左右margin」值爲「auto」來實現居中的。