此篇文章是給初學者網站設計師的，一旦網站設計師了解了box模型是如何工作的，以及如何浮動這些框的，那么網站設計師與前端工程師合作起來就會非常順暢了。為此，我們收集了大量的技巧來幫助你構建你想要的設計。

1、絕對定位

如果你想控制某個元素在我們網站上的位置，絕對定位是實現這個目標的關鍵。如果你認為你的瀏覽器是一個大的包圍盒，絕對定位允許你精確地控制那個盒子里的元素會停留在哪里。使用頂部、右、底部和左側，并帶有一個像素值來控制元素停留的位置。

上面的CSS設置了一個元素的位置，從瀏覽器的頂部和右邊緣保持20px。您還可以在div中使用絕對定位。

2、選擇器

允許您選擇特定選擇器的所有元素。例如，如果您使用*p，然后添加CSS樣式，那么它將對文檔中的所有元素執行標記。這使得你可以很容易地將你的網站的各個部分作為目標。

3、覆蓋所有的風格

這一點應該謹慎使用，因為如果你為每件事都這樣做，你就會發現自己長期處于麻煩之中。但是，如果您想要為特定的元素覆蓋另一個CSS樣式，請使用!在css樣式之后很重要。例如，如果我想要在我的網站的某個特定區域的H2標題為紅色而不是藍色，我將使用以下CSS:

4、定心

定心是很棘手的，因為它取決于你想要集中的東西。讓我們看一下以內容為中心的項目的CSS。

文本

文本以文本對齊為中心;如果你想讓它左右兩邊，用左邊或者右邊而不是中心。

內容

一個div(或任何其他元素)可以以添加塊屬性為中心，然后使用自動邊緣。CSS是這樣的:

我之所以把“100%”放在寬度上是因為如果它是100%寬的，那么如果它是全寬的，就不需要定心。最好有固定的寬度，比如60%或550px等等。

5、垂直對齊(一行文本)

你會在CSS導航菜單中使用這個，我幾乎可以保證。關鍵是要使菜單的高度和文本的行高相同。當我回去為客戶編輯現有的網站時，我經常看到這種技術。這里有一個例子:

6、懸停效果

它用于按鈕、文本鏈接、站點的bock區域、圖標等等。如果你想改變顏色，當有人把鼠標懸停在它上面時，使用相同的CSS，但是添加:鼠標懸停在它上，改變樣式。這里有一個例子:

它會改變你的h2標簽從黑到紅的顏色當有人在它上面徘徊時。使用的好處是:如果它沒有改變，你就不必再次聲明字體大小或重量了。它只會改變您指定的內容。

過渡

對于懸停效果，就像在你的網站上的菜單或圖片一樣，你不希望顏色太快地停止到最終結果。理想情況下，您希望逐步簡化變更，這是過渡屬性發揮作用的地方。

這使得變化發生了。3秒，而不是瞬間變成紅色。這使得懸停效果更悅目，更不刺耳。

7、鏈接狀態

很多設計師都忽略了這些樣式，它確實會給訪問者帶來可用性問題。鏈接偽類控制所有尚未點擊的鏈接。訪問的pseudo類將處理您已經訪問過的所有鏈接的樣式。這告訴網站訪問者他們已經在你的網站上，以及他們還沒有探索的地方。

8、輕松調整圖像大小以適應

有時，你會在縮放比例的情況下，在圖像需要符合一定寬度的情況下進行縮放。一個簡單的方法是使用最大寬度來處理這個。這是一個例子:

這意味著最大的圖像可能是100%，并且高度是根據圖像寬度自動計算的。在某些情況下，您可能還必須指定寬度為100%。

9、控制部分的元素

使用上面的圖像示例，如果您只想針對某個部分的圖像(比如您的博客)，使用一個類作為blog部分，并將其與實際的選擇器相結合。這將使您只選擇博客部分的圖像，而不是其他圖像，例如您的徽標，或社交meia圖標，或站點其他任何部分的圖像，如側邊欄。下面是CSS的外觀:

10、指導孩子們

我希望在我開始使用CSS的時候就知道了。這會節省我很多時間!使用>來選擇元素的直接子元素。例如:

這將選擇和樣式化所有在頁腳ID下的活動鏈接元素。它不會選擇任何過去的活動元素，或者頁腳中包含的其他內容，比如純文本。這也適用于頂級導航元素。

