HTML（5）+CSS（3）--那些不知道但重要的知識！

時間 2019-11-29

標籤 html css 那些不知道重要知識欄目 HTML 简体版

原文原文鏈接

以前接觸的知識大可能是js，對於HTML和CSS只是作到了簡單的使用。在實際的開發中運用最多的也就是Flex佈局以及各類table表格，form表單等與後臺交互的元素。然而，這些技術可能在開發後臺管理系統的時候足夠，可是在真正佈局以及渲染一個美觀既大方的界面時，就會發現，這些東西是遠遠不夠的。 css

所以，花費了幾天的時間通讀了一遍《HTML5佈局之路》，這本書的總體流程是按部就班的，很適合像我這種只知道瑣碎知識點，然而並無對HTML和CSS有總體認識的同窗。

下面是本身在讀完整本書以後感受須要記錄的內容，若是你和小編同樣沒有對HTML和CSS有完整的認識的話，小編建議仍是去通讀一遍《HTML5佈局之路》html

HTML基本結構

一個基本的HTML文件須要由「文檔聲明」和「html標籤部分」組成。「html標籤部分」包含頭部和內容區兩部分。算法

文檔聲明

DOCTYPE是Document Type（文檔類型）的縮寫。<! DOCTYPE>元素用於聲明一個頁面的文檔類型定義。經過對其定義，告知瀏覽器當前文件的類型是HTML，這樣瀏覽器纔會以合適的方式加在它。canvas

關於DOCTYPEwindows

DOCTYPE標籤是導讀出現的，沒有結束標籤；
文檔類型定義在HTML文檔的第一行，在html以前；
文檔類型，會使瀏覽器使用相應標準加載網頁並顯示；
文檔不定義DOCTYPE，瀏覽器將沒法獲知HTML或XHTML文檔的類型，有些瀏覽器會靜茹怪異解析模式；
DOCTYPE與doctype同理，不區分大小寫，都可以使用。

當前使用的文檔聲明瀏覽器

衆多的文檔聲明當中，當前使用的是HTML5.0的版本，即文檔聲明的代碼格式爲：bash

<! DOCTYPE HTML>(即 <!doctype html>)
複製代碼

title標題

title表示的是一個網頁的標題，這個標題並不顯示在網頁的界面上，而是顯示在打開的瀏覽器的選項卡中。服務器

meta元信息

所謂元信息，指的是對信息進行描述的信息。 meta是用來在HTML文檔中模擬HTTP的響應頭報文。meta標籤位於網頁的<head></head>中，meta的屬性有兩種：name和http-equiv。ide

元信息基本語法函數

<meta 屬性="該屬性下的子屬性" content="具體子屬性對應的屬性值">
複製代碼

name屬性（幾種常見的name屬性）

description:描述信息，用於向搜索引擎歸納性地介紹這個網頁的主要內容。
author:做者，用於向搜索引擎說明網站的做者。
keywords：關鍵詞，用於向搜索引擎說明這個網頁的關鍵詞是什麼。
copyright:版權，用於向搜索引擎說明版權信息。
renderer:渲染內核，用於控制瀏覽器以什麼內核進行渲染。

http-equiv屬性（幾種常見的http-equiv屬性）

content-type:用於設置網頁內容的編碼。
refresh:用於定時讓網頁在指定時間內刷新或跳轉到其餘頁面。
windows-target：用於告知網頁在當前窗口中以獨立頁面顯示，能夠防止本身的網頁被別人看成一個frame頁調用，即防止被釣魚。

目前使用頻繁的元信息

當前使用頻繁的元信息設置主要包括字符編碼、關鍵字、描述信息、自動刷新或跳轉、獨立頁面顯示。其中，字符編碼與網頁中文字是否亂碼相關；關鍵字、描述信息，與網站在搜索引擎中的搜索排名相關；自動刷新或跳轉用於實現一些特殊功能需求；獨立頁面顯示，主要是防止本身的網站被釣魚。

