HTML應用-html px em pt長度單位(像素相對長度點)

、PX\EM\PT單位介紹

px單位名稱為像素，相對長度單位，像素（px）是相對于顯示器屏幕分辨率而言的國內推薦；

em單位名稱為相對長度單位。相對于當前對象內文本的字體尺寸，國外使用較多；

pt單位名稱為點（Point），絕對長度單位一般老版本的table使用長度大小單位但是現在基本上沒有使用。

html單位簡短介紹：

Px 像素Pixel；相對長度單位。

Pt 點（Point）；絕對長度單位

Em 相對長度單位，這里em與html標簽的"EM"拼寫完全相同，而這里em作為單獨文本單位。

1. 以前IE無法調整那些使用px作為單位的字體大小,但現在幾乎IE都支持在這里也推薦使用PX作為單位;

2. 國外的大部分網站能夠調整的原因在于其使用了em作為字體單位;

3. Firefox能夠調整px和em，但是96%以上的中國網民使用IE瀏覽器(或內核)。

px像素(Pixel)。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的，QQ截圖也是使用PX作為長度寬度單位。

em是相對長度單位。相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。

二、html單位對比案例

1、簡單小例：

Width:300px 寬度為300像素

Width:300pt 寬度為300點

Width:300em 寬度為300相對長度

以上我們設置相同數值的不同單位實例

2、對文字設置不同長度em px pt單位看看效果：

CSS代碼：

.divcss5-px{ font-size:12px}
.divcss5-pt{ font-size:12pt}
.divcss5-em{ font-size:2em}

HTML代碼：

< span>divclass="divcss5-px"<我是divcss5</>div<
< span>divclass="divcss5-pt"<我是divcss5</>div<
< span>divclass="divcss5-em"<我是divcss5</>div<

3、單位長度對比說明圖

html px pt em單位案例對比圖

三、em與px換算

任意瀏覽器的默認字體高度16px（16像素）。所有未經調整的瀏覽器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中聲明font-size=62.5%，這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然后換上em作為單位就行了。

12px相當于9pt長度；

12px相當于0.75em長度；

9pt相當于0.75em長度；

一般我們使用em換算px較多

高級em與px換算：

任意瀏覽器的默認字體高度16px（16像素）。所有未經調整的瀏覽器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中聲明font-size=62.5%，這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然后換上em作為單位就行了。

具體使用時候：

我們在對全體html標簽聲明初始一次font-size=62.5%

如：

*{font-size=62.5%}

即可此后面布局可依據以下技巧進行設置em單位

font-size:1.2em等于font-size:12px

font-size:1.4em等于font-size:14px

以此類推相當于初始font-size=62.5%后，em與px單位就只有10倍差距，以便方便計算與設置em長度數值使用。

四、em單位有如下特點：

　　1. em的值并不是固定的;

　　2. em會繼承父級元素的字體大小。

我們在寫CSS的時候如果要用em為單位，需要注意兩點：

　　1. body選擇器中聲明Font-size=62.5%;

　　2. 將你的原來的px數值除以10，然后換上em作為單位;

　　3. 重新計算那些被放大的字體的em數值。避免字體大小的重復聲明。

　　也就是避免1.2 * 1.2= 1.44的現象。比如說你在#content中聲明了字體大小為1.2em，那么在聲明的字體大小時就只能是1em，而不是1.2em, 因為此em非彼em，它因繼承#content的字體高而變為了1em=12px。

　　但是12px漢字例外，就是由以上方法得到的12px(1.2em)大小的漢字在IE中并不等于直接用12px定義的字體大小，而是稍大一點。這個問題 Jorux已經解決，只需在body選擇器中把62.5%換成63%就能正常顯示了。原因可能是IE處理漢字時，對于浮點的取值精確度有限。不知道有沒有其他的解釋。

五、推薦網頁單位

所以為了單位換算錯誤推薦使用PX（像素）作為網頁制作單位。

以上為大家介紹了px em pt單位，及換算方式，一般現在我們使用長度單位都以px為長度單位。這里我們也推薦使用以px（像素）為網頁的尺寸長度單位，符合瀏覽器的像素單位，同時也為了方便計算長度尺寸。

關于px pt em單位總結