特定的子元素

相信我，當你設計清單時，這是很方便的。您只需要計算元素的數量，然后應用該樣式。

上面的CSS目標是列表中的第二項，并使其粗體、下劃線和藍色。在括號內加上一個“n”，你可以把目標列在每一個第二項上。想象一下，你可以在表格式的布局中，把所有的線條都設計成便于閱讀的樣式。CSS是:

11、將CSS應用于多個類或選擇器

假設您想在所有圖片、博客區和側邊欄中添加一個相同的邊框。你不需要寫出相同的CSS 3次。把那些項目列出來，用逗號隔開。這是一個例子:

不管你是多年的網頁設計師，還是剛剛起步，學習如何正確地建立網站，似乎是一段坎坷的旅程。一旦你縮小了你想學的語言，你就必須學習和提高你的技能。無論你學什么，CSS都是必不可少的，但你必須掌握的技能是令人畏縮的。不過，這并不需要那么困難，特別是如果您知道一些方便且不太熟悉的CSS技術來完成任務。

12、box-sizing:border-box;

這是許多web設計人員的最愛，因為它解決了填充和布局問題。基本上，當您設置一個特定寬度的框，并向它添加填充時，填充會增加框的大小。但是，隨著盒子大小的增加，這是被否定的，并且盒子保持了它們本來的尺寸。

13、:在

這個CSS是一個選擇器，它允許您選擇一個CSS元素并在每個元素之前插入內容。假設你有一個網站，在每個H2標簽之前，你需要特定的文本。你可以這樣設置:

這是非常方便的，特別是如果您使用的是圖標字體。您可以在某些元素之前放置圖標，并將其應用于全局。

14、:在

如:在選擇器之前，您可以使用:在特定的元素上插入內容。一個實用的用法是在博客上的每一個節選后加上“更多的閱讀”。這是你的做法。

15、內容

內容是一個CSS屬性，當你需要插入一個你想要控制的元素時，它會很方便。我所見過的最常見的用法是在一個特定的地方插入一個圖標。在上面的示例中，您可以看到必須將要插入的文本包裝在引號中。

16、CSS重置

不同的瀏覽器有默認的CSS設置，所以必須重置這些設置，所以你有一個均勻的，一致的競技場。把它想象成建一座房子，無論你是建在山的一側，在沙灘上，還是在樹木繁茂的地方，你都希望這個基礎是水平的。

這個CSS重置方法為你所有的網站設置一個標準的基礎，使它們在CSS的起點上保持一致。它移除不需要的邊框、預設的邊緣、填充、線條高度、列表樣式等等。

17、首字下沉

每個人都喜歡帽子。它讓我們想起了傳統的印刷書籍，它是一種很好的開始一頁內容的方式。那首大信確實吸引了你的注意力。有一種簡單的方法可以在css中創建一個drop cap，它使用的是pseudo元素::第一個字母。這里有一個例子:

它的作用是將信的大小設置為其他字母的3倍。它在字母周圍設置3px的空間以防止重疊，并將字母的顏色設置為紅色。

18、強制文本為所有大寫，所有小寫，或大寫

在所有的大寫字母中輸入一整段是很荒謬的。想象一下，當網站的格式發生變化，或者它被更新時，你必須回去修復它。相反，使用以下css樣式將文本強制轉換成某種格式。這個css目標是h2標題標簽。

h2 {首字母大寫;} -全部大寫

h2 {首字母:小寫;} -所有小寫

h2 {首字母大寫;把每個單詞的第一個字母大寫。

19、垂直高度

有時你想要一個部分填充整個屏幕，不管屏幕大小是多少。您可以使用vh或視圖高度來控制它。在它之前的數字是一個百分比，所以如果你想讓它100%地填充瀏覽器，你會把它設置為100。您可以將其設置為85%，以適應固定的導航菜單。

為容器創建一個類，并應用您希望它擁有的vh的數量。你可能需要調整的一件事是特定屏幕的媒體查詢值，或者像豎屏模式的手機那樣的朝向。想象一下，拉伸一幅風景圖片以適應豎屏模式。這看起來不太好。

20、風格的電話聯系

如果你有一個電話號碼的鏈接，當用戶在他們的手機上點擊它時，你可能很難用傳統的主動鏈接選擇器來設計它。相反，使用以下CSS: