整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
覽器的兼容性越來越好，移動端基本是清一色的webkit，經(jīng)常會用到css的不同尺寸/長度單位，這里做個整理。
絕對單位
px : Pixel 像素
pt : Points 磅
pc : Picas 派卡
in : Inches 英寸
mm : Millimeter 毫米
cm : Centimeter 厘米
q : Quarter millimeters 1/4毫米
相對單位
% : 百分比
em : Element meter 根據(jù)文檔字體計算尺寸
rem : Root element meter 根據(jù)根文檔（ body/html ）字體計算尺寸
ex : 文檔字符“x”的高度
ch : 文檔數(shù)字“0”的的寬度
vh : View height 可視范圍高度
vw : View width 可視范圍寬度
vmin : View min 可視范圍的寬度或高度中較小的那個尺寸
vmax : View max 可視范圍的寬度或高度中較大的那個尺寸
運算
calc : 四則運算
實例：
h1 { width: calc(100% - 10px + 2rem)單位比例
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
詳細(xì)
絕對單位
px - Pixel 像素
像素 px 相對于設(shè)備顯示器屏幕分辨率而言。
div { font-size: 12px }
p { text-indent: 24px }pt Points 磅
1 pt = 1/72 英寸
div { font-size: 10pt }
p { height: 100pt }pc Picas 派卡
十二點活字（印刷中使用的），相當(dāng)于我國新四號鉛字的尺寸。
div { font-size: 10pc }
p { height: 10pc }in Inches 英寸
div { font-size: 10in }
p { height: 10in }mm Millimeter 毫米
div { font-size: 10mm }
p { height: 10mm }cm Centimeter 厘米
div { font-size: 10cm }
p { height: 10cm }q Quarter millimeters 1/4毫米
div { font-size: 20q }
p { height: 100q }相對單位
% 百分比
相對于父元素寬度
<body>
em Element meter 根據(jù)文檔計算尺寸
相對于當(dāng)前文檔對象內(nèi)文本的字體尺寸而言，若未指定字體大小則繼承自上級元素，以此類推，直至 body，若 body 未指定則為瀏覽器默認(rèn)大小。
<body>
rem Root element meter 根據(jù)根文檔（ body/html ）字體計算尺寸
相對于根文檔對象（ body/html ）內(nèi)文本的字體尺寸而言，若未指定字體大小則繼承為瀏覽器默認(rèn)字體大小。
ex 文檔字符“x”的高度
相對于字符“x”的高度，通常為字體高度的一半，若未指定字體尺寸，則相對于瀏覽器的默認(rèn)字體尺寸。
至于為啥是x，我TM也不知道。
ch 文檔數(shù)字“0”的的寬度
同上，相對于數(shù)字“0”的寬度。
一張圖解釋：
vh View height / vw View Width - 可視范圍
相對于可視范圍的高度和寬度，可視范圍被均分為 100 單位的 vh/vw；可視范圍是指屏幕可見范圍，不是父元素的，百分比是相對于包含它的最近的父元素的高度和寬度。
假設(shè)設(shè)備可視范圍為高度 900px，寬度 750px，則， 1 vh = 900px/100 = 9px，1vw = 750px/100 = 7.5px
。
vmin / vmax 可視范圍的寬度或高度中較小/較大的那個尺寸
假設(shè)瀏覽器的寬度設(shè)置為 1200px，高度設(shè)置為 800px， 則 1vmax = 1200/100px = 12px， 1vmin = 800/100px = 8px 。
如果寬度設(shè)置為 600px，高度設(shè)置為 1080px, 則 1vmin = 6px, 1vmax = 10.8px 。
假設(shè)需要讓一個元素始終在屏幕上可見：
.box {假設(shè)需要讓這個元素始終鋪滿整個視口的可見區(qū)域：
.box {em、rem 是實際生產(chǎn)中我們最常用到的單位，可以使用其配合媒體查詢改變 body 字體大小來實現(xiàn)響應(yīng)式的設(shè)計，vh、vw、vmin、vmax也可以很方便地幫助我們控制響應(yīng)尺寸，但實際的可控性可能不如前者，具體按照我們的業(yè)務(wù)需求去實踐吧！
體效果
<h1></h1> 標(biāo)題字(最大)
<h6></h6> 標(biāo)題字(最小)
<h1 align="center"></h1>
<strong></strong> 粗體字(突出強調(diào))
<b></b> 粗體字(bold:粗體)
<i></i> 斜體字(italic:斜體)
<u></u> 底線,文本添加下劃線：(underline:下劃線)
<strike></strike>或<s></s> 橫線,相當(dāng)于加刪除線文本 <del></del> HTML5等寬文字標(biāo)簽:對于等寬文字設(shè)置多數(shù)情況用在英文文字顯示中
<tt></tt> 打字體,類似打字機或者等寬的文本效果。
<code></code> 等寬文字設(shè)置內(nèi)容(定義計算機代碼文本)
<samp></samp> 等寬文字設(shè)置內(nèi)容(定義樣本文本)
<kbd> 定義鍵盤文本。
<sup></sup> 文字上標(biāo)字體標(biāo)簽(super)
<sub></sub> 文字下標(biāo)字體標(biāo)簽(subscipt)
<address></address> 設(shè)置地址文字(可定義一個地址,比如電子郵件地址。您應(yīng)當(dāng)使用它來定義地址、簽名或者文檔的作者身份。)
<font></font> 編輯網(wǎng)頁文字樣式
<font face="" size="" color=""></font>face屬性可以用于設(shè)置文字的名稱,可以是宋體、隸書、楷體等;
size屬性用于設(shè)置字號的大小(單位:字號),從 1 到 7 的數(shù)字,或h1-h6。瀏覽器默認(rèn)值是3。
color用于設(shè)置字體的顏色
<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>手冊上沒有
<ruby></ruby>和<rt></rt> 設(shè)置文字標(biāo)注標(biāo)記
實例:
<ruby>當(dāng)代最可愛的人<rt>志愿軍</rt></ruby>eb開發(fā)是一個很依賴經(jīng)驗的領(lǐng)域，然而這對初學(xué)者很不友好。
知識一旦脫離了應(yīng)用場景就會變得晦澀、空洞，且知識本身也滿足“二八定律”，“抓大放小”是提高學(xué)習(xí)效率的關(guān)鍵。
下文向大家介紹了HTML和CSS之間的關(guān)系。內(nèi)容選自《HTML 5與CSS 3核心技法（全彩）》一書。本書主線清晰，講解簡潔，并提供在線效果演示效果，非常適合小白上手！
1 HTML是骨架
很難想象一個人在桌前對著一塊砧板坐一夜，隔一會兒就噼里啪啦敲幾下，一會兒哭一會兒笑，是一種什么景象。事實上，在貓眼中我們就是這樣的。只不過我們面對的是一塊會發(fā)光的“砧板”而已。但為什么這塊“板子”如此吸引人？“上網(wǎng)”到底是在做什么？
獲取信息。
重點在“信息”，一種看不見摸不著卻真實存在的東西。無論“1 + 1 = 2”這段字符顯示得多么粗糙，都不會影響它傳遞了完整的信息，以及這條信息的內(nèi)在邏輯是正確的，不是嗎？HTML就是用來盛放最核心的內(nèi)容——信息。
所以，在CSS和JavaScript出現(xiàn)之前，HTML就出現(xiàn)了。這是必然的，因為如果連最核心的信息都無法有效傳遞，那圍繞著它的一切裝飾物和附屬品都是毫無意義的。
除滿足承載核心信息的需求外，HTML還解決了一個重要的問題——將信息結(jié)構(gòu)化。
試想有這樣一篇文章：
背影
我說道：“爸爸，你走吧。”他望車外看了看，說：“我買幾個橘子去。你就在此地，不要走動。”我看那邊月臺的柵欄外有幾個賣東西的等著顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個胖子，走過去自然要費事些。我本來要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過鐵道，要爬上那邊月臺，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。
評論
王花花 大概，天底下的父親，老去的樣子都有些共同的特質(zhì)吧
李拴蛋 我們都不愿意承認(rèn)他老了
劉備備 想吃橘子...
此時上面的信息基本沒有結(jié)構(gòu)，只能通過斷行或縮進(jìn)盡可能讓內(nèi)容更易讀，編輯時的狀態(tài)就是其最終的顯示效果。
HTML就派上了用場，見下方的代碼：
代碼
<artcle>
<h1>背影</h1>
<p>
我說道：“爸爸，你走吧。”他望車外看了看，說：“我買幾個橘子去。你就在此地，不要走動。”我看那邊月臺的柵欄外有幾個賣東西的等著顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個胖子，走過去自然要費事些。我本來要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過鐵道，要爬上那邊月臺，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。
</p>
</artcle>
<section id="comment-list">
<div class="title">評論</div>
<div class="comment">
<strong class="username">王花花</strong>
<span class="content">大概，天底下的父親，老去的樣子都有些共同的特質(zhì)吧</span>
</div>
<divclass="comment">
<strong class="username">李拴蛋</strong>
<span class="content">我們都不愿意承認(rèn)他老了</span>
</div>
<div class="comment">
<strong class="username">劉備備</strong>
<span class="content">想吃橘子...</span>
</div>
</section>
一頭霧水沒關(guān)系，后面我們會細(xì)說每一個部分。總之這段內(nèi)容給人感覺反而更繁瑣。但繁瑣是代價，重要的是現(xiàn)在這段信息有結(jié)構(gòu)了。這就意味著計算機可以通過結(jié)構(gòu)的規(guī)律將其顯示得更便于閱讀（甚至是交互）。
以下是不加任何裝飾性內(nèi)容直接讓瀏覽器呈現(xiàn)的結(jié)果：
效果
這是純HTML在沒有引入任何裝飾時的顯示效果。很明顯，即便是這樣也比純文字狀態(tài)易讀了許多。但注意，HTML本身沒有樣式，字體大小和粗細(xì)有變化的原因是瀏覽器的默認(rèn)樣式起了作用，與HTML沒有關(guān)系。而重點就在這里，這意味著我們可以基于這個結(jié)構(gòu)設(shè)計自己的頁面效果，見下方的示例。
代碼
<style>
body { font-family: 'Microsoft YaHei', sans-serif; }
#comment-list { background: #f0f0f0; padding: 10px; border: 1px solid #ccc; margin-top: 25px; }
#comment-list .comment { margin-top: 10px; margin-bottom: 10px; }
#comment-list .title {
color: #777; font-size: 1.1rem; padding-bottom: 5px;
border-bottom: 1px solid #ccc;
}
</style>
<artcle>
<h1>背影</h1>
<p>
我說道：“爸爸，你走吧。”他望車外看了看，說：“我買幾個橘子去。你就在此地，不要走動。”我看那邊月臺的柵欄外有幾個賣東西的等著顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個胖子，走過去自然要費事些。我本來要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過鐵道，要爬上那邊月臺，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。
</p>
</artcle>
<section id="comment-list">
<div class="title">評論</div>
<div class="comment">
<strong class="username">王花花</strong>
<span class="content">大概，天底下的父親，老去的樣子都有些共同的特質(zhì)吧</span>
</div>
<div class="comment">
<strong class="username">李拴蛋</strong>
<span class="content">我們都不愿意承認(rèn)他老了</span>
</div>
<div class="comment">
<strong class="username">劉備備</strong>
<span class="content">想吃橘子...</span>
</div>
</section>
效果
這里只是舉了一個小示例。你可以輕而易舉地讓頁面的風(fēng)格千變?nèi)f化，進(jìn)而讓用戶體驗有所差異（或差距）。“千變?nèi)f化”因CSS靈活、強大，“輕而易舉”因HTML簡潔、有序。結(jié)構(gòu)的力量！
CSS是皮膚
一個充滿活力的生態(tài)是不滿足于現(xiàn)狀的。人們在適應(yīng)了便利地瀏覽核心信息之后，就會想方設(shè)法改進(jìn)瀏覽的體驗。比如，讓自己的博客以多欄顯示，以便在視覺上區(qū)分不同板塊；修改字體顏色，以便強調(diào)一些重要信息等。
起初的做法是——準(zhǔn)備幾種特殊的標(biāo)簽，專門用于樣式的指定。涉及布局的地方，如果沒有特殊標(biāo)簽就直接用表格布局。以下沒有任何樣式的狀態(tài)（以下代碼均不需要看懂）：
代碼
<h1>標(biāo)題</h1><p>從前有座山，山里有個廟，廟里...</p>
效果
此時的頁面結(jié)構(gòu)下。
如果想讓標(biāo)題居中，則需要給其添加元素<center>，見下方的示例。
代碼
<center><h1>標(biāo)題</h1></center><p>從前有座山，山里有個廟，廟里...</p>效果
此時的頁面結(jié)構(gòu)如下。
居中標(biāo)題的目的確實達(dá)到了，但是有一個很大的問題：如果我改變主意了，不想讓其居中了，那么我還得再去將<center>元素去掉。這對于簡單的頁面確實可行，但如果是復(fù)雜的頁面，這種做法的工作量就是噩夢，因為每個地方都得修改，無論是對齊方式、顏色、背景色，還是大的布局都必須通過修改結(jié)構(gòu)才能完成。這種做法的最大問題是可維護(hù)性太差，很多時候為了一種樣式要修改很多不必要的結(jié)構(gòu)，枯燥、重復(fù)、削足適履的工作太多，基本上寫一次就再也不想改了。
這個問題亟待解決，而且解決方案還要兼容現(xiàn)有規(guī)則。現(xiàn)有規(guī)則是什么？HTML的語法及結(jié)構(gòu)。不過既然HTML已經(jīng)有結(jié)構(gòu)了，為什么不好好利用呢？
以前面示例中的文章頁面為例，如果我們想更改標(biāo)題，是否可以先統(tǒng)一選中所有標(biāo)題，然后說明想要什么樣式規(guī)則呢？就像下面這樣：
所有h1 元素聽著
對齊方式 居中。
字體顏色 黑色。
如果想將所有段落字體放大，則像下面這樣：
所有p 元素聽著
字體大小 150%。
這種方式的確很高效！同時這個規(guī)則與HTML語法無關(guān)，相當(dāng)于另一種語言。這樣結(jié)構(gòu)和樣式就不會互相影響，結(jié)構(gòu)是結(jié)構(gòu)，樣式是樣式，兩者隔離開了。如果想修改樣式，則完全不需要勞HTML大駕，只需要修改樣式文件即可，更便于管理和維護(hù)。這就是CSS，只不過其語法更簡潔。
下面以修改標(biāo)題對齊方式為例：
h1 { /* 所有h1 元素聽著 */
text-align: center; /* 對齊方式 居中 */
}
通過批量選擇和處理，極大地提高了開發(fā)效率，降低了維護(hù)成本，四兩撥千斤。
（完）
圖書推薦
《HTML 5與CSS 3核心技法（全彩）》
表嚴(yán)肅 著
本書能夠為自學(xué)Web開發(fā)初學(xué)者建立一套HTML與CSS的核心知識框架，同時借助豐富的示例讓初學(xué)者有一個愉悅、輕松的學(xué)習(xí)過程。
想從事前端開發(fā)的，可將本書作為學(xué)習(xí)的起點。正從事前端開發(fā)的，可將本書作為速查的手冊。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