1）、推薦px像素為單位：通常我們使用px（像素為單位）較多，其次是em單位，平時推薦大家以px為單位；

2）、我們的顯示屏分辨率以px像素為單位；

3）、我們QQ截圖時候也是以px像素單位。

家好，我是Echa。

最近有不少的粉絲老鐵們私信我為啥這幾天沒有創作新內容了，實在對不住。小編我身在廣州中招羊了，我在最近一篇文章也有提到過，今天是第四天，基本上康復了，奧密克戎BA.5其實沒有那么恐怖，中招了前三天特難受，熬過來了就沒事了，大家莫慌。現在小編就可以認認真真的繼續創作內容了。同時也非常感謝大家默默的關心我小編身體狀況，非常謝謝。

創作不易，喜歡的老鐵們加個關注，點個贊，后面會持續更新干貨，速速收藏，謝謝！

說起 CSS 單位，我們最常用的可能就是像素單位（px），它是一個絕對單位，也就是說一個10px的文字，放在哪里都是一樣大的。單位可以影響顏色、距離、尺寸等一系列的屬性。CSS中單位的形式有很多種，下面就來學習一下 CSS 中單位！

1. 相對單位

相對單位就是相對于另一個長度的長度。CSS中的相對單位主要分為兩大類：

字體相對單位，他們都是根據font-size來進行計算的。常見的字體相對單位有：em、rem、ex、ch；
視窗相對單位，他們都是根據視窗大小來決定的。常見的視窗相對單位有vw、vh、vmax、vmin。

下面就來看看這些常見的CSS單位。

（1）em 和 rem

em是最常見的相對長度單位，適合基于特定的字號進行排版。根據CSS的規定，1em 等于元素的font-size屬性的值。

em 是相對于父元素的字體大小進行計算的。如果當前對行內文本的字體尺寸未進行顯示設置，則相對于瀏覽器的默認字體尺寸。當DOM元素嵌套加深時，并且同時給很多層級顯式的設置了font-size的值的單位是em，那么就需要層層計算，復雜度會很高。

