12. 網頁布局總結
13. 元素的顯示與隱藏
續web前端之css技術（一）
續web前端之css技術（二）
續web前端之css技術（三）
浮動可以讓多個塊級盒子一行沒有縫隙排列顯示， 經常用於橫向排列盒子。
定位則是可以讓盒子自由的在某個盒子內移動位置或者固定螢幕中某個位置，並且可以壓住其他盒子。
定位：將盒子定在某乙個位置，所以定位也是在擺放盒子， 按照定位的方式移動盒子。
定位 = 定位模式 + 邊偏移 。
定位模式用於指定乙個元素在文件中的定位方式。邊偏移則決定了該元素的最終位置。
定位模式決定元素的定位方式 ，它通過 css 的position屬性來設定，其值可以分為四個：值語義
static靜態定位
relative相對定位
absolute絕對定位
fixed固定定位
邊偏移就是定位的盒子如何移動。有top、left、bottom和right四個屬性。
邊偏移屬性
描述top頂端偏移量，定義元素相對於其父元素上邊線的距離
left左側偏移量，定義元素相對於其父元素左邊線的距離
bottom底部偏移量，定義元素相對於其父元素下邊線的距離
right右側偏移量，定義元素相對於其父元素右邊線的距離
靜態定位是元素的預設定位方式，無定位的意思。
語法：
選擇器
·靜態定位按照標準流特性擺放位置，它沒有邊偏移
·靜態定位在布局時很少用到
相對定位是元素在移動位置的時候，是相對於它原來的位置來說的。
語法：
選擇器
·它是相對於自己原來的位置來移動的（移動位置的時候參照點是自己原來的位置）。
·原來在標準流的位置繼續占有，後面的盒子仍然以標準流的方式對待它。
絕對定位是元素在移動位置的時候，是相對於它祖先元素來說的。
語法：
選擇器
·如果沒有祖先元素或者祖先元素沒有定位，則以瀏覽器為準定位。
·如果祖先元素有定位（相對、絕對、固定定位），則以最近一級的有定位祖先元素為參考點移動位置。
·絕對定位不再占有原先的位置。（脫標）
固定定位是元素固定於瀏覽器可視區的位置。
主要使用場景： 可以在瀏覽器頁面滾動時元素的位置不會改變。
語法：
選擇器
·以瀏覽器的可視視窗為參照點移動元素。
·固定定位不再占有原先的位置。
·固定定位也是脫標的，其實固定定位也可以看做是一種特殊的絕對定位。
粘性定位可以被認為是相對定位和固定定位的混合。
語法：
選擇器
·以瀏覽器的可視視窗為參照點移動元素（固定定位特點）。
·粘性定位占有原先的位置（相對定位特點）。
·必須新增top、left、right、bottom其中乙個才有效。
·跟頁面滾動搭配使用。 相容性較差，ie 不支援
含義：
子級是絕對定位的話，父級要用相對定位
解釋：
·子級絕對定位，不會占有位置，可以放到父盒子裡面的任何乙個地方，不會影響其他的兄弟盒子
·父盒子需要加定位限制子盒子在父盒子內顯示
·父盒子布局時，需要占有位置，因此父親只能是相對定位
總結：
因為父級需要占有位置，因此是相對定位，子盒子不需要占有位置，則是絕對定位
定位模式
是否脫標
移動位置
static靜態定位
否不能使用邊偏移
relative相對定位
否（占有位置）
相對於自身位置移動
absolute絕對定位
是（不占有位置）
帶有定位的父級
fixed固定定位
是（不占有位置）
瀏覽器可視區
sticky粘性定位
否（占有位置）
瀏覽器可視區
在使用定位布局時，可能會出現盒子重疊的情況。此時，可以使用 z-index 來控制盒子的前後次序 (z軸)。
語法：
選擇器
·n數值可以是正整數、負整數或 0, 預設是 auto，數值越大，盒子越靠上
·如果屬性值相同，則按照書寫順序，後來居上
·數字後面不能加單位
·只有定位的盒子才有z-index屬性
可以讓盒子上下排列或者左右排列，垂直的塊級盒子顯示就用標準流布局。
可以讓多個塊級元素一行顯示或者左右對齊盒子，多個塊級盒子水平顯示就用浮動布局。
定位最大的特點是有層疊的概念，就是可以讓多個盒子前後疊壓來顯示。如果元素自由在某個盒子內移動就用定位布局。
本質：讓乙個元素在頁面內顯示或隱藏。
display屬性用於設定乙個元素應如何顯示。
·display: none;：隱藏物件
·display：block;：除了轉換為塊級元素之外，同時還有顯示元素的意思
display屬性隱藏元素後，不再占有原來的位置。
visibility屬性用於指定乙個元素應可見還是隱藏。
·visibility: visible;：元素可視
·visibility: hidden;：元素隱藏
visibility隱藏元素後，繼續占有原來的位置。
如果隱藏元素想要原來位置， 就用visibility: hidden;如果隱藏元素不想要原來位置， 就用display: none;overflow屬性指定了如果內容溢位乙個元素的框（超過其指定高度及寬度） 時，會怎麼做。
屬性值描述
visible不剪下內容，也不增加滾動條
hidden不顯示超過物件尺寸的內容，超出的部分隱藏掉
scroll不管內容有沒有超出物件尺寸，都顯示滾動條
auto內容超出物件尺寸自動顯示滾動條，不超出則不顯示
前端技術之 CSS
在標籤上設定style屬性 background color 2459a2 height 48px 編寫css樣式 1.標籤的style屬性 2.寫在head裡面 style標籤中寫樣式 id選擇區 i1 class選擇器 名稱 標籤 class 名稱 3 注釋 4 邊框 寬度，樣式，顏色 bord...
web前端學習之CSS
書寫樣式和引入方法 css cascading style sheets 全程為層疊樣式表，它主要用於定義html內容在瀏覽器內的顯示樣式，如文字大小 顏色 加粗等等。使用css樣式的好處是通過定義某個樣式，可以讓不同的網頁位置有著統一的字型 字型大小或者顏色等等。換言之，使用css可以有效的減少我...
web前端之CSS簡介
css 指層疊樣式表 cascading style sheets 樣式定義如何顯示 html 元素 樣式通常儲存在樣式表中 把樣式新增到 html 中，是為了解決內容與表現分離的問題 外部樣式表可以極大提高工作效率 外部樣式表通常儲存在 css 檔案中 多個樣式定義可層疊為一 樣式表允許以多種方式...