整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
SS 單位
1. 相對長度單位
相對長度單位指的是這個單位沒有一個固定的值, 它的值受到其它元素屬性(例如瀏覽器窗口的大小、父級元素的大小)的影響, 在響應式布局方面相對長度單位非常適用。下表中列舉了 CSS 中支持的相對長度單位:
單位 描述 示例
em 相對于自身 font-size(字體大小)屬性的值, 如果自身沒有設置, 則繼承父元素 font-size 屬性的值, 1em 等同于 font-size 屬性值, 例如 font-size 的值為 16px, 那么 1em 就等于 16px, 2em 就等于 32px p{line-height:2em;}
rem 相對于根元素<html>的 font-size 屬性的大小, 比如根元素的 font-size 是 100px, 那么 1.2rem 就相當于 120px p{font-size: 1.2rem;}
ex 相對于所用字體中小寫英文字母 x 的高度, 若無法確定 x 的高度則使用 0.5em 計算 p{font-size: 1ex;}
ch 相對于所用字體中數字 0 的高度, 若無法確定 0 的高度則使用 0.5em 計算 p{line-height: 3ch}
vw 相對于瀏覽器窗口的寬度, 1vw=窗口寬度的 1% p{font-size: 5vw;}
vh 相對于瀏覽器窗口的高度, 1vh=窗口高度的 1% p{font-size: 5vh;}
vmin vw 與 vh 中較小的值 p{font-size: 5vmin;}
vmax vw 與 vh 中較大的值 p{font-size: 5vmax;}
% 相對于父元素寬度或字體大小的百分比 div{width: 55%}
常用的單位: em、vw、vh、%
使用案例:
C 端網頁設計對于很多從事 UI 行業的新人來說是一個充滿未知的領域，對于怎么進行基本的畫布創建，規格設置，都處于兩眼一抹黑的狀態。雖然這是因為多數人沒有系統的學習 UI 知識，它并不是一個合理的現象。
接下來，我們會更新一些網頁設計的干貨，幫助更多 UI 設計師了解網頁設計的基礎知識。
首先，網頁設計的第一步就是畫布創建了，這也是困擾我們的第一個難題。由于市面上存在多種前端技術的應用，以及一些歷史遺留問題、設計場景差異等因素的影響，我們在搜索「網頁設計寬度」這類問題的時候，得到的結果會有非常多的版本，導致更加迷茫。
所以，了解網頁設計的寬度定義，勢必要理解它們的底層原因，因為寬度的設置：只有合適的寬度，沒有絕對正確的寬度。
對于任何網頁設計的項目，寬度設定的標準都是不同的，而在選擇寬度的過程里，需要考慮 2 個核心因素：
1. 設備因素
設備因素即確認項目主要展示的屏幕設備是哪一種，它們對應的分辨率是多少。最粗略的劃分，可以將設備劃分成 PC 端和移動端。這兩者受制與顯示的尺寸，系統的限制，在設計和操作上都有比較大的區別。
瀏覽設備
瀏覽設備即網頁用戶所使用的屏幕類型，主要考量的標準是屏幕的分辨率（長寬像素數）。常見的 PC 屏幕分辨率有 1280×800、1600×900、1440×800、1366×768、1920×1080、2560×1440 等，再加上一些更加不常見的（比如 surfacebook 的 3000×2000），可以列出數十種，這是大家都已經知道的事情。
所以基于這個前提，很多人會去查找關于屏幕使用分辨率的統計表格，比如下圖這種，然后得出最常用的分辨率是 1080P。有了數據支撐，我們不就可以開始動手設計了？
實際上這個做法是錯誤的。對于網頁設計來說，我們首先應該確定的是──最小適配屏幕。
因為在一般場景下，顯示器分辨率如果大于畫布，內容可以被我們正常訪問；如果小于畫布，內容就會顯示不全，相當于低于這個分辨率設備的用戶被我們放棄了。
所以，做個簡單的計算，如果以 1920×1080 為基礎，則支持的用戶數為 27.38 %；如果是 800×600，則支持用戶數低于 3%。
這么考慮的話，我們是不是只要支持最小的分辨率即可？當然也不是。
在今天，1024 以下寬度的設備已經非常稀少，即便是 1024 本身，主流的設備也是平板而不是一般的 PC 電腦。當這些設備的數量低到成為絕對的非主流時，是可以選擇忽略它們，以滿足更多人的需要。
所以通常，我們最低支持的分辨率，不是 1024×768 就是 1280×800。如果大家不相信，可以去各類網站中，用 QQ 截圖工具量一下主要內容區域的寬度，很難出現大于這兩個數值的情況。
2. 展示類型
展示類型，也只有兩點，即寬度適應屏幕，或者是定寬。
先說說第一種，可能有不少人已經聽過響應式布局和自適應設計的大名，先不論它們有什么區別，它們代表了網頁顯示內容隨瀏覽器窗口尺寸變化而變化的技術，比如使用 Bootstrap 架構的星巴克官網，更改瀏覽器窗口寬度后，可以得到以下不同的結果。
如果你現在還需要通過這篇內容學習網頁寬度制定的情況下，我是不建議在真實項目中使用這種展示類型的。因為它們都需要對前端架構有一定的熟悉，以及對 CSS 的屬性特性有基本認識，否則就無法在設計過程中直接考慮到其它分辨率下顯示的效果，以及制定不同元素的自適應方式。
響應式設計的規則非常靈活，會受到更多因素的影響，完整的響應式界面設計會如上圖所示，提供多種尺寸的設計圖。常見的如 1920、1080、640 寬。
如果是定寬的設計，那么就回到前面所說，我們只需要以適配 1280 或 1024 的屏幕展開設計即可。但是，網頁的實際內容區域，和我們要適配的范圍是不同的。
在瀏覽器中，首先有右側滾動條的因素影響，并且主體內容的兩側也要預留出內邊距。
所以，我們真正創建的網頁內容區域，是小于 1280 或者 1024 的。而得出具體的內容區域尺寸的方法，是通過網頁的刪格系統計算出來的。
網頁刪格系統是由平面網格系統衍生出來，針對網頁使用的排版系統。如果稍微看過這類文章的同學都會看見一個公式：
（Axn）- i=W
這個做法就是通過將內容區域劃分成若干內容塊和間隔模塊的方式，輔助我們排版。在本篇內容里不做具體介紹，只需要關注結果即可。
如果選擇適配 1280，那么設計內容的區域寬通常為 1180、1190。而在適配 1024 下，那么內容區域寬常見的就有 950、970、990 等。當我們創建完完整分辨率的畫布，再通過參考線的方式將內容區域規劃出來即可。
對于網頁設計來說，最重要的參數就是內容區域的寬度，但也有一些元素是例外，很多人可能發現網頁有一些元素是超過正常的內容區域的（無論是對一般顯示模式或是自適應模式），最常見的就是頂部的導航欄和底部的頁腳區域。比如打開淘寶無論拉伸得多長，內容區域固定是 1190 寬，而導航欄卻永遠撐滿整個瀏覽器。
所以，我們不會將這些內容的寬度計算在內，在設計稿中只要設計了這樣的元素，和前端人員適當溝通和標注，就可以獲得想要的效果。
總結
其實講了一堆，最后我們用一個表格來總結一下。
關于 PC 端網頁設計寬度的設定介紹到這里就結束了，如果有什么疑問，可以在評論區留言。
SS基礎教程（上）成哥為大家介紹了CSS的基礎知識及選擇器，本篇文章主要介紹CSS的常用樣式屬性及偽類等內容，下面成哥就為大家一一介紹這些內容。
CSS的基礎樣式如下表所示：
下面我們主要講解一下常用的樣式。
（1）display樣式
display屬性有四個常用的值，用來修改標簽的展示狀態：
1）display:block，將標簽設置為塊級標簽，塊級標簽獨自占據一行高度，可以自定義width 和height，每個塊級元素都從新一行開始，并且其后的元素都另起一行，常見的塊級標簽有div、h{number}、p、ul、table等；
2）display:inline，將標簽設置為行內標簽，行內標簽會在一條直線上排列，不可以自定義自定義width和height，常見的行內元素有a、span等；
3）display:inline-block，將便簽設置為行內塊級標簽（行內標簽與塊級標簽的結合），可以自定義width和height，常見原生就是行內塊級標簽的有input、img標簽；
4）display:none，隱藏標簽，使用了該設置的標簽在html頁面中不顯示。
下面我們對上述四種樣式設置進行演示具體如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. </head>
6. <body>
7. <h4>塊級標簽示例</h4>
8. <!-- 我們將行內標簽span設置為塊級標簽，最終效果設置成span效果的標簽會獨占一行，行內標簽設置高度不生效，塊級標簽設置高度生效 -->
9. <span style="background-color: #2eabff; height: 40px;">我是span1,我是行內標簽在同一行，設置高度沒生效</span>
10. <span style="background-color: #722ed1; height: 60px;">我是span2,我是行內標簽在同一行，設置高度沒生效</span>
11. <span style="display: block; background-color: #87e8de; height: 50px;">我是span3,我被設置
12. 成塊級標簽我獨占一行，設置高度生效</span>
13.
14. <h4>行內標簽示例</h4>
15. <!-- 將塊級標簽div設置成行內標簽，讓其在同行顯示, 并且對其設置高度不會生效 -->
16. <div style="display: inline; background-color: #722ed1; height: 50px;">我是div1,我被設置成行內標簽，
17. 所以和div2在同行顯示，設置高度沒生效</div>
18. <div style="display: inline; background-color: #52c41a; height: 50px;">我是div2,我被設置成行內標簽，
19. 所以和div1在同行顯示，設置高度沒生效</div>
20.
21. <h4>行內塊級標簽示例</h4>
22. <!-- 將div模塊設置成行內塊級標簽，可以讓其在同行顯示，同時還可以設置高度 -->
23. <div style="display: inline-block;background-color: #a0d911;height: 60px;">我是div3,
24. 被設置成行內塊級標簽，可同行顯示，設置高度生效</div>
25. <div style="display: inline-block;background-color: #aaaaaa;height: 50px;">我是div4,
26. 被設置成行內塊級標簽，可同行顯示，設置高度生效</div>
27.
28. <h4>display:none示例</h4>
29. <span>我下面還有內容但被設置成display:none所以看不到，可以通過游覽器頁面內容debug中看到</span>
30. <div style="display: none">我被隱藏了</div>
31. </body>
32. </html> （2）高度與寬度樣式
height與width是用于設置html標簽的寬度與高度的，其設置的單位通常有像素與百分比。如果height需要設置成百分比，那需要在其外面套一個父標簽并設置其高度才可以，因為html高度是無限制的所以直接使用是無效的。height與width屬性的其具體使用如下所示：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <style>
6. .class1{
7. width: 300px;
8. height: 60px;
9. background-color: coral;
10. }
11. .class2{
12. width: 50%;
13. height: 10%;
14. background-color: #2aabd2;
15. }
16. </style>
17. </head>
18. <body>
19. <h4>height與width設置示例</h4>
20. <div class="class1">寬300像素，高60像素</div>
21.
22. <!-- 由于class2中使用了為百分比的高度，所以必須在其外加上父標簽同時需要設置其高度 -->
23. <div style="height: 500px">
24. <div class="class2">寬50%，高10%</div>
25. </div>
26.
27. </body>
28. </html> （3）字體樣式
CSS可以對HTML的字體類型、字體大小、字體粗細及字體顏色等維度進行設置，其具體示例如下所示：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <style>
6. .class1{
7. font-family: "Microsoft YaHei";
8. }
9. .class2{
10. font-size: 15px;
11. }
12.
13. .class3{
14. font-weight: bold;
15. }
16.
17. .class4{
18. color: red;
19. }
20. </style>
21. </head>
22. <body>
23. <h4>1.字體類型示例</h4>
24. <div class="class1">我是微軟雅黑</div>
25.
26. <h4>2.字體大小示例</h4>
27. <div class="class2">大小：15px</div>
28.
29. <h4>3.字體粗細示例</h4>
30. <div class="class3">我被加粗了</div>
31.
32. <h4>4.字體顏色示例</h4>
33. <div class="class4">我是紅色</div>
34.
35. </body>
36. </html> （4）文本樣式
CSS的文本樣式中最常用的屬性就是對文本的對齊方式進行設置，在水平方向可以設置左、中、右對齊方式，在垂直方向可以設置上、中、下對齊方式，具體示例如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <style>
6. .class1{
7. width: 300px;
8. height: 40px;
9. }
10.
11. </style>
12. </head>
13. <body>
14.
15. <h4>1.水平方向設置</h4>
16. <div class="class1" style="background-color: rosybrown;text-align: left;">左對齊</div>
17. <div class="class1" style="background-color: #2eabff;text-align: center;">居中</div>
18. <div class="class1" style="background-color: coral; text-align: right;">右對齊</div>
19.
20. <h4>2.垂直方向設置</h4>
21. <div class="class1" style="background-color: #b7eb8f;">默認文字在垂直方向是靠最上排列</div>
22. <!-- 垂直居中就是將line-height的值設置與高度一致 -->
23. <div class="class1" style="background-color: darkseagreen;line-height: 40px;">垂直居中</div>
24.
25. <h4>3.兩個方向居中</h4>
26. <div class="class1" style="background-color: darkcyan;line-height: 40px;text-align: center">兩個方向居中</div>
27.
28. </body>
29. </html> （5）內邊距與外邊距
在了解內外邊距之前我們先了解一個模型即盒子模型，盒子模型就是把 HTML 頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。盒模型的寬度和高度和我們平常所說的物體的寬度和高度是不一樣的。CSS 定義的寬和高，指的是填充以里的內容范圍。而盒子的寬度=左外邊距+左邊框+左內邊距+內容寬度+右內邊距+右邊框+右外邊距。每個矩形都由元素的內容（content）、內邊距（padding）、邊框（border）和外邊距（margin）組成，如下所示：
在了解了盒子模型后我們分別對內邊距及外邊距內容進行講解。
1）內邊距（padding）
padding內邊距作用是為被應用的標簽創建一部分內部間距。邊距可以設置上、下、左、右方向。具體示例如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <style>
6. .class1{
7. width: 300px;
8. height: 40px;
9. }
10.
11. </style>
12. </head>
13. <body>
14.
15. <h4>1.無內邊距</h4>
16. <div style="height: 50px; width: 200px; border: 1px solid red; background-color: #b7eb8f">
17. <div>
18. CSS基礎教程。
19. </div>
20. </div>
21.
22. <h4>2.有內邊距</h4>
23. <!-- 設置一個寬200px,高50px的div，然后為其設置邊框 -->
24. <div style="height: 50px; width: 200px; border: 1px solid red; background-color: #87e8de">
25. <!-- 內邊距設置為10px,這邊的10px表示上下左右都設置成10px, 可以使用padding-(top, bottom, left, right)只設置一邊-->
26. <div style="padding: 10px;">
27. CSS基礎教程。
28. </div>
29. </div>
30.
31. </body>
32. </html> 2）外邊距（margin）
外邊距用于相鄰的標簽之間增加距離用。邊距可以設置上、下、左、右方向。具體示例如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <style>
6. .class1{
7. width: 200px;
8. height: 30px;
9. }
10.
11. </style>
12. </head>
13. <body>
14.
15. <h4>1.無外邊距</h4>
16. <div class="class1" style="background-color: #87e8de">div1</div>
17. <div class="class1" style="background-color: #46a6ff">div2</div>
18.
19. <h4>2.有外邊距</h4>
20. <div class="class1" style="margin: 10px; background-color: #87e8de">div3</div>
21. <div class="class1" style="margin: 10px; background-color: #46a6ff">div4</div>
22.
23. </body>
24. </html> （6）float浮動
float浮動用于實現多個標簽并排存放，一般用于塊級標簽，我們一般頁面的橫排目錄都會用該屬性來實現。float屬性支持將標簽設置為左浮動（float:left）與右浮動（float:right），具體示例如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. </head>
6. <body>
7. <h2>浮動示例</h2>
8. <div>
9. <div style="float:left;width: 100px;background-color: yellowgreen;">左浮動</div>
10. <div style="float: right;width: 100px;background-color: blue;">右浮動</div>
11. <!-- 在使用浮動后需要進行清除，不然就會脫離文檔流，也就不會按照html固定的順序進行排版 -->
12. <div style="clear: both;"></div>
13. </div>
14. </body>
15. </html> （7）定位（position）
position用于對屏幕上的標簽進行定位，定位有三種類型分別為絕對定位（position：absolute;）、相對定位（position：relative;）與固定定位（position：fixed;），下面我們分別進行介紹
1）絕對定位
絕對定位一般以瀏覽器左上角為基準設置位置，但如果定位標簽存在父標簽且父標簽存在定位設置則子標簽以父標簽的左上角為基準。絕對定位的具體示例如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <style>
6. .class1 {
7. width: 100px;
8. height: 100px;
9. background-color: #46a6ff;
10. position: absolute;
11. left: 60px; /*相對于瀏覽器向左偏移60像素*/
12. top: 20px; /*相對于瀏覽器向上偏移20像素*/
13. }
14. </style>
15. </head>
16. <body>
17. <div class="class1">絕對定位</div>
18. </body>
19. </html> 2）相對定位
相對定位以元素自身的位置為基準設置位置，相對定位需要占用位置空間。通常父標簽設置為相對定位，子標簽設置為絕對定位，具體示例如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <style>
6. .class1 {
7. width: 200px;
8. height: 100px;
9. /* 父標簽設置相對定位 */
10. position: relative;
11. background-color: #aaaaaa;
12. }
13. .class2 {
14. width: 80px;
15. height: 50px;
16. position: absolute;
17. /* 子標簽設置絕對定位 */
18. background-color: #46a6ff;
19. top: 20px;
20. left: 30px;
21. }
22. </style>
23. </head>
24. <body>
25. <div class="class1">
26. <div class="class2">我是子標簽</div>
27. </div>
28. </body>
29. </html> 3）固定定位
固定定位表現類似于絕對定位，兩者主要區別是絕對定位是以html的元素進行定位的，而固定定位是以游覽器窗口進行定位。具體使用示例如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <style>
6. .class1 {
7. width: 100px;
8. height: 100px;
9. background-color: #46a6ff;
10. position: fixed;
11. top: 100px;
12. left: 80px;
13. }
14. </style>
15. </head>
16. <body>
17. <div class="class1">固定定位</div>
18. </body>
19. </html> hover偽類作用：當鼠標放在標簽上時，可以能夠設置一些樣式。
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <style>
6. .class1 {
7. background-color: #46a6ff;
8. }
9.
10. .class1:hover {
11. background-color: #722ed1;
12. }
13.
14. </style>
15. </head>
16. <body>
17. <h4>偽類示例</h4>
18. <div class="class1">將鼠標放在我上面，將會變色</div>
19. </body>
20. </html> 至此我們《CSS基礎教程》就講完了，如有任何問題歡迎在文章后面進行留言。最后如果喜歡本篇文章不要忘了點贊、關注與轉發哦！
-END-
@IT管理局專注計算機領域技術、大學生活、學習方法、求職招聘、職業規劃、職場感悟等類型的原創內容。期待與你相遇，和你一同成長。
文章推薦：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