第三章-總體佈局（標籤尺寸處理+浮動佈局）

下面一張圖列舉了本章的主要內容：

CSS引入方式

行內書寫——簡化樣式操做

<div style="box"></div>
複製代碼

注：若是涉及到樣式修改，這樣操做起來會異常麻煩，因此這是不建議的寫法。

內部書寫——簡化樣式操做

<div class="box"></div>

<style>
.box{
    width="900px"
}
</style>
複製代碼

外部樣式——控制多頁面樣式

link標籤的做用，將外部樣式表文件鏈接到HTML文檔中。外部引入的CSS文件，須要進行字符編碼的設置。

@charset"UTF-8"
複製代碼

@charset命令用於定義外部引入的CSS文件的字符編碼，該命令須要在CSS文件中的最前面定義，因爲網頁代碼的加載順序自上而下，放在最前面可以讓後面全部的代碼都按照這種字符編碼格式進行編碼和解析，同時在當前的CSS文件當中只容許出現一次。

引入外部文件須要對路徑有清楚的認識，剛剛學習的小夥伴們可能對路徑認識模糊，因此，接下來簡單說一下什麼是路徑。

路徑：以當前HTML文件爲起點，以要引入的文件爲終點，構成的道路就是「路徑」。

種類：一種是相對路徑，一種是絕對路徑。

相對路徑

以引入文件的網頁所在位置爲參考基礎，而創建出的目錄路徑。當保存於不一樣目錄的網頁文件引入同一個文件時，所用的路徑將不相同，故稱之爲相對。

../images/course.jpg
複製代碼

絕對路徑

以Web站點爲根目錄爲參考基礎的目錄路徑。之因此稱之爲絕對，意指當全部網頁引用同一個文件時，所使用的路徑都是同樣的。

C:/Users/course.jpg
複製代碼

開發時的選用

在開發當中一般使用相對路徑，緣由主要是由於在開發工程師在客戶端書寫好代碼，並上傳到服務器時，具體位置與客戶端並不相同，若是使用相對路徑，則會在路徑上出現問題。

路徑的特殊符號

../表示當前文件所在層級的上一層級。

./表示當前文件所在的層級。

/即是根目錄。

外部引入CSS的擴展知識

@import的基本語法

除了介紹到的link標籤可以外部引入CSS文件以外，還可使用@import。

使用link方法引入：

<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all">
複製代碼

使用@import方法引入：

<style type="text/css" media="screen">
    @import url("CSS文件");
</style>
複製代碼

link與@import的區別與使用原則

這兩種方法雖然都能實現外部引入CSS，可是存在必定的區別。也正是因爲這些區別，才致使多數人在實際開發中放棄了使用@import的引入方式。

link是XHTML標籤，除了加載CSS外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS；
link使用CSS時，在頁面載入時同時加載；@import須要頁面網頁徹底載入之後加載；
link是XHTML標籤，無兼容問題；@import是在CSS2.1中提出的，低版本的瀏覽器不支持；
link支持JavaScript控制DOM去改變樣式；@import不支持。

CSS選擇器

CSS當中存在三種基本選擇器，分別被稱爲：ID選擇器、類名選擇器和標籤名選擇器。

三種基本選擇器的比較

選擇器類型	生活中的同類物	選擇範圍	精準度	是否須要定義
ID選擇器	身份證號	最小	高	是
類選擇器	班級號	較大	通常	是
標籤名選擇器	性別	最大	最差	否

三種基本選擇器的用法

選擇器類型	標籤中的操做	CSS中的使用方法
ID選擇器	定義標籤的id屬性和屬性值	#選擇器名{屬性：屬性值}
類選擇器	定義標籤的class屬性	.選擇器名{屬性：屬性值}
標籤名選擇器	無	標籤名{屬性：屬性值}

CSS選擇器優先級

做爲標籤屬性style，設置的各種樣式	ID選擇器優先級	類名選擇器優先級	標籤名選擇器優先級
1000	0100	0010	0001

