靜態頁面經驗總結

1.關於佈局時候的居中問題

line-height是內容的垂直居中而不是元素的垂直居中，元素的垂直居中可以利用內聯元素設定vertical-align:middle來實現，在確定高度的情況下也可以通過設定margin或者padding來實現。

2.關於absolute的相對位置的問題

當使用absolute定位的時候，其相對位置是以上一級有position的元素的位置為基準的，上一級中沒有則上上一級，依次，直至到body元素，則以body元素的位置為基準。

3.同時使用vertical-align和line-height對於元素位置的影響 解決方法：

當文字和圖片處於同一行的時候，設定vertical-align：middle和line-height：center並不能使文字和圖片都處於中間從而實現文字和圖片的居中對齊。

4、浮動的清除幾種方法

• 空標籤方法：使用一個空標籤設定其屬性為clear：both，或者直接呼叫clearfix類（clearfix類的寫法在下面）
• overflow：hidden加在浮動的塊的上一級屬性中
• clearfix方法，將clearfix類直接加在浮動元素的父級元素上即可。

5、logo優化

1. logo 裡面 首先放一個 h1 標籤 ，目的是為了提權，告訴搜尋引擎，這個地方很重要
2. h1裡面在放一個a連結，可以返回首頁的， 給a連結一個 大小 和 logo 的背景圖片
3. a連結裡面要放文字（網站名稱），為了搜尋引擎收錄我們。 但是文字不要顯示出來
4. 最後給 a連結一個 title 這樣滑鼠放到logo 上， 就可以看到提示文字了

• 方法一：要用 text-indent 移到盒子外面 （text-indent: -9999px) ，然後overflow:hidden，淘寶的做法
• 方法二：直接給font-size: 0; 就看不到文字了， 京東的做法。

6、表格與框架都具有頁面佈局的作用，他們在進行頁面佈局時各有什麼優缺點？

表格用於劃分頁面區域的，而框架是用於分割瀏覽器視窗的，即使用框架結構的頁面可以將一個瀏覽器視窗劃分為多個相互獨立又相互聯絡的小視窗，

使用框架的優點：

• 訪問者的瀏覽器不需為每個頁面重新載入導航條；
• 每個框架都具有自己的滾動條，因此訪問者可以獨立滾動這些框架進行瀏覽

使用框架的缺點：

• 並不是所有瀏覽器都提供良好的框架支援
• 難以實現在不同框架中精確的對齊各個頁面元素

使用表格佈局頁面的好處：

網上絕大部分的頁面都是使用表格來美化的，因為表格有很好的相容性，可被絕大部分的瀏覽器所支援，而且使用表格會使頁面結構清晰、佈局整齊。

7、商品欄進度條

使用 i標籤+b標籤的組合 結合css樣式 完成進度條

h5程式碼：

css樣式程式碼：

.s-pin .hezi .pin .qian .i1{
    display: inline-block;
    width: 160px;
    border-radius: 10px;
    height: 10px;
    background-color: #ccc;
    margin-top: 10px;
    margin-left: 10px;
}
.s-pin .hezi .pin .qian .i1 b{
    display: inline-block;
    border-radius: 10px;
    height: 10px;
    background-color: red;
}

完成效果圖：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-3qNXwUNk-1607560484615)(C:\Users\admin\AppData\Local\Temp\1607478074518.png)]

8、表單相關的標籤

表單：

< form > < / form >標籤
表單元素：

1. input ：屬性（button、 checkbox、 color 、date 、datetime 、datetime-local 、email 、file 、hidden 、image 、month 、number 、password 、radio 、range 、reset 、search 、submit 、tel 、text 、time 、url 、week）

2. select option（ 定義下拉選項；option元素定義下拉選單中的一個選項（一個條目）selected屬性定義預設的選項顯示；disabled屬性規定此選項應在首次載入時被禁用；optgroup屬性定義下拉框中同型別條目的標題；具體格式為：select optgroup option）

3. textarea（標籤定義多行的文字輸入控制元件，文字區中可容納**無限數量**的文字，其中的文字的預設字型是等寬字型（通常是 Courier），控制元件可以通過 cols 和 rows 屬性來規定 textarea 的尺寸，但是不推薦這種方式，一般設定css中的height，width）

