《HTML5與CSS3基礎教程》第十一章學習筆記 用CSS進行佈局

第11章 用CSS進行佈局

11.1 開始佈局的注意事項

1. 內容與顯示分離
2. 選擇合適的佈局方式
   1. 固定佈局
   2. 響應式佈局：亦稱爲流式頁面
3. 使用多個瀏覽器對頁面進行測試

11.2 構建頁面

• 構建頁面
  • 恰當的使用article、aside、nav、section、header、footer、div
  • 使用標題元素h1~h6
  • 使用合適的語義標記剩餘的內容，如段落、表和列表
  • 添加註釋

11.4 對默認樣式進行重置或標準化

• 抹平差異的方法主要有兩種（只使用其中一種即可）。
  • 使用CSS重置（reset）開始主樣式表，如Eric Meyer創建的Meyer重置http://meyerweb.com/eric/tools/css/reset/。另外還有其他的一些重置樣式表。
  • 使用Nicolas Gallagher和Jonathan Neal創建的normalize.css開始主樣式表。該樣式表位於http://necolas.github.com/normalize.css/（最新版本使用Download按鈕）。

11.5 盒模型

- **內容區域**
- **內邊距(padding)**：內容區域周圍的空間
- **邊框(border)**：內邊距的邊緣
- **外邊距(margin)**：邊框外面將元素與相鄰隔開的不可見區域

• 無設置box-sizing:border-box:長度和寬度等於內邊距裏面的內容區域
• 有設置box-sizing:border-box:長度和寬度等於除外邊距之外的所有元素

11.6 控制元素的顯示類型和可見性

• visibility控制元素的可見性,當visiblity屬性的值爲hidden時，元素及其內容會留下一片空白區域

/* ====隱藏元素==== */
<p>This is the <em style="visibility:hidden">first</em> paragraph</p>
<p>This is the <em style="visibility:hidden">second</em> paragraph</p>

顯示效果：隱藏元素，元素及其內容會留下一片空白區域

This is the　　　　paragraph

This is the　　　　　paragraph

• display屬性：指定元素的顯示方式
  • 塊級元素爲display:block(對於li元素爲display:list-item)
  • 行內元素被設置爲display:inline
  • 混合顯示方式display:inline-block，讓元素與其他內容出現在同一行，同時具有塊級元素的屬性
  • 刪除元素display:none

/* ====塊級元素==== */
<p>This is the <em style="display:block">first</em> paragraph</p>
<p>This is the <em style="display:block">second</em> paragraph</p>

顯示效果：em元素單獨顯示在一行

This is the first paragraph

This is the second paragraph

/* ====行內元素==== */
<p>This is the <em style="display:inline">first</em> paragraph</p>
<p>This is the <em style="display:inline">second</em> paragraph</p>

顯示效果：em設置爲line會忽略任何width、height、margin-top、margin-bottom

This is the first paragraph

This is the second paragraph

/* ====混合元素==== */
<p>This is the <em style="display:inline-block">first</em> paragraph</p>
<p>This is the <em style="display:inline-block">second</em> paragraph</p>

顯示效果：em設置爲line-block可以設置width、height、margin-top、margin-bottom

This is the first paragraph

This is the second paragraph

<li>列表項目的元素display屬性默認值爲list-item，會從上往下排列，用inline-block屬性覆蓋後<li>元素都顯示在一行

<ul>
	<li style="display: inline-block;">first</li>
	<li style="display: inline-block;">second</li>
	<li style="display: inline-block;">three</li>
</ul>

顯示效果

• first
• second
• three

/* ====刪除元素==== */
<p>This is the <em style="display:none">first</em> paragraph</p>
<p>This is the <em style="display:none">second</em> paragraph</p>

顯示效果：將其元素從文檔流中完全移除

This is the first paragraph

This is the second paragraph

文檔流:
默認情況下，元素會按照它們在HTML中自上而下出現的次序顯示（這稱爲文檔流，document flow），並在每個非行內元素的開頭和結尾處換行。

11.7 設置元素的高度

提示　不能爲顯示爲行內元素的元素（如短語內容）設置高度或寬度，除非爲它們設置display: inline-block或display: block。

提示　width和height不是繼承的