在行內，使用style屬性書寫的樣式，優先級最高，ID選擇器的優先級其次，類名選擇器優先級再次，優先級最弱的是標籤名選擇器。對於同種優先級的選擇器，後書寫的代碼生效。

樣式書寫順序

（1）顯示樣式：控制元素展現方式的屬性，主要包括浮動（float）、定位（position）、展現方式（display）、超出狀態以及可視化（overflow，visibility）等。（2）自身樣式：關於元素自身的樣式屬性，主要包括寬度（width）、高度（height）、外邊距（margin）、內邊距（padding）、邊框（border）等。（3）文本樣式：用於處理背景圖片。段落文章、文字字體的樣式。（4）CSS3新樣式：CSS3新增的屬性。

三種不一樣的樣式書寫方式

第一種：

.list-tit  //該方法使用連字符進行分隔
複製代碼

第二種：

.list_tit  //該方法使用下劃線進行分隔
複製代碼

第三種：

.listTit  //該方法使用小駝峯
複製代碼

CSS樣式重置

HTML的發明者在發明標籤之時，爲這些標籤設置了一些樣式，這些樣式就被稱爲標籤的「默認樣式」，「清除標籤的默認樣式」被稱爲「樣式重置」。

瀏覽器中樣式的不一樣表現，也是「清除默認樣式」的一個重要因素。一樣的標籤默認樣式在不一樣的瀏覽器上顯示的不同。

CSS重置文件內容：

html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}
複製代碼

在重置文件當中的CSS代碼，主要有兩種功能。一種代碼是用來清除掉標籤的默認樣式，另外一類代碼則是根據當前的網站製做需求，修改一些默認樣式，以方便開發工程師進行網站代碼的開發與書寫。

盒模型

完整的盒模型是由width、height（寬度和高度構成->內容）、border（邊框）、padding（內邊距）、margin（外邊距）這幾部分屬性組成。

盒模型——width與height屬性

屬性功能：width用於設置元素的寬度；height用於設置元素的高度；

盒模型——margin屬性

屬性功能：設置一個元素外邊距的寬度。外邊距，能夠理解爲當前元素與父級或其餘兄弟級元素之間的距離。

1~4個margin屬性值的含義

四個屬性值：值與方向的對應順序爲「上-右-下-左」（從頂部，順時針下來）
三個屬性值：值與方向的對應順序爲「上-左右-下」
兩個屬性值：值與方向的對應順序爲「上下，左右」
一個屬性值：該值表示4個方向的外邊距均設置爲這個值

margin分寫屬性

屬性名	屬性含義
margin-left、right、top、bottom	左側/右側/頂部/底部的外邊距

將margin的水平方向margin值設置爲auto，可以讓塊元素在父級當中水平居中。

盒模型——padding屬性

屬性功能：設置一個元素內邊距的寬度。外邊距，能夠理解爲當前元素與元素邊框之間的距離。

1~4個padding屬性值的含義（相似於margin）

分寫方法相似於margin。

盒模型——border屬性

border是一個複合屬性，一個邊框包括邊框的寬度、顏色和類型。

邊框寬度：以px等爲單位（不容許爲百分比和負值）
邊框顏色：十六進制顏色值或單詞。
邊框類型：solid（實線）、dotted（點線）、dashed（虛線）

分寫方法相似於margin。

基本結論：

（1）對於div等塊狀元素，可以經過margin：0 auto；實如今父級元素中的水平居中，對於span等行元素，不能經過margin：0 auto；實如今父級元素中的水平居中。

（2）默認的邊框顏色爲黑色，默認邊框粗細爲3像素（谷歌、火狐、IE8+等瀏覽器下爲3像素，IE7瀏覽器默認粗細爲4像素），必須設置「邊框樣式」屬性，纔可以觸發邊框效果。

（3）border：0；和border：none；的區別