9、標籤元素

1.塊級元素：

• 獨自佔據一行,故預設寬度是容器的100%
• 可以設定寬、高、行高、內外邊距
• 可以容納行內元素和其他塊級元素

*注：文字類的塊級元素不能容納塊級元素，例如

/

~

/ *

2.行內元素：

• 會和相鄰的行內元素排成一行
• 設定寬、高無效，預設寬高是其自身內容的寬高
• 只能設定水平方向的內外邊距
• 只能容納其他行內元素和文字

*注：可以放塊級元素，但是連結裡面不能再放連結。*

3.行內塊級元素：**綜合了塊級元素和行內元素的特點

• 和相鄰行內塊級元素在同一行
• 預設寬、高為其內容的寬、高
• 可以設定寬、高、行高、內外邊距

10、display屬性

display屬性是我們在前端開發中常常使用的一個屬性，其中，最常見的有：

• none
• block
• inline
• inline-block
• inherit

display:none

none這個值表示此元素將不被顯示。

display:block

使用了display：block;之後， 此元素將顯示為塊級元素，此元素前後會帶有換行符

display:inline

此元素會被顯示為內聯元素，元素前後沒有換行符

顯然，display:inline的作用即可以將一個塊級元素轉換成行內元素，那麼這個塊級元素將不能再設定寬和高以及上下方向的margin和padding

display：inline-block

它是結合了inline和block的特性於一身

即設定了inline-block屬性的元素既具有block元素可以設定width和height屬性的特性，又保持了inline元素不換行的特性

display:inherit

規定應該從父元素繼承 display 屬性的值

11、css樣式

樣式表	優點	缺點	使用情況	控制範圍
行內樣式表	書寫方便，權重高	沒有實現樣式和結構相分離	較少	控制一個標籤(少)
內部樣式表	部分結構和樣式相分離	沒有徹底分離	較多	控制一個頁面(中)
外部樣式表	完全實現結構和樣式相分離	需要引入	最多，強烈推薦	控制整個站點(多)

12、css選擇器

選擇器	作用	缺點	使用情況	用法
標籤選擇器	可以選出所有相同的標籤，比如p	不能差異化選擇	較多	p { color:red;}
類選擇器	可以選出1個或者多個標籤	可以根據需求選擇	非常多	.nav { color:red; }
id選擇器	一-次只能選擇器1個標籤	只能使用一次	不推薦使用	#nav {color:red;}
萬用字元選擇器	選擇所有的標籤	選擇的太多，有部分不需要	不推薦使用	* {color: red;}

選擇器	作用	特徵	使用情況	隔開符號及用法
後代選擇器	用來選擇元素後代	是選擇所有的子孫後代	較多	符號是空格.nav a
子代選擇器	選擇最近一級元素	只選親兒子	較少	符號是> .nav>p
交集選擇器	選擇兩個標籤交集的部分	既是 又是	較少	沒有符號p.one
並集選擇器	選擇某些相同樣式的選擇器	可以用於集體宣告	較多	符號是逗號 .nav, .header
連結偽類選擇器	給連結更改狀態		較多	重點記住a{}和a:hover實際開發的寫法

13、定位

絕對定位 Position:absolute;

特點：

1. 元素使用絕對定位之後不佔據原來的位置（脫標）
2. 元素使用絕對定位，位置是從瀏覽器出發。
3. 巢狀的盒子，父盒子沒有使用定位，子盒子絕對定位，子盒子位置是從瀏覽器出發。
4. 巢狀的盒子，父盒子使用定位，子盒子絕對定位，子盒子位置是從父元素位置出發。
5. 給行內元素使用絕對定位之後，轉換為行內塊。（不推薦使用，推薦使用display:inline-block;）

相對定位 Position: relative;

特點：

1. 使用相對定位，位置從自身出發。
2. 還佔據原來的位置。
3. 子絕父相（父元素相對定位，子元素絕對定位）
4. 行內元素使用相對定位不能轉行內塊

固定定位 Position:fixed;

特點：

1. 固定定位之後，不佔據原來的位置（脫標）
2. 元素使用固定定位之後，位置從瀏覽器出發。
3. 元素使用固定定位之後，會轉化為行內塊（不推薦，推薦使用display:inline-block;）