DIV+CSS佈局
浮動應用
製作導航欄
-
設定文字或者內容 在一個盒子中間位置的兩種方式：
- 給盒子一個上下相同，左右相同的內邊距 使內容在盒子的中間。這種方式適用盒子大小不固定的場景。
- 當盒子有固定的尺寸時，水平方向設定
text-align:center使內容居中。垂直方向使得行高=盒子高度以達到文字或內容居中的效果。
頁面的佈局
經典佈局
- 最外面的是版心容器：
<div class="main"></main>- 頁面佈局首先需要設定版心（版面的中心區域）的大小，一般是"1000px居中" 。
- 垂直的上中下的佈局：
<div class="main"> <div class="header"> 頭部 </div> <div class="center"> 中間 </div> <div class="footer"> 底部 </div> </div>
- 中間區域 分為側邊欄和內容區
<div class="center">
<div class="left">
側邊欄
</div>
<div class="right">
右邊內容
</div>
</div>
聖盃佈局
聖盃佈局是最早出現在國外網站上的一個說法。在西方，聖盃是表達“渴求之物”的意思；它是一種兩欄或者三欄的佈局方式，其中核心點是 主體內容區寬度可變，也就是自適應頁面大小。
兩欄佈局
-
方案一：
設定父容器為一個固定寬度，讓左右盒子都浮動，右邊盒子的大小為計算值
-
方案一：
- 設定HTML結構：父容器中包含左邊和右邊區域
- CSS初始化盒子總大小為一個或者`min-width值以自適應頁面的寬度
- 設定左邊區域和右邊區域的大小，新增可視背景
- 設定左邊區域左浮動，右邊區域外邊距為（盒子寬度+間距）
- 清除父容器的浮動
三欄佈局
- 方案一：
- 設定HTML結構，顯示左邊盒子，然後右邊盒子 最後中間盒子
- 初始化整個容器自適應寬度，三欄垂直分佈 分別設定它們的大小以及可視背景
- 讓左邊區域左浮動，右邊區域右浮動 中間區域設定左右邊距為（盒子寬度+間距）
- 清除父容器的浮動
- 方案二：
- 設定HTML結構，出現順序依次是中間內容區，然後是左邊區域，再是右邊區域
- CSS初始化讓整個容器自適應寬度，三欄垂直分佈。分別設定中間區域、左右兩邊的大小和可視背景。中間區域寬度100%比較合適，但不能小於(父盒子寬度 - 左右盒子)
- 三欄同時左浮動，設定左邊區域外邊距為
-中間區域寬度%，右邊區域的外邊距為-盒子寬度，清除父盒子浮動 - 給中間區域巢狀子盒子，設定其外邊距為（左右盒子寬度+間距）
定位屬性
網頁中的一個元素（盒子），其在網頁上的位置，有如下三種方式來確定：
-
標準模式：普通文件流
標準模式就是元素沒有進行浮動也沒有進行明確定位時的“預設模式”，這也被稱為標準流。
-
浮動模式：浮動層的元素
浮動模式就是使用float屬性使其往左邊或右邊進行浮動而表現出來的位置。這被稱為脫標流。
-
定位模式：定位元素 可以在普通文件流中 也可以是定位層
就是使用明確的“位置設定”資訊來讓一個盒子定位到指定的位置。
定位模式中，有的是標準流的，有的是脫標流的。
定位設定可以確定一個盒子在下述兩個方面的位置：
- 在（x,y）平面上所處位置。
- 在高度（z軸）方向的位置（層次）。
在css中 使用position屬性 設定元素的定位方式：
- static：預設靜態非定位的元素
- absolute：絕對定位，相對於父元素設定座標，前提是該父元素 擁有定位屬性，如果沒有定位 依次向上查詢 直到body。absolute絕對定位或脫離普通文件流，後續元素可以補充它的位置
-
relative：相對定位，它是相對於自己原先在網頁中的位置來設定座標。並且它定位之後 會保留原先的位置
-
fixed：固定位置，是相對瀏覽器視窗來設定座標，它也脫離文件流，一般使用fixed來實現吸頂效果。
零碎和補遺
-
pre：格式化輸出標籤，它能讓以程式碼編輯的格式在頁面中顯示。
-
cursor：設定滑鼠在某個盒子上的時候的游標形狀。
-
box-shadow：設定盒子的陰影效果
-
text-shadow：設定文字的陰影效果
-
border-radius：設定圓角邊框
-
text-overflow：當一行的文字在一行中放不下，但又不適宜（不允許）換行時（通常是標題性質的文字）。
-
該屬性的設定有三個前提：
-
1）盒子的overflow為非visible，通常為hidden；
2）盒子的width為非auto，通常是設定為固定寬度；
3）文字的換行特性white-space為不允許換行（nowrap）；
-
-
box-sizing：設定盒子內容區的大小。預設的盒子模型中，width和height設定的是內容區的大小。也可以通過該屬性 設定width和height所包含的區域：
- content-box：預設值，width和height只是內容區大小
- border-box：width和height是包括了邊框+內邊距+內容的總的大小，實際的內容區域只有
width/height-邊距-邊框的大小
-
vertical-align：垂直方向對齊
vertical-align 這個看上去很美好的一個屬性， 實際有著不可捉摸的脾氣，否則我們也不會這麼晚來講解。
vertical-align : baseline |top |middle |bottom
設定或檢索物件內容的垂直對其方式。
vertical-align 不影響塊級元素中的內容對齊，它只針對於 行內元素或者行內塊級元素，特別是行內塊元素， 通常用來控制圖片/表單與文字的對齊。
- vertial-align有一個特別的應用 是用來去除3px bug
圖片或者表單等行內塊元素，他的底線會和父級盒子的基線對齊。這樣會造成一個問題，就是圖片底側會有一個空白縫隙。
解決的方法就是：
-
給img vertical-align:middle | top等等。 讓圖片不要和基線對齊。
-
給img 新增 display：block; 轉換為塊級元素就不會存在問題了。
-
設定父盒子的font-size:0。