border：0；表示設置邊框，可是邊框的寬度爲0，此時瀏覽器會正常渲染元素的邊框效果，會佔用內存效果；而且，全部的瀏覽器均可以正常使用。

border：none；表示不設置邊框，瀏覽器不會進行任何渲染，不會佔據內存空間；IE六、7不兼容。

（4）盒模型大小與元素實際寬高值（width、height）並不相同

盒模型的寬度=左右外邊距+左右邊框+左右內邊距+width
盒模型的高度=上下外邊距+上下邊框+上下內邊距+height

（5）父子之間用padding，兄弟之間用padding

浮動

浮動——float屬性

屬性功能：設置一個元素髮生浮動，浮動後的元素默認大小爲內容大小，而且能夠設置寬高，也能夠與其餘浮動元素或行元素處於同一行。

分析 float=left: 顯示效果以下圖：

瀏覽器窗口大於450px時
瀏覽器窗口大於300px小於450px
瀏覽器窗口小於300px

設置左浮動以後，每一個浮動的細化分析如圖：

瀏覽器窗口大小爲380px，三個div寬高均爲150px，三個div均設置了左浮動，圖中右下角的數字用於標識子元素的編號，1標識第一個元素。

結論：

float：left：表示向左浮動，標籤（或元素）從右邊向上浮起，在從右向左浮動到左邊。
float：right：表示向右浮動，標籤從左邊向上浮起，再從左向右浮動到右邊。
在浮動過程當中，若是遇到同方向的其餘元素，有可能會被「阻礙」。
在浮動過程當中，左浮動的元素和右浮動的元素並不會相互干涉、阻礙對方的運動。

浮動的影響

（1）脫離文檔流

普通流，也能夠稱爲常規流、文檔流。

普通流是文檔中可顯示對象在排列時所佔用的位置。能夠將整個網頁看作一個文檔，這個文檔自上而下分紅一行一行，並在每行當中按從左至右的順序，依次排放元素。

設置浮動的元素，會「脫離文檔流」。浮動的元素，並不屬於文檔中的普通流。

（2）浮動元素對父級元素高度的影響

默認狀況下，一個元素的內容大小決定這一個元素的高度（height），當爲一個塊元素設定了高度，那麼在主流瀏覽器中，這個元素的高度再也不由元素內容決定，而由設置的這個高度值決定。

問題：在頁面佈局中，常常會出現這樣的現象——父元素原本應該由內容撐開高度，但因爲內部子元素的佈局要求，須要對內部的子元素進行浮動。元素一旦浮動，就會脫離文檔流，腹肌的元素至關於「少」了內容，或者說是浮動的這個元素再也不對父級的高度產生任何做用或影響。

解決辦法：清除浮動。

（3）浮動元素對兄弟級元素佈局的影響

浮動元素會對兄弟級元素形成影響，可是僅針對於它後面的兄弟級元素，並不會對前面的兄弟級元素的佈局形成影響。

解決辦法：清除浮動

清除浮動

（1）浮動——clear屬性

屬性功能：用於清除浮動，規定元素的哪一側不容許存在其餘浮動元素。

注意：清除浮動，並非把浮動元素刪掉，而是取消掉「浮動元素浮動效果」對其餘元素形成的影響。

（2）清除浮動的不一樣類型

根據清除浮動的目的，能夠分爲如下兩大類。

防止浮動元素引發的兄弟級元素佈局受到影響。
防止浮動元素引發的父級高度塌陷。

（3）爲兄弟級元素設置clear樣式

假設父級元素當中存在三個div，第二個div發生了浮動，這時候第三個div元素的佈局有可能受到影響，只須要爲第三個div設置clear屬性便可（注意：是爲收到浮動影響的元素設置clear屬性）

注意：

並不是浮動元素的全部兄弟級元素都須要清除浮動，只須要針對浮動元素的下一個兄弟級元素設置清浮動，後面全部元素的佈局都會恢復。
若是但願在第二個div（浮動元素）與第三個div（清除浮動的兄弟級元素）之間有必定的間距，爲浮動元素後的一個兄弟級元素設置頂部外邊距時會失效（與上方空白處疊加），此時，能夠爲浮動元素設置下邊距。

（4）空標籤清除浮動

操做：在浮動元素的後面，增長了一個新標籤，這個新標籤是浮動元素的兄弟級元素，以後爲這個標籤設置clear屬性。

優勢：通俗易懂，操做方便

缺點：會添加大量無語義空標籤，結構與表現未分離，不利於維護。

（5）br標籤清除浮動

操做：br標籤清除浮動的方法相似於空標籤清除浮動，在父動元素後面添加一個br標籤，在br標籤中設置屬性clear，並賦值all，即：<br clear="all">

優勢：比空標籤方式語義稍強，代碼量較少。

缺點：結構與變現未分離。

（6）父元素浮動

操做：爲當前浮動元素的父級元素設置浮動。

優勢：語義化沒問題，同時代碼量少。

缺點：父元素的相鄰元素佈局受影響——因而須要繼續爲其父級設置浮動操做，直到body爲止。

（7）父元素設置overflow：hidden或auto

操做：爲當前浮動元素的父級元素設置overflow：hidden或auto

優勢：語義化沒去問題，同時代碼量少。

缺點：內容多的時候，會被隱藏，沒法顯示須要溢出的元素，也可能會對以後的JS的一些動態效果操做形成影響。

（8）利用after僞元素清除浮動

操做：爲當前浮動元素的父級元素添加僞元素，爲after僞元素設置清除浮動的功能代碼。

優勢：語義化和結構都沒有問題。

缺點：若是使用不合理，有可能形成代碼量增長；另外，IE6/7不支持after僞元素，須要使用zoom：1觸發hasLayout來清除浮動。

after僞元素清除浮動的原理其實與空標籤清除浮動的原理相似。

實例：

<div class="wrap"></div>

<style>
.wrap:after{
    content:'\200B'; //content表示領寬度的空格
    clear:both;  //塊狀元素
    display:block;
    height:0
}

.wrap{
    *zoom:1
}
</style>
複製代碼

注意：

（1）當浮動元素與非浮動元素處於同一行時，浮動元素在前，非浮動元素在後。

（2）一般狀況下，使用最爲頻繁的是after僞元素清浮動。

模塊佈局（選擇標籤+可用性與擴展性）

由於此章節內容較多且大可能是其餘文章中都可以查閱到的，因此在此只分享一些容易忽略或還未知道瑣碎知識。

（1）h1-h6的標籤都屬於標題類標籤，分別表示不一樣級別對的標題。（h1-h6分別爲2em，1.5em,1.17em,1em,0.83em,0.67em）

（2）瀏覽器默認字體大小爲16像素，1em=16px。

（3）hr標籤表示分隔線，會以一條直線的方式進行展現。（分隔線默認佔滿父級的整行）

（4）每一個p標籤就是一個段落，而使用br標籤換行，一般被稱爲軟換行，即雖然使用br以後，段落的文本內容從一個新行顯示，可是這些文本依舊是一個段落。

（5）顯示屬性——display

經常使用的兩種：

塊元素（具有以下特性）：

默認獨佔父級的一行，不可以與其餘元素處於同一行；
可以設置寬高（換言之：設置寬高有效）；
外邊距設置生效

行元素（具有以下特性）：

默認由內容撐開寬高，與其餘行元素可以處於同一行；
不可以設置寬高（換言之，設置寬高無效）；
縱向外邊距失效，橫向外邊距生效；

（6）display：none；與visibility：hidden；

display：none；與visibility：hidden；均可以實現元素的隱藏，所不一樣的是，設置display：none；的元素並不會佔據任何物理空間，而設置visibility：hidden；的元素，雖然視覺上看不到了，可是依舊會佔據物理空間。

（7）標籤的合理嵌套

塊元素能夠包含塊元素和行元素；
標題、段落類的塊元素，不可以包含塊元素；
行元素能夠包含行元素，但不能包含塊元素；
ins和del這兩種行元素能夠包含塊元素；
dl下只能直接包含dt和dd元素；
ul、ol下只能直接包含li元素；

（8）增強版選擇器——後臺選擇器

選擇器名1 選擇器名2 ... 選擇器名n{
    屬性名：屬性值；
    屬性名：屬性值；
}
複製代碼

後代選擇器就是使用多個選擇器的組合來找到要控制的標籤，不一樣的選擇器之間使用空格分開。

（9）增強版選擇器——子代選擇器

選擇器名1 >選擇器名2> ...> 選擇器名n{
    屬性名：屬性值；
    屬性名：屬性值；
}
複製代碼

子代選擇器也是使用多個選擇器的組合來找到要控制的標籤，不一樣的選擇器之間使用「>」分割。總體的原理與後臺選擇器相似，所不一樣的是，子代選擇器僅僅選擇到的是一代，而非全部後代。

（10）增強版選擇器——羣組選擇器

選擇器名1 ，選擇器名2 ，... ，選擇器名n{
    屬性名：屬性值；
    屬性名：屬性值；
}
複製代碼

羣組選擇器是爲「多個不一樣的選擇器」設置「相同的樣式」不一樣的選擇器之間使用都好進行分隔。

（11）增強版選擇器優先級算法

對於後代，子代選擇器，其優先級是進行疊加運算（疊加可是不進位）
對於羣組選擇器，每一個逗號分隔不一樣的選擇器，不一樣的選擇器各自計算各自的優先級

（12）a標籤的target屬性，用於控制連接頁面的打開位置，在默認狀況下，單擊一個超連接以後，會自動刷新當前頁面。兩個經常使用的屬性值，_blank,瀏覽器總在一個新打開，未命名的窗口中載入目標文檔；_self默認狀態，在當前頁面/目標中打開被連接的文檔。

（13）僞類選擇器：在選中標籤以後，爲標籤的某一種狀態指定樣式。

a標籤的4中僞類選擇器

僞類選擇器	描述
：link	超連接還未被訪問的狀態，也是超連接的默認狀態，能夠不設置
：visited	超連接已被訪問過的狀態
：hover	光標懸停在標籤上的狀態，不侷限於a標籤
：active	光標在標籤按下時（標籤被鼠標單擊但尚未釋放鼠標按鍵時）的狀態，不侷限於a標籤

a標籤的僞類選擇器優先級跟類的優先級是同樣的，都是0010

a標籤書寫要求遵循以下順序：：link-> ：visited-> ：hover-> ：active

僞類選擇器的順序不能顛倒的最主要的緣由是：4中僞類選擇器的優先級相同。因爲網頁文檔的加載是自上而下的，所以後加載的演示會覆蓋掉以前加載的樣式。

（14）光標樣式主要經過cursor這個屬性進行控制

（15）在默認狀況下，img的底部會有3~5像素的空隙（不一樣瀏覽器的具體像素會有所不一樣），能夠經過爲img設置 float：left/right;或 display:block;來實現清除空隙。

（16）文本超出隱藏 overflow：hidden

實例：當咱們的需求是

簡單描述：每個內容區域下面都要出現下劃線（可能爲實現，虛線或點線），且該線只出如今底部。

運用：這時，咱們能夠爲每一塊內容設置上線邊框。並對該邊框設置其樣式，最後經過文本超出隱藏和margin兩個屬性對最上面的一個進行隱藏。

第七章（文本等細節類樣式處理）

由於此章節內容較多且大可能是其餘文章中都可以查閱到的，因此一樣在此只分享一些容易忽略或還未知道瑣碎知識。

（1）opacity與filter

最初，CSS並無定義透明度的標準屬性，不一樣的瀏覽器也就定義了本身的專有屬性