• 如果不顯式指定寬度和高度，瀏覽器就會使用auto，對於大多數默認顯式爲塊級元素的元素，$width的auto值==包含塊的寬度-元素的內邊距-邊框-外邊距$

簡單說來，包含塊的寬度指的是父元素給元素留出的寬度

• 如果手動設置width,並將左右外邊距都設爲auto，那麼兩個外邊距就將設爲相等的最大值，例如.page{ margin: 0 auto}

<div style="background-color: khaki;width: 300px;">
	<p style="background:white;width:200px;margin:0 auto;">
		虎撲上有位網友的母去世了，喪葬期間他沒流過幾次淚，心裏頭也沒有太悲傷的情緒。他很困惑，是不是自己骨子頭是個冷血的人。於是他上論壇發了帖子說這個事。帖子裏，有人安慰道：“至親離去的那一瞬間通常不會使人感到悲傷，而真正會讓你感到悲痛的是打開冰箱的那半盒牛奶、那窗臺上隨風微曳的綠籮、那安靜摺疊在牀上的絨被，還有那深夜裏洗衣機傳來的陣陣喧譁。”
	</p>
</div>

<div style="background-color: green;width: 300px;">
	<p style="background:khaki;width:200px;margin:0 auto;">
		虎撲上有位網友的母去世了，喪葬期間他沒流過幾次淚，心裏頭也沒有太悲傷的情緒。他很困惑，是不是自己骨子頭是個冷血的人。於是他上論壇發了帖子說這個事。帖子裏，有人安慰道：“至親離去的那一瞬間通常不會使人感到悲傷，而真正會讓你感到悲痛的是打開冰箱的那半盒牛奶、那窗臺上隨風微曳的綠籮、那安靜摺疊在牀上的絨被，還有那深夜裏洗衣機傳來的陣陣喧譁。”
	</p>
</div>

爲什麼min-height通常比height更適用

除非你確定元素的內容不會變得更高，最好避免在樣式表中指定高度。在大多數情況下，可以讓內容和瀏覽器自動控制高度。這可以讓內容在瀏覽器和設備中根據需要進行流動。
如果設置了高度，隨着內容變多，它們有可能撐破元素的盒子，這可能是你預期之外的。在這種情況下，符合標準的瀏覽器不會自動擴大高度，它們在你指定高度時採用了這個指令，並一直堅持下去。（瞭解相關示例請參考11.16節。）
不過，如果希望元素至少具有某一特定高度，可以設置min-height。如果內容日後變多，元素的高度會自動按需增長。這是height與min-height的區別，width和min-width也是類似的。
或許你還有所疑慮，實際上，很多原因都會導致內容增長。你的內容或許來自數據庫、第三方源或由用戶生成的內容。同時，訪問者可能增大其瀏覽器的字體大小，覆蓋你指定的樣式。

11.8 在元素周圍添加內邊距

• 內邊距padding：元素內容周圍，邊框以內的空間，可以改變內邊距的厚度，不能改變他的顏色或紋理

  • padding-top:x;
  • padding-rigth:x;
  • padding-bottom:x;
  • padding-left:x;

• padding的簡記法

值數	含義	實例
一個值	對應四個邊	padding:5px
兩個值	上下、左右	padding:5px 9px
三個值	上、左右、下	padding:5px 9px 11px
四個值	上、右、下、左（順時針方向）	padding:5px 9px 11px 0

11.9 設置邊框