當然，上面的這個說法是不嚴謹的。來看一個例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .parent {
            width: 300px;
            height: 300px;
            font-size: 20px;
        }
        .child {
            border: 1em solid ;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">
           子元素
        </div>
    </div>
</body>
</html>

這里給父元素設置了字體大小為20px，然后給子元素的border寬度設置為1em，這時，子元素的border值為20px，確實是相對于父元素的字體大小設置的：

那如果我們給子元素的字體設置為30px：

.child {
  font-size: 30px;
  border: 1em solid ;
}

這時可以看到，子元素的邊框寬度就是30px，它是相對自己大小進行計算的：

所以，可以得出結論：如果自身元素是沒有設置字體大小的，那么就會根據其父元素的字體大小作為參照去計算，如果元素本身已經設置了字體，那么就會基于自身的字體大小進行計算。

em單位除了可以作用于 font-size之外，還可以運用于其他使用長度的屬性，比如border-width、width、height、margin、padding、text-shadow等。

所以，em的使用還是比較復雜的，它可能會繼承任意一級父元素的字體大小。需要謹慎使用。

rem相對于em就簡單了很多，它是根據頁面的根元素（根元素）的字體大小來計算的。來對上面的例子進行修改：

.child {
  font-size: 30px;
  border: 1rem solid ;
}

html {
 font-size: 25px;
}

效果如下，可以看到，邊框的長度變成了25px，它是根據根元素html的字體大小計算的：

如果沒有對根元素設定字號的話，font-size: 1rem的作用與font-size: initial相同。

使用 em 和 rem 可以讓我們靈活的夠控制元素整體的放大和縮小，而不是固定大小。那何時應使用 em，何時應使用 rem 呢？可以根據兩者的差異來進行選擇：

兩者在客戶端中計算出來的樣式都會以px的形式顯示；
rem是相對于根元素html的font-size計算，em 相對于元素的font-size計算；
當需要根據瀏覽器的font-size設置縮放時，應該使用 rem；
使用 em 應該根據組件的font-size來定，而不是根元素的font-size來定；
rem 可以從瀏覽器字體設置中繼承 font-size 值， em 可能受任何繼承過來的父元素 font-size 的影響。

（2）ex 和 ch

ex 和 ch 都是排版用的單位，它們的大小取決于元素的font-size 和 font-family屬性。

ex 指的是所用字體中小寫字母 x 的高度。因此，如果兩個字體不一樣，那么 ex 的值是不一樣的。因為每種字體的小寫 x 的高度是不一樣的。
ch 和 ex 類似，不過它是基于數字 0 的寬度計算的。會隨著字體的變化而變化。而0 的寬度通常是對字體的平均字符寬度，它是一個估計值。由于 ch 是一個近似等寬的單元，所以在設置容器的寬度時很有用，比如一個容器想要顯示指定個數的字符串時，就可以使用這個單位。

（3）vw、vh、vmax 和 vmin

這四個單位都是視窗單位，所謂的視窗，在web端指的就是可視區域，移動端的視窗指的就是布局視窗。如果視窗大小發生了變化，那么這些值都會隨之變化。這四個單位指的是：

vw：視窗寬度的百分比；
vh：視窗高度的百分比；
vmax：較大的 vh 和 vw；
vmin：較小的 vh 和 vw。

假如一個瀏覽器的高度是800px，那么1vh的值就是8px。vh和vw的大小總是和視窗的高度和寬度有關。

vmin 和 vmax 與視窗寬度和高度的最大值和最小值有關。假如一個瀏覽器高度為500px，寬度為1200px，那么1vmin就是5px，1vmax就是12px。

這些單位都是長度單位，所以可以在任何允許使用長度單位的地方使用。這些單位比較適合用于創建全視區界面，例如移動設備的界面，因為元素是根據視區的尺寸而變化的，與文檔樹中的任何元素都沒有關系。

2. 絕對單位

在 CSS 中，絕對單位包括：px 、pt 、pc、 cm 、 mm 、in 等。絕對單位是一個固定的值，它反應了一個真實的物理尺寸。它不會受屏幕大小或者字體的影響。它們的大小取決于值以及屏幕的分辨率（DPI，每英寸的點數）。px就是我們最常用的絕對單位之一。這些絕對單位的換算關系如下：

1in = 25.4mm = 2.54cm = 6pc = 72pt =96px

（1）px

px 全稱為 Pixels，表示像素，它并不嚴格等于顯示器的像素，尤其在高清屏下。盡管CSS單位會根據瀏覽器、操作系統或者硬件適當縮放，在某些設備或者用戶的分辨率設置下也會發生變化，但是96px通常等于一個物理英寸的大小。

CSS 將光柵圖像(如照片等)的顯示方式定義為默認每一個圖像大小為1px。一個“600x400”解析度的照片的長寬分別為“600px”和“400px”，所以照片本身的像素并不會與顯示裝置像素一致，而是與 px 單位一致。如此就可以將圖像完整的與網頁的其它元素排列起來。

很多時候， px 也常被稱為 CSS 像素。它是一個絕對單位，但也可以被視為相對單位，因為像素單位相對的是設備像素。在同一個設備上，每 1 個 CSS 像素所代表的物理像素是可以變化的；在不同的設備之間，每 1 個 CSS 像素所代表的物理像素是可以變化的。

.box {
    width: 100px;
    height: 100px;
}

（2）pt

pt 全稱為 Point，表示點。常用于軟件設計和排版印刷行業（筆者做的前端系統，最終的產物就是一個需要拿去印刷的PDF，所以會經常用到這個單位）。當使用這個單位時，無論顯示器的分辨率是多少，打印在紙上的結果都是一樣的。

如果單純為了網頁的顯示，建議就使用px像素單位，如果需要輸出印刷產品，就可以考慮使用pt。

（3）pc

pc 全程為 Picas，表示派卡。相當于我國新四號鉛字的尺寸。派卡也是印刷的術語，1派卡等于12點。它和 px 的換算關系如下：

1pc = 16px

（4）cm

cm 全稱為 Centimeters，表示厘米。它和 px 的換算關系如下：

1cm = 37.8px

（5）mm

mm 全稱為 Millimeters，表示毫米。它和 px 的換算關系如下：

1mm = 3.78px

（6）in

in 全稱為 Inches，表示英寸。它和 px 的換算關系如下：

1in = 96px

3. 頻率單位

CSS中的頻率單位有兩個：赫茲（Hz）和千赫茲（kHz）。它們的換算關系如下：

1kHz = 1000Hz

通常情況下，頻率單位使用在聽或說級聯樣式表中。頻率可以被用來改變一個語音閱讀文本的音調。低頻率就是低音，高頻率就是高音。

.low { 
  pitch: 105Hz; 
} 

.squeal { 
  pitch: 135Hz; 
}

需要注意，當數值為0時，單位對值沒有影響，但是單位是不能省略的。也就是說0、0Hz、0kHz是不一樣的。所以，在使用頻率單位時，不要直接寫0。另外，這兩個單位是不區分大小寫的。

4. 時間單位

CSS中的時間單位有兩個：秒（s）和毫秒（ms）。這兩個時間單位都是CSS新增的單位。這兩個單位的換算關系如下：

1s = 1000ms

時間單位主要用于過度和動畫中，用于定義持續時間或延遲時間。下面兩種定義是等效的：

a[href] {
 transition-duration: 2.5s;
}

a[href] {
 transition-duration: 2500s;
}

5. 分辨率單位

CSS中的分辨率單位有三個：dpi、dpcm、dppx。這三個單位都是CSS3中華新增的單位。他們都是正值，不允許為負值。這三個單位的換算關系如下：

1dppx = 96dpi
1dpi ≈ 0.39dpcm
1dpcm ≈ 2.54dpi

分辨率單位主要用于媒體查詢等操作。

（1）dpi

dpi 全稱為 dots per inch，表示每英寸包含的點的數量。普通屏幕通常包含 72或96個點，大于 192dpi 的屏幕被稱為高分屏。


@media screen and (min-resolution: 96dpi) { ... }
@media print and (min-resolution: 300dpi) { ... }

（2）dpcm

dpcm 全稱為 dots per centimeter，表示每厘米包含的點的數量。

@media screen and (min-resolution: 28dpcm) { ... }
@media print and (min-resolution: 118dpcm) { ... }

（3）dppx

dppx 全稱為 dots per pixel，表示每像素（px）包含點的數量。由于CSS px的固定比率為1:96，因此1dppx相當于96dpi。它對應于由圖像分辨率定義的CSS中顯示的圖像的默認分辨率。

@media screen and (min-resolution: 2dppx) { ... }
@media screen and (min-resolution: 1dppx) and (max-resolution: 1.9dppx) { ... }

6. 角度單位

CSS中的角度單位有四個：deg、grad、rad、turn。這些角度單位都是CSS3中新增的單位。它們的換算關系如下：

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

一般這些角度單位用于元素的旋轉操作，包括2D旋轉、3D旋轉等。

當旋轉值為正值時，元素會順時針旋轉；
當旋轉值為負值時，元素會逆時針旋轉。

通常情況下，一個完整的旋轉就是360度。所以，所有的角度都在0-360度之間。但是，超出這個范圍的值也是允許的，只不過都會歸到0-360度之間。比如，順時針旋轉420度（450deg）、逆時針旋轉270度（-270deg）、順時針旋轉90度（90deg）都是一樣的效果，都會歸為90deg。但是當使用動畫時，這些角度值就非常重要了。

CSS的旋轉主要依賴于 transform 屬性中的 rotate() 、rotate3d、 skew() 等方法。只需給它們傳遞旋轉的角度即可。

除了旋轉會使用角度之外，線性漸變也會經常使用角度值：

background: linear-gradient(45deg, #000, #fff);

（1）deg

deg 全稱為 Degress，表示度，一個圓總共360度。

transform: rotate(2deg);

（2）grad

grad 全稱為 Gradians，表示梯度，一個圓總共400梯度。

transform: rotate(2grad);

（4）rad

rad 全稱為 Radians，表示弧度，一個圓總共2π弧度。

transform: rotate(2rad);

（4）turn

turn 全稱為 Turns，表示圈（轉），一個圓總共一圈（轉）。

transform:rotate(.5turn);

7. 百分比單位

百分比（%）也是我們比較常用的單位之一，所有接受長度值的屬性都可以使用百分比單位。但是不同屬性使用該單位的效果可能并不一樣。但是都需要有一個參照值，也就是說百分比值是一個相對的值。

下面來看看常見場景中的百分比單位的使用。

（1）盒模型中的百分比

在CSS中的盒模型包含的屬性有：width、max-width、min-width、height、max-height、min-height、padding、margin等。這些屬性在使用百分比時，參照物不盡相同：

width、max-width、min-width：值為百分比時，其相對于包含塊的 width 進行計算；
height、max-height、min-height：值為百分比時，其相對于包含塊的 height 進行計算；
padding、margin：值為百分比時，如果是水平的值，就是相對于包含塊的 width 進行計算；如果是垂直的值，就是相對于包含塊的 height 進行計算。

（2）文本中的百分比

在CSS中文本控制的屬性有font-size、line-height 、vertical-align、 text-indent等。這些屬性在使用百分比時，參照物不盡相同：

font-size：根據父元素的font-size 進行計算；
line-height：根據font-size進行計算；
vertical-align：根據line-height進行計算；
text-indent：如果是水平的，則根據width進行計算，如果是垂直的，則根據 height 進行計算。

（3）定位中的百分比

在CSS中用控制 position 位置的top、right、bottom、left都可以使用百分比作為單位。其參照物就是包含塊的同方向的width和height。不同定位的包含塊不盡相同：

如果元素為靜態（ static ）或相對定位（ relative ），包含塊一般是其父容器；
如果元素為絕對定位（ absolute ），包含塊應該是離它最近的 position 為 absolute 、 relative 或 fixed 的祖先元素；
如果元素為固定定位（ fixed ），包含塊就是視窗（ viewport ）。

（4）變換中的百分比

CSS 中的 transform 屬性中的 translate 和 transform-origin 值也可以設置百分比。

translateX() 根據容器的 width 計算
translateY() 根據容器的 height 計算
transform-origin 中橫坐標（ x ）相對于容器的 width 計算；縱坐標（ y ）相對于容器的 height 計算

注意，在 translate 還有一個 z 軸的函數 translateZ() 。它是不接受百分比為單位的值。

TML（網頁）

Web領域的一些基本概念。

WEB

Web（World Wide Web）叫全球廣域網，俗稱萬維網（www）。

W3C

W3C（World Wide Web Consortium）叫萬維網聯盟，是國際最著名的標準化組織，制定了web標準。

WEB標準

一個網頁包含了html元素 Css JavaScript，Html元素決定了網頁結構，Css進行了修飾美化，JavaScript控制了交互行為和動態效果。

web標準包含了下面三個方面：

結構標準（HTML）：用于對網頁元素進行整理和分類。
表現標準（CSS）：用于設置網頁元素的版式、顏色、大小等外觀樣式。
行為標準（JavaScript）：用于定義網頁的交互和行為。

HTML定義

Html不是一種編程語言，而是描述性的標記語言，主要作用是定義內容的結構。

2014年10月萬維網聯盟（W3C）完成了HTML5標準制定，是目前最新的HTM版本。

HTML5的出世，標志著web進入一個富客戶端（具有很強的交互性和體驗的客戶端程序）時代，像APP網頁，小程序都是HTML5的應用場景。

Html5新特性：

用于繪畫的 canvas 元素。
用于媒介回放的 video 和 audio 元素。
對本地離線存儲的更好的支持。
新的特殊內容元素，比如 article、footer、header、nav、section。
新的表單控件，比如 calendar、date、time、email、url、search。

頁面基本結構

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!--字符集-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="關鍵詞" />
    <meta name="Description" content="頁面描述" />
    <title>頁面標題</title>
</head>
<body>

</body>
</html>

關于viewport

viewport用戶網頁的可視區域，一個針對移動網頁優化的頁面 viewport meta 標簽如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width：控制 viewport 的大小，可以指定的一個值，如 600，或者特殊的值，如 device-width 為設備的寬度（單位為縮放為 100% 時的 CSS 的像素）。
height：和 width 相對應，指定高度。
initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
user-scalable：用戶是否可以手動縮放。

常見元素

head區域元素：

meta title style link script base。

body區域元素：

div、section、article、aside、header、footer
p
span、em、strong
table、thead、tbody、tr、td
ul、ol、dl、dt、dd
a
form、input、select、textarea、button

元素分類

塊級元素：每個元素都是獨占一行

address – 地址
blockquote – 塊引用
center – 舉中對齊塊
dir – 目錄列表
div – 常用塊級容易，也是css layout的主要標簽
dl – 定義列表
fieldset – form控制組
form – 交互表單
h1-h6 – 標題
hr – 水平分隔線
isindex – input prompt
menu – 菜單列表
noframes – frames可選內容，（對于不支持frame的瀏覽器顯示此區塊內容）
noscript – ）可選腳本內容（對于不支持script的瀏覽器顯示此內容）
ol – 排序表單
p – 段落
pre – 格式化文本
table – 表格
ul – 非排序列表

行內元素：元素在同一行水平排列

a – 錨點
abbr – 縮寫
acronym – 首字
b – 粗體
big – 大字體
br – 換行
em – 強調
font – 字體設定(不推薦)
i – 斜體
img – 圖片
input – 輸入框
label – 表格標簽
s – 中劃線(不推薦)
select – 項目選擇
small – 小字體文本
span – 常用內聯容器，定義文本內區塊
strike – 中劃線
strong – 粗體強調
sub – 下標
sup – 上標
textarea – 多行文本輸入框
tt – 電傳文本
u – 下劃線
var – 定義變量

inline-block：元素可以排列在同一行顯示，并且可以設置一些塊元素屬性

通過Css：display:inline-block 改變元素。

元素默認樣式

很多元素都自帶了默認樣式，不同瀏覽器下默認樣式表現不一致，為了統一或者滿足一些需求我們需求將所有默認樣式清空，這種處理方式又稱為 Css Reset，比如：

*{
    margin: 0;
    padding: 0;
}

另外一種方案使用normalize.css，它將不同瀏覽器下的默認樣式進行了統一，

https://github.com/necolas/normalize.css

CSS（層疊樣式表）

Css的單位

html中的單位是像素px

絕對單位

in：英寸，1in = 2.54cm = 96px
pc：皮卡，1皮卡 = 1/16英寸
pt：點，1點 = 1/72英寸
px：像素，1點 = 1/96英寸

相對單位

em：font-size中相對于父元素的字體大小，在元素屬性中使用是相對于自身字體大小
rem：根元素的字體大小，在元素屬性中使用是相對于根元素字體大小
1h：元素的line-height
vw：視窗寬度的1%
vh：視窗高度的1%
vmin：視窗較小尺寸的1%
vmax：視圖大尺寸的1%

字體屬性

屬性：字體、行高、顏色、大小、背景、邊框、滾動、換行、修飾屬性（粗體、斜體、下劃線）

p{
    font-size: 20px;        /*字體大小*/
    line-height: 30px;      /*行高*/
    font-family: PingFang SC;   /*字體類型：顯示PingFang SC，沒有就顯示默認*/
    font-style: italic ;        /*italic表示斜體，normal表示不傾斜*/
    font-weight: bold;  /*粗體或寫（400｜500｜600）*/
    font-variant: small-caps;  /*小寫變大寫*/
}

行高（line-height）

一般約定行高、字號都是偶數，這樣保證它們的差一定偶數除2得到整數，如下圖所示：

line-height

文本垂直居中

對于單行文本可以設置行高 = 盒子高度。

對于多行元素的垂直對齊，我們可以使用vertical-align: middle屬性，不過vertical-align 僅適用inline、inline-block 和 table-cell 元素。

vertical-align

vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/* 指定長度值 */
vertical-align: 10em;
vertical-align: 4px;
/* 使用百分比 */
vertical-align: 20%;
/* 全局值 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: unset;

文本屬性

letter-spacing: 0.5em ; 單個字母之間的間距。
word-spacing: 1em; 單詞之間的間距。
text-decoration: none; none 去掉下劃線、underline 下劃線、line-through 中劃線、overline 上劃線。
color:red; 字體顏色。
text-align: center; 文字對齊方式，屬性值可以是：left、right、center、justify。
text-transform: lowercase; uppercase（大寫）、lowercase（小寫）capitalize（首字母大寫）。
text-indent:10px; 文本首行縮進。
text-shadow:2px 2px #ff0000; 文字陰影效果。
white-space: normal; 設置元素空白處理，normal，nowrap，break-spaces。

Overflow屬性

內容溢出處理

visible：默認值，多余的內容會全部顯示出來。
hidden：超過元素的內容隱藏。
auto：內容超出顯示滾動條。
scroll：Windows總是顯示滾動條。Mac和auto 屬性相同。

濾鏡

filter:gray()

背景屬性

background-color:#fff; 設置背景顏色。
background-image:url(img.png); 設置圖像為背景。
background-repeat: no-repeat; no-repeat不要平鋪，repeat-x橫向平鋪；repeat-y縱向平鋪。
background-position:center top; 設置背景圖片在容器的位置，top，bottom，left，right，center。
background-attachment:scroll; 設置背景圖片隨滾動條移動，scroll（跟隨滾動），fixed（固定）。
background-origin:border-box; css3，border-box（背景相對于邊框框定位），padding-box（背景相對于填充框定位），content-box（背景相對于內容框定位）。
background-clip:border-box; css3，背景裁切。
background-size:cover; css3，調整尺寸，contain（在不裁剪或拉伸圖像的情況下，在其容器內盡可能大地縮放圖像），cover（盡可能大地縮放圖像以填充容器，必要時拉伸圖像。），auto（在相應的方向上縮放背景圖像，以保持其固有比例。）。

優先級

理解優先級很重要，有助于我們排查一些問題。瀏覽器將優先級分為兩部分：HTML的行內樣式和選擇器的樣式。

行內樣式

行內樣式是直接作用在元素，它的優先級高于選擇器樣式，使用！important可以提高樣式表的優先級。

<div style="font-size:16px">
</div>

選擇器樣式

<style type="text/css">
    p{
      font-size: 16px;
    }
</style>
<link rel="stylesheet" href="style/app.css">

優先級規則如下：

如果選擇器的ID數量最多的勝出。
如果ID數量一致，那么擁有最多類的選擇器勝出。
如果以上兩次比較都一致，那么擁有最多標簽名的選擇器勝出。

優先級

我們通過下圖這種標記方式，就可以判斷出選擇器的優先級。

優先級

兩條經驗法則

盡量不要使用ID選擇器，因為它會大幅提升優先級。當需要覆蓋這個選擇器時，通常找不到另一個有意義的ID，于是就需要復制原來的選擇器加上另一個類來讓它區別于想要覆蓋的選擇器。
不要使用！important。它比ID更難覆蓋，一旦用了它，想要覆蓋原先的聲明，就需要再加上一個！important，而且依然要處理優先級的問題。

基礎選擇器

類型或標簽選擇器，匹配目標元素的標簽名，如：p，input[type=text]，優先級（0，0，1）。
類選擇器，匹配class屬性中有指定類名的元素，如：.box，優先級（0，1，0）。
ID選擇器，匹配擁有指定ID屬性的元素，如：#id，優先級（1，0，0）。
通用選擇器（*），匹配所有元素，優先級（0，0，0）。

組合選擇器

由多個基礎選擇器組合成的復雜選擇器。

后代組合器（單個空格（）表示），比如 .nav li，表示li是一個擁有nav類的元素的后代。
子組合器（>），匹配的元素是直接后代，.parent > .child。
相鄰兄弟組合器（+），匹配的元素緊跟在后面其它元素后面，div + p。
通用兄弟組合器（~），匹配所有跟隨在指定元素之后的兄弟元素，它不會選中目標元素之前的兄弟元素，li.active ~ li。

復合選擇器

多個基礎選擇器連起來（中間沒有空格）組成一個復合選擇器（如：ul.nav）。復合選擇器選中的元素將匹配其全部基礎選擇器，.box.nav 可以選中 class="box nav" ，但是不能選中 class="box"。

偽類選擇器

用于選中某種特定狀態的元素，優先級（0，1，0）。

:first-child——匹配的元素是其父元素的第一個子元素。
:last-child——匹配的元素是其父元素的最后一個子元素。
:only-child——匹配的元素是其父元素的唯一一個子元素（沒有兄弟元素）。
:nth-child(an+b)——匹配的元素在兄弟元素中間有特定的位置。公式an+b里面的a和b是整數，該公式指定要選中哪個元素。要了解一個公式的工作原理，請從0開始代入n的所有整數值。公式的計算結果指定了目標元素的位置。下表給出了一些例子。

:nth-child(an+b)

:nth-last-child(an+b)——類似于：nth-child()，但不是從第一個元素往后數，而是從最后一個元素往前數。括號內的公式與：nth-child()里的公式的規則相同。
:first-of-type——類似于：first-child，但不是根據在全部子元素中的位置查找元素，而是根據擁有相同標簽名的子元素中的數字順序查找第一個元素。
:last-of-type——匹配每種類型的最后一個子元素。
:only-of-type——該選擇器匹配的元素是滿足該類型的唯一一個子元素。
:nth-of-type(an+b)——根據目標元素在特定類型下的數字順序以及特定公式選擇元素，類似于：nth-child。
:nth-last-of-type(an+b)——根據元素類型以及特定公式選擇元素，從其中最后一個元素往前算，類似于：nth-last-child。
:not(<selector>)——匹配的元素不匹配括號內的選擇器。括號內的選擇器必須是基礎選擇器，它只能指定元素本身，無法用于排除祖先元素，同時不允許包含另一個排除選擇器。
:focus——匹配通過鼠標點擊、觸摸屏幕或者按Tab鍵導航而獲得焦點的元素。
:hover——匹配鼠標指針正懸停在其上方的元素。
:root——匹配文檔根元素。對HTML來說，這是html元素，但是CSS還可以應用到XML或者類似于XML的文檔上，比如SVG。在這些情況下，該選擇器的選擇范圍更廣。還有一些表單域相關的偽類選擇器。
:disabled——匹配已禁用的元素，包括input、select以及button元素。
:enabled——匹配已啟用的元素，即那些能夠被激活或者接受焦點的元素。
:checked——匹配已經針對選定的復選框、單選按鈕或選擇框選項。
:invalid——根據輸入類型中的定義，匹配有非法輸入值的元素。例如，當<inputtype="email">的值不是一個合法的郵箱地址時，該元素會被匹配。

更多參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS

偽元素選擇器

偽元素選擇器可以向HTML標記中未定義的地方插入內容，優先級（0，0，1）。

::before——創建一個偽元素，使其成為匹配元素的第一個子元素。該元素默認是行內元素，可用于插入文字、圖片或其他形狀。必須指定content屬性才能讓元素出現，如：.nav::before。
::after——創建一個偽元素，使其成為匹配元素的最后一個子元素。該元素默認是行內元素，可用于插入文字、圖片或其他形狀。必須指定content屬性才能讓元素出現，如：.nav::after。
::first-letter——用于指定匹配元素的第一個文本字符的樣式，如：h1::first-letter。
::first-line——用于指定匹配元素的第一行文本的樣式。
::selection——用于指定用戶使用鼠標高亮選擇的任意文本的樣式。通常用于改變選中文本的background-color。只有少數屬性可以使用，包括color、background-color、cursor、text-decoration。

屬性選擇器

屬性選擇器用于根據HTML屬性進行匹配元素，優先級（0，1，0）。

[attr]——匹配的元素擁有指定屬性attr，無論屬性值是什么，如：input[disabled]。
[attr="value"]——匹配的元素擁有指定屬性attr，且屬性值等于指定的字符串值，如：input[type="radio"]。
[attr^="value"] ——“開頭”屬性選擇器。該選擇器匹配的元素擁有指定屬性attr，且屬性值的開頭是指定的字符串值，例如：a[href^="https"]。
[attr＊="value"]——“包含”屬性選擇器。該選擇器匹配的元素擁有指定屬性attr，且屬性值包含指定的字符串值，如：[class＊="sprite-"]。
[attr~="value"]——“空格分隔的列表”屬性選擇器。該選擇器匹配的元素擁有指定屬性attr，且屬性值是一個空格分隔的值列表，列表中的某個值等于指定的字符串值，如：a[rel="author"]。
[attr|="value"]——匹配的元素擁有指定屬性attr，且屬性值要么等于指定的字符串值，要么以該字符串開頭且緊跟著一個連字符（-）。

小結

本文要點回顧，歡迎留言交流。

Web中的一些基本概念介紹。
Html頁面結構，元素分類。
Css優先級。
Css選擇器，（基礎選擇器，組合選擇器，復合選擇器，偽類選擇器，偽元素選擇器，屬性選擇器）。

在線咨詢

上一篇：HTML常用全部代碼，你懂，你不想成功都難
下一篇：前端入門-先從制作一個簡單的html5網頁開始

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML應用-html px em pt長度單位(像素 相對長度 點)