IE瀏覽器經過設置CSS濾鏡（filter屬性）來實現透明度。書寫格式爲filter：alpha（opacity=number），其中，number是一個數字，取值範圍是0~100,0表示100%透明度（即徹底透明），100表示的是0%的透明度（即徹底不透明）

//基本語法
filter:alpha(opacity=50)
複製代碼

火狐瀏覽器提出了本身的透明度私有屬性，使用opacity屬性來實現透明度。書寫格式爲 -moz-opacity：number。其中，number是一個數字，取值範圍是0~1,0表示100%的透明度（即徹底透明），1表示0%的透明度（即不徹底透明）。IE8瀏覽器不支持。

//基本語法
-moz-opacity：0.5
複製代碼

W3C在CSS版本中添加了透明度的專有屬性（opacity），這個屬性獲得了各個主流瀏覽器以及較高版本IE瀏覽器的支持。書寫格式爲 opacity:number。其中，number是一個數字，取值範圍是0-1，其中，0表示100%的透明度（即徹底透明），1表示0%的透明度（即徹底不透明）

//基本語法
opacityL0.5
複製代碼

注意：opacity透明度會影響後代。

（2）若是將行高（line-height）設置爲負數，瀏覽器會按照默認行高來渲染段落文本。

（3）letter-spacing和word-spacing這兩個屬性都用來添加他們對應的元素中的空白。letter-spacing添加字母之間的空白，而word-spacing添加每一個單詞之間的空白。word-spacing對中文無效。

（4）經常使用的中文和英文字體：中文頁面建議以宋體，微軟雅黑爲首選，其餘字體次之；英文頁面建議使用Arialm，Tahoma，sans-serif。當設置多個字體時，不一樣的字體之間使用逗號隔開。英文字體須要書寫在中文字體的前面。

（5）網站中不免會用到一些比較特殊的字體（如「華文行楷」）來裝飾網站，讓其不那麼死板，然而，用戶計算機上不必定會有這種字體。也就是說，只有客戶端安裝了這個字體才能正常顯示，不然頁面渲染會調用客戶端計算機上已有的字體來替代開發工程師定義的字體。

第八章（特殊佈局狀況——定位佈局）

HTML+CSS佈局方式中，最爲常見的有兩種佈局模式，分別是浮動佈局和定位佈局。在平常開發中，使用最多的是浮動佈局。

（1）定位——position屬性

屬性功能：爲一個元素設置位置區域。

屬性值：position屬性規定了元素的定位類型，全部的元素均可以用position來進行定位。position定位以後的對象將具備塊屬性。position屬性有5個屬性值，分別爲： static、relative、absolute、fixed、inherit，其中 static爲默認值，能夠忽略不寫，static會忽略任何top、bottom、left或right。

（2）定位對文檔流的影響

當對一個元素設置了position：absolute和 position：fixed時，該元素會脫離文檔流，從而對父級以及兄弟級元素的佈局形成影響。若是元素設置了position：relative，根據W3C官方文檔上來講，並不會脫離文檔流，也不會有文檔的問題，可是在實際開發中的狀況是：元素不會脫離文檔流，可是能夠設置top、left等值進行位置的操做。

（3）設置絕對定位的元素的基本特色

絕對定位元素彼此不互相影響

設置屬性值爲absolute會將對象脫離出正常的文檔流，進行絕對定位，並不考慮它周圍內容的佈局。假如其餘定位對象已經佔據了給定的位置，它們之間不會相互影響，而會在同一位置層疊。

激活相對定位

要激活對象的絕對定位，必須設置position的屬性值爲absolute，而且指定left，right，top，bottom中的至少一個屬性，不然上述屬性會使用它們的默認值auto，這將致使對象聽從正常的HTML佈局規則，在前一個對象以後當即被呈遞。

（4）絕對定位元素針對誰進行定位

若是父級（無限）沒有設定position屬性，那麼當前的absolute則結合top、right、left、bottom屬性以瀏覽器左上角爲原始點進行定位。
若是父級（無限）沒有設定position屬性，且屬性值爲relative、absolute、fixed，那麼當前的absolute則結合top、left、right、bottom屬性以父級（最近）的左上角爲原始點進行定位。

