HTML5和CSS3 PC端靜態網頁瑣碎知識點

1.PC端爲了兼容IE9以及IE9如下，儘可能要使用float進行佈局，兼容性好，通常不要用flex進行佈局。

2.問起CSS選擇器的分類，先說id選擇器，類選擇器，屬性選擇器，僞類選擇器，僞元素選擇器，標籤選擇器，再說關係選擇器。

3.命名必定要規範，用英文，靈活一點，用那一欄的內容翻譯過來起名。

4.代碼要簡潔，css只寫到index.css一個文件內，重置樣式表簡短一點。

 1 * {
 2     margin: 0;
 3     padding: 0;
 4     border: none;
 5　　}
 6
 7 
 8 ol, ul {
 9     list-style: none;
10 }

5.dl列表標籤，< dl>< /dl>用來建立一個普通的列表,< dt>< /dt>用來建立列表中的上層項目，< dd>< /dd>用來建立列表中最下層項目，通常用於圖文並排展現。

1 <dl>
2 　　<dt>計算機</dt>
3 　　<dd>用來計算的儀器 ... ...</dd>
4 　　<dt>顯示器</dt>
5 　　<dd>以視覺方式顯示信息的裝置 ... ...</dd>
6 </dl>

6.網頁最外層要用一個div包起來，類名能夠起box，root這樣子。

7.text-overflow 屬性規定當文本溢出包含元素時發生的事情。具體用法和值：https://www.w3school.com.cn/cssref/pr_text-overflow.asp

white-space 屬性設置如何處理元素內的空白。具體用法和值：https://www.w3school.com.cn/cssref/pr_text_white-space.asp

文字內容過多須要出現省略號，一般這麼使用:

1 .box1 {
2     text-overflow: ellipsis;
3     overflow: hidden;
4     white-space: nowrap;
5 }

8.文字的font-size用偶數，不要用奇數。

9.讓子元素div在父元素div中上下左右居中。

(1)定位1

(2)定位2

(3)flex

(4)行高和text-align

10.簡單的表單。

11.若是有一個多個li在同行，並且它們都有一個外邊距，剛恰好把最後一個擠下去，能夠把ul設置爲很大的寬度，這樣就剛恰好了。

12.圖片懸浮放大效果

transform:scale(1.2);transision:all 0.3s;父元素中overflow:hidden;

13.下拉框

height:0與overflow:hidden；
設置下拉框時，要注意結構上父元素的選擇，否則選擇器沒法選擇到下拉框

14.行內元素不能設置寬，高，margin-top，margin-bottom屬性，給行內元素設置行高，行高會給其父元素，而當把他設置爲塊元素時，行高才會給它，全部行內元素行高無效。

15.設置圖標字體大小時，若是經過給其父元素a設置，圖標字體的原有css樣式會覆蓋繼承的a的字體大小，因此無效。

16.注意選擇器的權重，參考CSS選擇器優先級的計算方式。

17.在body中使用mid-width保證寬度最小值，能夠用來保證佈局穩定性。

18.相鄰塊元素相鄰邊的陰影會被層級高的遮擋。

19.border-color的transparent（透明屬性）常常會用到。

20.text-indent：首行縮進 咱們能夠把設置一個特別大的負值，而後隱藏文本。例如在小米官網的小米logo下用此方法寫入「小米官網」文本。（文字是給搜索引擎看的，並不想用戶看到）。

21.小米商城首頁右側固定佈局的工具欄，使用固定定位（position: fixed;），因爲固定定位按視窗佈局，爲了使其隨着瀏覽器窗口大小變化一直貼合在在中間內容的右下角，使用如下代碼實現此功能。

 1 .right-toolbar {
 2     width: 26px;
 3     height: 206px;
 4     background-color: pink;
 5     position: fixed;
 6     bottom: 60px;
 7     right: 50%;
 8     margin-right: -639px;
 9  
10     /* left + margin-left + width + margin-right + right = 視口的寬度
11  
12     auto + 0 + 26 + 0 + 60 = 視口寬度
13  
14     auto + 0 + 26 + -639px + 50% = 視口寬度 */
15 }

22.搜索文本框增長打字時候與邊框的距離，給搜索框增長padding-left和padding-right

23.設置標題最左側的小小圖標：

網站的小圖標圖片通常都存儲在網站的根目錄下， 名字通常都叫作favicon.ico。

1 <link rel="icon" href="favicon.ico"/>

24.爲了提高用戶體驗，css代碼是要壓縮的。

25.URL（統一資源定位符）是地址的別名。互聯網上的每個文件都有惟一的URL。

URL的第一個部分是模式，模式告訴瀏覽器如何處理須要打開的文件。常見的模式有HTTP、HTTPS（超文本傳輸協議，用於訪問網頁），ftp（文件傳輸協議，用於下載文件），mailto（用於發送電子郵件）。

URL的第二個部分是文件所在的主機的名稱。

URL第三個部分是路徑，路徑包含到達這個文件的文件夾以及文件自己的名稱。

26.爲了提高用戶體驗，css代碼是要壓縮的。

27.疑惑：對圖片使用vertical-align: top;有什麼效果，爲何。有關行高的問題。

 

學識淺薄，若有錯誤，懇請斧正，在下不勝感激。