CSS層疊樣式表

CSS 指層疊樣式表 (Cascading Style Sheets)
CSS (Cascading Style Sheets) 用於渲染HTML元素標籤的樣式
樣式定義如何顯示 HTML 元素
樣式一般存儲在樣式表中
把樣式添加到 HTML 4.0 中，是爲了解決內容與表現分離的問題
外部樣式表能夠極大提升工做效率
外部樣式表一般存儲在 CSS 文件中
多個樣式定義可層疊爲一
:
若是你要在HTML元素中設置CSS樣式，你須要在元素中設置"id" 和 "class"選擇器
id 選擇器能夠爲標有特定 id 的 HTML 元素指定特定的樣式。
HTML元素以id屬性來設置id選擇器,CSS 中 id 選擇器以 "#" 來定義
class 選擇器用於描述一組元素的樣式，class 選擇器有別於id選擇器，class能夠在多個元素中使用。
class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示：
類名的第一個字符不能使用數字！它沒法在 Mozilla 或 Firefox 中起做用
選擇器一般是您須要改變樣式的 HTML 元素。
每條聲明由一個屬性和一個值組成。
屬性（property）是您但願設置的樣式屬性（style attribute）。每一個屬性有一個值。屬性和值被冒號分開
:
css樣式三種調用使用方式：
插入樣式表的方法有三種:
外部樣式表(External style sheet)：語法：<link rel="stylesheet" type="text/css" href="mystyle.css">
內部樣式表(Internal style sheet)：在頭部寫樣式
內聯樣式(Inline style)：直接在元素中寫(不推薦)
*全局標記{ }
：
爲了不Internet Explorer 中沒法調整文本的問題，使用 em 單位代替像素。
em的尺寸單位由W3C建議。
1em和當前字體大小相等。在瀏覽器中默認的文字大小是16px。
所以，1em的默認大小是16px，能夠換算。
:
css背景樣式：
background-color：背景顏色
background-image：url("圖片")：背景圖片(默認狀況下，背景圖像進行平鋪重複顯示，以覆蓋整個元素實體)
background-repeat：背景平鋪 on-repeat不平鋪 -x橫向平鋪-y垂直平鋪
background-position：背景定位屬性
background-attachment:背景附件屬性 fixed(固定背景屬性)
background：# url（#）有背景有圖片輸入 列子
：
css文本樣式值：
font-size：#px； 文字大小
font-family：字體樣式,如:微軟雅黑
font-style：文字狀態如 斜體等
font-weight：文字粗細
text-align：文本對齊
font-variant ：字體之間的轉變，以小型大寫字體或者正常字體顯示文本。
line-height：行高 上下距離會有變化，也能夠用於行與行之間的空間(%)
text-decoration：文本裝飾 underline下劃線 none去除下劃線
text-decoration: overline：上劃線
text-decoration:line-through：刪除線
text-transform: uppercase：英文大寫
text-transform:lowercase：英文小寫
text-transform:capitalize：首字母大寫
text-align：設置爲"justify"，每一行被展開爲寬度相等，左，右外邊距是對齊
text-indent：第一行的文本縮進
text-shadow：文本陰影，(1.左右2.上下3.模糊程度4.顏色)
letter-spacing：字符之間的空間
direction：文字方向
word-spacing：增長在字符之間空白的空間
white-space:nowrap:在元素內禁止文字環繞
字體屬性定義字體，加粗，大小，文字樣式。
font-family 屬性設置文本的字體系列。
font-family 屬性應該設置幾個字體名稱做爲一種"後備"機制，若是瀏覽器不支持第一種字體，他將嘗試下一種字體。
font-style：這個屬性有三個值：normal(正常)，italic(斜體)，oblique(斜體)
font-size 屬性設置文本的大小。
可否管理文字的大小，在網頁設計中是很是重要的。可是，你不能經過調整字體大小使段落看上去像標題，或者使標題看上去像段落。
請務必使用正確的HTML標籤，就<h1> - <h6>表示標題和<p>表示段落：
字體大小的值能夠是絕對或相對的大小。
絕對大小：設置一個指定大小的文本，不容許用戶在全部瀏覽器中改變文本大小
肯定了輸出的物理尺寸時絕對大小頗有用
相對大小：相對於周圍的元素來設置大小，容許用戶在瀏覽器中改變文字大小
：
css列表樣式：
在HTML中，有兩種類型的列表：
<ul>無序列表 - 列表項標記用特殊圖形（如小黑點、小方框等）
<ol>有序列表 - 列表項的標記有數字或字母
list-style-type：列表符號
list-style-image：圖像符號(能夠自定義)
list-style-position：位置符號
list-style:複合屬性(能夠多種屬性在一塊兒)
list-style: none：清除默認小黑點
circle圓圈
disc正方形
：
CSS 盒子模型(Box Model)
全部HTML元素能夠看做盒子，在CSS中，"box model"這一術語是用來設計和佈局時使用。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。
盒模型容許咱們在其它元素和周圍元素邊框之間的空間放置元素。
margin(外邊距) - 清除邊框外的區域，外邊距是透明的, Margin可使用負值，重疊的內容。Margin: # auto(自動)居中：放大縮小 #上下自動
border(邊框) - 圍繞在內邊距和內容外的邊框。top上, left左, right右, bottom下，(color顏色, width寬, solid實線，dashed虛線)
padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
Content(內容) - 盒子的內容，顯示文本和圖像。
最終元素的總寬度計算公式是這樣的：總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
border-style：用於設置元素全部邊框的樣式，或者單獨地爲各邊設置邊框樣式，以下所示：
none : 默認無邊框
dotted : 定義一個點線邊框
dashed : 定義一個虛線邊框
solid : 定義實線邊框
double : 定義兩個邊框。 兩個邊框的寬度和 border-width 的值相同
groove : 定義3D溝槽邊框。效果取決於邊框的顏色值
ridge : 定義3D脊邊框。效果取決於邊框的顏色值
inset : 定義一個3D的嵌入邊框。效果取決於邊框的顏色值
outset : 定義一個3D突出邊框。 效果取決於邊框的顏色值
。。。。。。。。。。。
border-right：分割線
border：用於把針對四個邊的屬性設置在一個聲明。
border-width：用於爲元素的全部邊框設置寬度，或者單獨地爲各邊邊框設置寬度。
border-color：設置元素的全部邊框中可見部分的顏色，或爲 4 個邊分別設置顏色。
border-bottom：用於把下邊框的全部屬性設置到一個聲明中。
border-bottom-color：設置元素的下邊框的顏色。
border-bottom-style：設置元素的下邊框的樣式。
border-bottom-width：設置元素的下邊框的寬度。
border-left：用於把左邊框的全部屬性設置到一個聲明中。
border-left-color：設置元素的左邊框的顏色。
border-left-style：設置元素的左邊框的樣式。
border-left-width：設置元素的左邊框的寬度。
border-right：用於把右邊框的全部屬性設置到一個聲明中。
border-right-color：設置元素的右邊框的顏色。
border-right-style：設置元素的右邊框的樣式。
border-right-width：設置元素的右邊框的寬度。
border-top：用於把上邊框的全部屬性設置到一個聲明中。
border-top-color： 設置元素的上邊框的顏色。
border-top-style：設置元素的上邊框的樣式。
border-top-width：設置元素的上邊框的寬度。
爲邊框指定寬度有兩種方法：能夠指定長度值，好比 2px 或 0.1em(單位爲 px, pt, cm, em 等)，或者使用 3 個關鍵字之一，它們分別是 thick(厚的) 、(中等)medium（默認值） 和 thin(薄的)。
：
CSS 輪廓（outline）
輪廓（outline）是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的做用。
輪廓（outline）屬性指定元素輪廓的樣式、顏色和寬度
outline：在一個聲明中設置全部的輪廓屬性
outline-color：設置輪廓的顏色
outline-style：設置輪廓的樣式
outline-width：設置輪廓的寬度
：
CSS margin(外邊距)
margin(外邊距)屬性定義元素周圍的空間。
margin 清除周圍的（外邊框）元素區域。margin 沒有背景顏色，是徹底透明的。
margin 能夠單獨改變元素的上，下，左，右邊距，也能夠一次改變全部的屬性。
margin可使用負值，重疊的內容。
auto ：設置瀏覽器邊距，這樣作的結果會依賴於瀏覽器
length：定義一個固定的margin（使用像素，pt，em等）
% ：定義一個使用百分比的邊距
爲了縮短代碼，有可能使用一個屬性中margin指定的全部邊距屬性。這就是所謂的簡寫屬性，全部邊距屬性的簡寫屬性是 margin :
margin：屬性能夠有一到四個值：(邊距是順時針旋轉：上右下左)
margin：在一個聲明中設置全部外邊距屬性。
margin-bottom：設置元素的下外邊距。
margin-left：設置元素的左外邊距。
margin-right：設置元素的右外邊距。
margin-top：設置元素的上外邊距。
：
CSS padding（填充）
length：定義一個固定的填充(像素, pt, em,等)
%：使用百分比值定義一個填充
http:/ /www.i is7.co m/a/l m/y czm ljgj/
padding（填充）是一個簡寫屬性，定義元素邊框與元素內容之間的空間，即上下左右的內邊距。
當元素的 padding（填充）內邊距被清除時，所釋放的區域將會受到元素背景顏色的填充。
單獨使用 padding 屬性能夠改變上下左右的填充。
爲了縮短代碼，它能夠在一個屬性中指定的全部填充屬性，這就是所謂的簡寫屬性。全部的填充屬性的簡寫屬性是 padding :
padding：屬性能夠有一到四個值：(邊距是順時針旋轉：上右下左)
padding：使用簡寫屬性設置在一個聲明中的全部填充屬性
padding-bottom：設置元素的底部填充
padding-left：設置元素的左部填充
padding-right：設置元素的右部填充
padding-top：設置元素的頂部填充
:
CSS 尺寸 (Dimension)
尺寸 (Dimension) 屬性容許你控制元素的高度和寬度。一樣，它容許你增長行間距。
height：設置元素的高度。
width 設置元素的寬度。
line-height：設置行高。
max-height：設置元素的最大高度。
max-width：設置元素的最大寬度。
min-height：設置元素的最小高度。
min-width：設置元素的最小寬度。
：
CSS Display(顯示) 與 Visibility（可見性）
display：屬性設置一個元素應如何顯示。
visibility：屬性指定一個元素應可見仍是隱藏。
隱藏元素 - display:none 或 - visibility:hidden
隱藏一個元素能夠經過把display屬性設置爲"none"，或把visibility屬性設置爲"hidden"。
display:none能夠隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，並且該元素本來佔用的空間也會從頁面佈局中消失。
visibility:hidden能夠隱藏某個元素，但隱藏的元素仍需佔用與未隱藏以前同樣的空間。也就是說，該元素雖然被隱藏了但仍然會影響佈局。
display(不佔空間)：隱藏。none不顯示 block顯示
visibility(佔空間)：隱藏。 hidden不顯示 visitle顯示
display:inline：能夠把塊級元素變成內聯元素
display:block：能夠把內聯元素變成塊級元素，不容許有它內部的嵌套塊元素。
塊級元素(block)特性：
老是獨佔一行，表現爲另起一行開始，並且其後的元素也必須另起一行顯示;
寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)均可控制;
內聯元素(inline)特性：
和相鄰的內聯元素在同一行;
寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變，就是裏面文字或圖片的大小;
塊級元素主要有：address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
內聯元素主要有：a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
可變元素(根據上下文關係肯定該元素是塊元素仍是內聯元素)：applet ,button ,del ,iframe , ins ,map ,object , script
CSS中塊級、內聯元素的應用：利用CSS咱們能夠擺脫上面表格裏HTML標籤歸類的限制，自由地在不一樣標籤/元素上應用咱們須要的屬性。
主要用的CSS樣式有如下三個：
display:block -- 顯示爲塊級元素
display:inline -- 顯示爲內聯元素
display:inline-block -- 顯示爲內聯塊元素，表現爲同行顯示並可修改寬高內外邊距等屬性
咱們常將<ul>元素加上display:inline-block樣式，本來垂直的列表就能夠水平顯示了。
:
CSS Position(定位)
position 屬性指定了元素的定位類型。
position 屬性的五個值：
static：默認值，沒有定位，元素出如今正常的流中，靜態定位的元素不會受到 top, bottom, left, right影響。
absolute：絕對定位，相對於最近的已定位父元素，若是元素沒有已定位的父元素，那麼它的位置相對於<html>，元素和其餘元素重疊。
relative：相對定位，相對其正常位置，(相對靈活，按元素本身的位置)
fixed：固定定位，即便窗口是滾動的它也不會移動
sticky：能夠把它稱之爲粘性定位，依賴於用戶的滾動，在 position:relative 與 position:fixed 定位之間切換
元素可使用的頂部，底部，左側和右側屬性定位。然而，這些屬性沒法工做，除非是先設定position屬性。他們也有不一樣的工做方式，這取決於定位方法
z-index：指定了一個元素的堆疊順序（哪一個元素應該放在前面，或後面），一個元素能夠有正數或負數的堆疊順序，具備更高堆疊順序的元素老是在較低的堆疊順序元素的前面。
clip:rect：裁剪元素，先有定位
overflow:scroll：內容溢出時，顯示隱藏內容
overflow:hidden：內容溢出時，隱藏
overflow:auto：自動處理溢出內容
overflow-x：指定如何處理右邊/左邊邊緣的內容溢出元素的內容區域。值：auto，hidden，scroll，visible，no-display，no-content
overflow-y：指定如何處理頂部/底部邊緣的內容溢出元素的內容區域。值：auto，hidden，scroll，visible，no-display，no-content
:
CSS float(浮動)
浮動，可讓行內和塊變成行內塊
浮動，會使元素向左或向右移動，其周圍的元素也會從新排列。
浮動，每每是用於圖像，但它在佈局時同樣很是有用
元素的水平方向浮動，意味着元素只能左右移動而不能上下移動。
一個浮動元素會盡可能向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。
浮動元素以後的元素將圍繞它。
浮動元素以前的元素將不會受到影響。
若是圖像是右浮動，下面的文本流將環繞在它左邊
若是你把幾個浮動的元素放到一塊兒，若是有空間的話，它們將彼此相鄰
1.<div style="clear:both;"></div>浮動清除
2.overflow：hiddc，auto
：
光標懸停時，外形變化
cursor:move：四方拉伸
cursor:e-resize：左右拉伸
cursor:w-resize：左右拉伸
cursor:n-resize：上下拉伸
cursor:s-resize：上下拉伸
cursor:ne-resize：右上角+左下角
cursor:sw-resize：右上角+左下角
cursor:nw-resize：左上角+右下角
cursor:se-resize：左上角+右下角
cursor:auto：文本
cursor:text：文本
cursor:default：原形
cursor:help：原形+問號
cursor:pointer：手指
cursor:progress：原形+加載
cursor:wait：加載
cursor:crosshair：十字
：
CSS 僞類(Pseudo-classes)：
光標通過顯示狀態：
a:link：未訪問過的連接
a:hover：當用戶鼠標懸停在連接上時
a:visited：用戶已訪問過的連接
a:active：連接被點擊的那一刻
a:focus：選擇元素輸入後具備焦點
全部CSS僞類/元素：
:checked input:checked：選擇全部選中的表單元素
:disabled input:disabled：選擇全部禁用的表單元素
:empty p:empty：選擇全部沒有子元素的p元素
:enabled input:enabled：選擇全部啓用的表單元素
:first-of-type p:first-of-type：選擇每一個父元素是p元素的第一個p子元素
:in-range input:in-range：選擇元素指定範圍內的值
:invalid input:invalid：選擇全部無效的元素
:last-child p:last-child：選擇全部p元素的最後一個子元素
:last-of-type p:last-of-type：選擇每一個p元素是其母元素的最後一個p元素
:not(selector) :not(p)：選擇全部p之外的元素
:nth-child(n) p:nth-child(2)：選擇全部p元素的第二個子元素
:nth-last-child(n) p:nth-last-child(2)：選擇全部p元素倒數的第二個子元素
:nth-last-of-type(n) p:nth-last-of-type(2)：選擇全部p元素倒數的第二個爲p的子元素
:nth-of-type(n) p:nth-of-type(2)：選擇全部p元素第二個爲p的子元素
:only-of-type p:only-of-type ：選擇全部僅有一個子元素爲p的元素
:only-child p:only-child：選擇全部僅有一個子元素的p元素
:optional input:optional：選擇沒有"required"的元素屬性
:out-of-range input:out-of-range：選擇指定範圍之外的值的元素屬性
:read-only input:read-only：選擇只讀屬性的元素屬性
:read-write input:read-write：選擇沒有隻讀屬性的元素屬性
:required input:required ：選擇有"required"屬性指定的元素屬性
:root root ：選擇文檔的根元素
:target #news:target：選擇當前活動#news元素(點擊URL包含錨的名字)
:valid input:valid：選擇全部有效值的屬性
:focus input:focus：選擇元素輸入後具備焦點
:first-letter p:first-letter：選擇每一個<p> 元素的第一個字母
:first-line p:first-line：選擇每一個<p> 元素的第一行
:first-child p:first-child：選擇器匹配屬於任意元素的第一個子元素的 <p> 元素
:before p:before：在每一個<p>元素以前插入內容
:after p:after：在每一個<p>元素以後插入內容
:lang(language) p:lang(it)：爲<p>元素的lang屬性選擇一個開始值
：
CSS 僞元素
"first-line" 僞元素用於向文本的首行設置特殊樣式
"first-line" 僞元素只能用於塊級元素。
注意： 下面的屬性可應用於 "first-line" 僞元素：
font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
:first-letter 僞元素
"first-letter" 僞元素用於向文本的首字母設置特殊樣式：
注意： "first-letter" 僞元素只能用於塊級元素。
注意： 下面的屬性可應用於 "first-letter" 僞元素：
font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear
:before：僞元素能夠在元素的內容前面插入新內容。
:after：僞元素能夠在元素的內容以後插入新內容。
：
CSS 佈局 - 水平 & 垂直對齊
要水平居中對齊一個元素(如 <div>), 可使用 margin: auto;。
設置到元素的寬度將防止它溢出到容器的邊緣。
元素經過指定寬度，並將兩邊的空外邊距平均分配
要讓圖片居中對齊, 可使用 margin: auto; 並將它放到 塊 元素中。
除了使用 padding 和 line-height 屬性外,咱們還可使用 transform 屬性來設置垂直居中。
讓圖片自動居中先把它變成塊級元素。
：
CSS 組合選擇符
在 CSS3 中包含了四種組合方式:
1.後代選擇器(以空格分隔)
2.子元素選擇器(以大於號分隔）
3.相鄰兄弟選擇器（以加號分隔）
4.普通兄弟選擇器（以破折號分隔）
：
CSS 導航欄
做爲標準的HTML基礎一個導航欄是必須的。
在咱們的例子中咱們將創建一個標準的HTML列表導航欄。
導航條基本上是一個連接列表，因此使用 <ul> 和 <li>元素很是有意義
有兩種方法建立橫向導航欄。使用內聯(inline)或浮動(float)的列表項。
這兩種方法都很好，但若是你想連接到具備相同的大小，你必須使用浮動的方法。
display:block - 顯示塊元素的連接，讓總體變爲可點擊連接區域（不僅是文本），它容許咱們指定寬度
：
CSS 下拉菜單
使用 CSS 建立一個鼠標移動上去後顯示下拉菜單的效果
設置好樣式和位置關係。
：
CSS 提示工具(Tooltip)
提示工具在鼠標移動到指定元素後觸發
::after：僞元素，能夠建立一個三角形用於"提示工具"
content:""：必不可少的
transparent (一個是漏斗形)
transparent (兩個三角形)
transparent (三個也是三角形)
一個排在顏色前面，三角形方向，向左
兩個排在顏色前面，三角形方向，向上
三個排在顏色後面，三角形方向，向下
三個排在顏色前面，三角形方向，向右
transition 屬性及 opacity 屬性來實現淡入效果
寫入淡入效果，效果更好
：
CSS 圖片廊
:
CSS 圖像透明/不透明
使用CSS很容易建立透明的圖像。
CSS Opacity屬性是W3C的CSS3建議的一部分
CSS3中屬性的透明度是 opacity。
Opacity屬性值從0.0 - 1.0。值越小，使得元素更加透明。
opacity 屬性一般與 :hover 選擇器一塊兒使用
：
CSS 圖像拼合技術
圖像拼合就是單個圖像的集合。
有許多圖像的網頁可能須要很長的時間來加載和生成多個服務器的請求。
使用圖像拼合會下降服務器的請求數量，並節省帶寬
建立一個導航列表：
background:url("圖片")
位置設置相對定位，讓裏面的絕對定位
margin和padding設置爲0
全部圖像的高度統一，具體分佈樣式
懸停效果：
:hover 選擇器用於鼠標懸停在元素上的顯示的效果
:hover 選擇器能夠運用於全部元素。
：
CSS 媒體類型
媒體類型容許你指定文件將如何在不一樣媒體呈現。該文件能夠以不一樣的方式顯示在屏幕上，在紙張上，或聽覺瀏覽器等等
@media 規則
@media 規則容許在相一樣式表爲不一樣媒體設置不一樣的樣式。
：
CSS3 @keyframes 規則br/>使用@keyframes規則，你能夠建立動畫。
建立動畫是經過逐步改變從一個CSS樣式設定到另外一個。
在動畫過程當中，您能夠更改CSS樣式的設定屢次。
指定的變化時發生時使用％，或關鍵字"from"和"to"，這是和0％到100％相同。
0％是開頭動畫，100％是當動畫完成。
爲了得到最佳的瀏覽器支持，您應該始終定義爲0％和100％的選擇器。
注意: 使用animation屬性來控制動畫的外觀，還使用選擇器綁定動畫
：
CSS 上下左右四個方向箭頭(^v<>)
<p>和<i>來作
實線
用邊框寬度：(1.形狀 2.厚度 3.厚度 4.形狀)
display: inline-block
內邊距：Padding：#
上：transform: rotate(-135deg)
下：transform: rotate(45deg)
左：transform: rotate(135deg)
右：transform: rotate(-45deg)
：
翻頁符：
左雙箭頭(<<)：«。
左單箭頭(<)：‹。❮
右雙箭頭(>>)：»。
右單箭頭(>)：›。❯
：
用邊框畫圓，先肯定高和寬。在寫其餘樣式
：
長度單位
em：通常瀏覽器字體大小默認爲16px，則2em == 32px
rem：根據元素（html）的 font-size
ex：依賴於英文子母小 x 的高度
ch：數字 0 的寬度
vw：viewpoint width，視窗寬度，1vw=視窗寬度的1%
vh：viewpoint height，視窗高度，1vh=視窗高度的1%
vmin：vw和vh中較小的那個
vmax：vw和vh中較大的那個
%：百分比
px：像素 (1px = 1/96th of 1in)
cm：釐米
mm：毫米
in：英寸 (1in = 96px = 2.54cm)
pt：point，大約1/72英寸； (1pt = 1/72in)
pc：pica，大約6pt，1/6英寸； (1pc = 12 pt)

後加內容：
position:absolute與float:left，二者有兩大共性：包裹性，破壞性。
包裹性
包裹性換種說法就是讓元素inline-block化，例如一個div標籤默認寬度是100%顯示的，可是一旦被absolute屬性纏上，則100%默認寬度就會變成自適應內部元素的寬度。
float也是典型的inline-block化元素，這種元素的inline-block化適用於任何水平的標籤。例如平時咱們要讓span標籤支持width屬性，可能要設置。想重構高質量的頁面，少用絕對定位佈局！