（5）同時設置同方向的兩個值

對於同時設置水平方向的兩個值，或者同時設置垂直方向的兩個值的狀況，要基於元素是否存在固定寬高而分紅兩類。

絕對定位元素存在固定寬高當絕對定位元素存在固定寬高時，在水平方向上，不論先書寫left值仍是right值，均按照left的值進行渲染，在垂直方向上，不論先書寫top值仍是bottom值，均按照top值進行渲染。
絕對定位元素不存在固定寬高當絕對定位不存在固定寬高時，合理的left與right（top與bottom）值都會生效。

元素寬度=父級寬度-left值-right值

（6）定位——z-index屬性

在一個網頁當中，可能存在着多個定位的元素，當這些元素互相重疊時，就設計層疊的關係，所以，CSS當中規定了z-index。

定位元素默認的z-index的值爲0，數字越大，級別越高，數字越小，級別越低。

第九章（特殊佈局狀況——界限控制與僞元素的妙用）

若是不爲一個塊元素設置固定寬高，則該元素在水平方向上默認佔滿父級的百分之百。

若是不爲其設置固定寬度，則默認由內容撐開高度。

（1）最小高度（line-height）

當元素內容部分的高度小於「最小高度值」時（如內容高度爲200px），該元素按照最小高度值（500px）進行渲染；當元素內容部分的高度大於「最小高度值」時（如內容高度爲700px），該元素實際高度值（700px）進行渲染

（2）僞元素

在最初，僞元素的語法是使用「:」（一個冒號）。在CSS3當中，經過冒號的數量區分僞元素和僞類，僞元素使用兩個冒號（::before、::after），僞類選擇器使用一個冒號（:hover）。

使用:before，將會在選中的元素以前「添加」一個元素；使用:after，將會在選中的元素以後「添加」一個元素。

第十一章表格和第十二章表單略過

第十三章（HTML5新標籤與CSS3基礎）

HTML新增元素

新增結構元素	其餘新增元素
`<header>` 定義頁眉	`<video>` 定義視頻
`<hgroup>` 定義對網頁標題的組合	`<audio>` 定義音頻
`<nav>` 定義導航	`<embed>` 插入各類多媒體
`<section>` 定義文檔中的區段	`<mark>` 定義須要突出顯示或高亮顯示的文本
`<time>` 定義時間和日期	`<progress>` 顯示JS中耗費的函數的進程
`<article>` 定義文章	`<time>` 表示時間和日期
`<figure>` 定義一組媒體對象以及文字	`<canvas>` 定義圖形，提供畫布
`<figcaption>` 定義figure標題	`<command>` 表示命令按鈕
`<footer>` 定義頁腳	`<details>` 表示用戶要求獲得並能夠獲得的詳細信息
	`<wbr>` 表示軟換行

（1）如何讓低端瀏覽器兼容新的HTML5元素？

須要使用JavaScript動態的建立結構元素，以後使用CSS，爲每一個結構元素賦以「塊元素」的顯示特色。

<script>
  var arr=['header','footer','nav','section'];
  
  for(var i=0;i<arr.length){
      document.createElement(arr[i]);
  }
</script>
複製代碼

（2）CSS3選擇器——通用兄弟選擇器

（3）CSS3選擇器——僞類選擇器

（4）CSS3圓角邊框

屬性功能:爲元素設置平滑拐角的顯示區域。

border-radius縮寫規則：

一個值時：表示四個角值相同
兩個值時：第一個值表示左下角和右下角，第二個值表示右上角和左下角
三個值時：第一個值表示左上角，第二個值表示右上角和左下角，第三個值表示右下角
四個值時：分別表示左上角、右上角、右下角、左下角

《HTML5》佈局之路後面的章節是移動端的各類實際應用，在此先不作分享，由於尚未實際應用過~~~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。