• `border:在元素周圍創建邊框，或針對元素的某一遍設置邊框，並設置它的厚度、風格和顏色
  • border-top:x;
  • border-rigth:x;
  • border-bottom:x;
  • border-left:x;

邊框風格	屬性值
無	none
點線	dotted
虛線	dashed
實線	solid
雙線	double
槽線	groove
脊線	ridge
凹邊	inset
凸邊	outset

提示　border簡寫屬性及各個邊框屬性（border-width、border-style和border-color）均可接受一至四個值。如果使用一個值，那麼它會應用於全部四個邊。如果使用兩個值，那麼前一個值會應用於上下兩邊，後一個值會應用於左右兩邊。如果使用三個值，那麼第一個值會應用於上邊，第二個值會應用於左右兩邊，第三個值會應用於下邊。如果使用四個值，那麼它們會按照時鐘順序，依次應用於上、右、下、左四個邊。

提示　要讓邊框顯示出來，至少必須定義邊框樣式。如果沒有定義樣式，就不會顯示邊框。邊框樣式的默認值是border-style: none。

##　11.10 設置元素周圍的外邊距

• 外邊距(margin)：元素與相鄰元素之間的透明空間
  • margin-top:x;
  • margin-rigth:x;
  • margin-bottom:x;
  • margin-left:x;

提示　如果對margin使用一個值，這個值就會應用於全部四個邊。如果使用兩個值（參見圖11.10.6），那麼前一個值會應用於上下兩邊，後一個值會應用於左右兩邊。如果使用三個值（參見圖11.10.3），那麼第一個值會應用於上邊，第二個值會應用於左右兩邊，第三個值會應用於下邊。如果使用四個值，那麼它們會按照時鐘順序，依次應用於上、右、下、左四個邊。

提示　margin屬性的auto值依賴於width屬性的值

理解內邊距和外邊距的em值
當em值用於內邊距和外邊距時，它的值是相對於元素的字體大小的，而不是相對於父元素的字體大小的

11.11 使元素浮動

• float：讓元素浮動
  • left：元素浮動到左邊，其他內容圍繞在它右邊
  • right：元素浮動到右邊，其他內容圍繞在它左邊
  • none：讓元素完全不浮動：此爲默認值

詳見菜鳥教程關於float

11.12 控制元素浮動的位置

1.讓浮動元素的父元素“自清除”

css中clearfix清除浮動的用法

11.12 控制元素浮動的位置

11.13 對元素進行相對定位

11.14 對元素進行絕對定位

11.15 在棧中定位元素

**這三章寫的比較好的是菜鳥教程的CSS Position(定位)**另外還提到了本書未提到的sticky定位

11.16 處理溢出

• overflow處理溢出
  • visible：讓元素盒子中的所有內容可見，這是默認項
  • hidden：隱藏元素盒子容納不了的內容
  • scroll：無論元素是否需要，都在元素上添加滾動條
  • auto：讓滾動條僅在訪問者訪問溢出內容時出現

11.17 垂直對齊元素

• 使元素垂直對齊的步驟
  • 輸入vertical-align:
  • 輸入baseline，使元素的基準線對齊父元素的基準線；
  • 或者輸入middle，使元素位於父元素中央；
  • 或者輸入sub，使元素成爲父元素的下標；
  • 或者輸入super，使元素成爲父元素的上標；
  • 或者輸入text-top，使元素的頂部對齊父元素的頂部；
  • 或者輸入text-bottom，使元素的底部對齊父元素的底部；
  • 或者輸入top，使元素的頂部對齊當前行裏最高元素的頂部；
  • 或者輸入bottom，使元素的底部對齊當前行裏最低元素的底部；
  • 或者輸入元素行高的百分比，可以是正數，也可以是負數；
  • 或者輸入某個值（正負均可，單位爲像素或em）分別按照特定的值向上或者向下移動元素。

除了表格以外，vertical-align屬性僅適用於行內元素，不能應用於塊級元素。

11.19 修改鼠標指針

值	描述
url	需使用的自定義光標的 URL。註釋：請在此列表的末端始終定義一種普通的光標，以防沒有由 URL 定義的可用光標。
default	默認光標（通常是一個箭頭）
auto	默認。瀏覽器設置的光標。
crosshair	光標呈現爲十字線。
pointer	光標呈現爲指示鏈接的指針（一隻手）
move	此光標指示某對象可被移動。
e-resize	此光標指示矩形框的邊緣可被向右（東）移動。
ne-resize	此光標指示矩形框的邊緣可被向上及向右移動（北/東）。
nw-resize	此光標指示矩形框的邊緣可被向上及向左移動（北/西）。
n-resize	此光標指示矩形框的邊緣可被向上（北）移動。
se-resize	此光標指示矩形框的邊緣可被向下及向右移動（南/東）。
sw-resize	此光標指示矩形框的邊緣可被向下及向左移動（南/西）。
s-resize	此光標指示矩形框的邊緣可被向下移動（北/西）。
w-resize	此光標指示矩形框的邊緣可被向左移動（西）。
text	此光標指示文本。
wait	此光標指示程序正忙（通常是一隻表或沙漏）。
help	此光標指示可用的幫助（通常是一個問號或一個氣球）。