本文僅僅是針對於專案經驗不足，在實際進行前端頁面開發的時候，特別容易遇到的幾個問題。

問題一、box-sizing屬性

這是關於盒模型的問題，因為在某些情況下，需要對某些元素進行box-sizing的設定，剛開始我並沒有想到是這個問題，直到在後續需要根據視覺設計稿調樣式的時候，才發現意識可以用border-sizing佈局。

我們知道，通常在計算一個元素的寬高的時候：值 = width/height + padding+margin+border的，這是正常的盒模型情況下，還有一種情況是：值 = width/height ，該元素設定的padding\margin\border都是已經是在設定的寬高裡面包含了，這就是另一種所謂的IE盒模型，之所以有這些區別就是通過box-sizing這個屬性進行設定的。

box-sizing: border-box | content-box | inherit

說明：

content-box：標準盒模型，CSS定義的寬高只包含content的寬高。

border-box：IE盒模型，CSS定義的寬高包括了content，padding和border。

inherit：繼承 父元素 box-sizing屬性的值

問題二、z-index屬性

在進行一個專案頁面樣式的時候，關於層疊的展示用到時非常多的，有時候程式碼並沒有報錯，但是有些功能可能就是實現不了，最常見的可能就是由於元素的層疊問題，導致一個點選事件被覆蓋了從而不能正常實現點選事件。如果是專案經驗不足的話，找bug是還是蠻痛苦的，所以我覺得有必要重視z-index這個屬性。

含義： z-index 屬性指定了一個具有定位屬性的元素及其子代元素的層疊順序。當元素之間重疊的時候，z-order 決定哪一個元素覆蓋在其餘元素的上方顯示。

值 ： 是數字，可以是正數或者負數，通常來說 z-index 值較大的元素會覆蓋較小的一個。

實現： 對於一個已經定位的元素（即position屬性值是非static的元素），z-index 屬性才能指定數值。

問題三、塊級元素和內聯元素

塊級元素和內聯元素也是在實際專案中遇到非常多的，也比較容易就遇到一些坑，比如如果不注意的話，對一個內聯元素設定了寬或者高，但是你發現並沒有起作用，這就需要深入理解一下塊級元素和行內元素了。

1、常見的內聯元素和塊級元素

行內元素：a, img, span, button, input, label, select, textarea等

塊級元素：div, p, h1-h6, table, ul, ol, pre等

2、塊元素的特點：

• 總是在新行上開始；
• 高度、行高以及外邊距和內邊距都可控制；
• 寬度預設是它容器的100%，除非設定一個寬度；
• 可以容納內聯元素和其他塊元素。

3、內聯元素的特點：

• 和其他元素都在同一行；
• 高，行高及外邊距和內邊距不可改變；
• 寬度就是它的文字和圖片的寬度，不可改變；
• 內聯元素只能容納文字或者其他內聯元素。

4、塊級元素和內聯元素之間的轉換：

方法1、 display

塊元素預設display:block;行內非替換元素預設為display：inline;行內替換元素預設為display:inline-block;

• display:none; 不顯示該元素，也不會保留該元素原先佔有的文件流位置。
• display:block; 轉換為塊級元素。
• display:inline; 轉換為行內元素。
• display:inline-block; 轉換為行內塊級元素。

方法2、 float

當把行內元素設定完float:left/right後，該行內元素的display屬性會被賦予block值，且擁有浮動特性。行內元素去除了之間的莫名空白。

方法3、 position

當為行內元素進行定位時，position:absolute; 與 position:fixed; 都會使得原先的行內元素變為塊級元素。

問題還有很多，只是說了這3個遇到比較頻繁和有特點的，後續再慢慢補充吧。

每天總結一點點，每天學習一點點，每天進步一點多 (〃’▽’〃)