拖延了一周的CSS學習筆記終于利用周末去補齊了，本篇文章著重梳理之前所學的CSS知識點，查漏補缺。同時，試著用git將重點案例存放到遠程倉庫中，更近一步貼近公司流程。????
「1. HTML的局限性」
「2. CSS網頁的美容師」
「3. CSS」CSS(Cascading Style Sheets)通常稱為CSS樣式表或層疊樣式表(級聯(lián)樣式表)。
「4. CSS注釋」
/* 這是注釋 */
「1.行內式(內聯(lián)樣式)」
通過標簽的style屬性來設置元素的樣式
<標簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標簽名>
例如：
<div style="color: red; font-size: 12px;">青春不常在，抓緊談戀愛</div>
「2.內部樣式表(內嵌樣式表)」
也稱為內嵌式，將CSS代碼集中寫在HTML文檔的head頭部標簽中，并且用style標簽定義。
<head>
<style type="text/CSS">
選擇器（選擇的標簽） {
屬性1: 屬性值1;
屬性2: 屬性值2;
屬性3: 屬性值3;
}
</style>
</head>
「3.外部樣式表(外鏈式)」
也稱鏈入式，是將所有的樣式放在一個或多個以.css為擴展名的外部樣式表文件中，通過link標簽將外部樣式表文件鏈接到HTML文檔中。
rel:定義當前文檔與被鏈接文檔之間的關系，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個樣式表文件。href:定義所鏈接外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑。<link rel="stylesheet" href="index.css">
「4.團隊約定-代碼風格」
/*1.緊湊格式 (Compact)*/
h3 { color: deeppink;font-size: 20px;}
// 2.一種是展開格式（推薦）
h3 {
color: deeppink;
font-size: 20px;
}
/* 團隊約定-代碼大小寫*/
/* 樣式選擇器，屬性名，屬性值關鍵字全部使用小寫字母書寫，屬性字符串允許使用大小寫。*/
/* 推薦 */
h3{
color: pink;
}
/* 不推薦 */
H3{
COLOR: PINK;
}
找到指定的HTML頁面元素，選擇標簽。
「1. 標簽選擇器」
標簽名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
「2. 類選擇器」
.類名 {
屬性1:屬性值1;
屬性2:屬性值2;
屬性3:屬性值3;
}
<p class='類名'></p>
優(yōu)點：可以為元素對象定義單獨或相同的樣式。可以選擇一個或者多個標簽。注意：類選擇器使用“.”（英文點號）進行標識，后面緊跟類名(自定義，我們自己命名的)「3. id選擇器」id選擇器使用#進行標識，后面緊跟id名
#id名 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
<p id="id名"></p>
「4. 通配符選擇器」
通配符選擇器用*號表示，* 就是選擇所有的標簽。它是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素。
注意：會匹配頁面所有的元素，降低頁面響應速度，不建議隨便使用* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
例如下面代碼，使用通配符選擇器定義CSS樣式，清除所有HTML標記的默認邊距。
* {
margin: 0; /* 定義外邊距*/
padding: 0; /* 定義內邊距*/
}
「5. 基礎選擇器總結」
| 選擇器 | 作用 | 缺點 | 使用情況 | 用法 |
|---|---|---|---|---|
| 標簽選擇器 | 可以選出所有相同的標簽，比如p | 不能差異化選擇 | 較多 | p { color：red;} |
| 類選擇器 | 可以選出1個或者多個標簽 | 可以根據需求選擇 | 非常多 | .nav { color: red; } |
| id選擇器 | 一次只能選擇器1個標簽 | 只能使用一次 | 不推薦使用 | #nav {color: red;} |
| 通配符選擇器 | 選擇所有的標簽 | 選擇的太多，有部分不需要 | 不推薦使用 | * {color: red;} |
「6. 團隊約定-選擇器」
*。/* 推薦 */
.jdc {}
li {}
p{}
/* 不推薦 */
*{}
#jdc {}
div{} 因為div 沒有語義，我們盡量少用
復合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的
「1. 后代選擇器」又稱為包含選擇器
父級 子級{屬性:屬性值;屬性:屬性值;}
.class h3 {color:red;font-size:16px;}
「2. 子元素選擇器」
> 進行連接.class>h3 {color:red;font-size:14px;}
「3. 交集選擇器」
不能有空格，如h3.special。交集選擇器是并且的意思,即...又...的意思
比如： p.one 選擇的是： 類名為 .one 的段落標簽。
/*用的相對來說比較少，不建議使用。*/
「4. 并集選擇器」如果某些選擇器定義的相同樣式，就可以利用并集選擇器，可以讓代碼更簡潔。并集選擇器（CSS選擇器分組）是各個選擇器通過,連接而成的，通常用于集體聲明。
比如
.one,
p ,
#test {color: #F00;}
表示 .one 和 p 和 #test 這三個選擇器都會執(zhí)行顏色為紅色。
通常用于集體聲明。
「5. 鏈接偽類選擇器」
用于向某些選擇器添加特殊的效果。寫的時候，他們的順序盡量不要顛倒,按照lvha的順序。否則可能引起錯誤。
鏈接偽類，是利用交集選擇器.
a:link 未訪問的鏈接a:visited 已訪問的鏈接a:hover 鼠標移動到鏈接上a:active 選定的鏈接a { /* a是標簽選擇器 所有的鏈接 */
font-weight: 700;
font-size: 16px;
color: gray;
text-decoration: none; /* 清除鏈接默認的下劃線*/
}
a:hover { /* :hover 是鏈接偽類選擇器 鼠標經過 */
color: red; /* 鼠標經過的時候，由原來的 灰色 變成了紅色 */
}
「6. 復合選擇器總結」
| 選擇器 | 作用 | 特征 | 使用情況 | 隔開符號及用法 |
|---|---|---|---|---|
| 后代選擇器 | 用來選擇元素后代 | 是選擇所有的子孫后代 | 較多 | 符號是空格 .nav a |
| 子代選擇器 | 選擇 最近一級元素 | 只選親兒子 | 較少 | 符號是> .nav>p |
| 交集選擇器 | 選擇兩個標簽交集的部分 | 既是 又是 | 較少 | 沒有符號 p.one |
| 并集選擇器 | 選擇某些相同樣式的選擇器 | 可以用于集體聲明 | 較多 | 符號是逗號 .nav, .header |
| 鏈接偽類選擇器 | 給鏈接更改狀態(tài) | 較多 | 重點記住 a{} 和 a:hover 實際開發(fā)的寫法 |
「1. font-size」
谷歌瀏覽器默認的文字大小為16pxp { font-size:20px; }
p { font-family:"微軟雅黑";}
p {font-family: Arial,"Microsoft Yahei", "微軟雅黑";}
font-family:"Microsoft Yahei"。在 CSS 直接使用 Unicode 編碼來寫字體名稱可以避免這些錯誤。使用 Unicode 寫中文字體名稱，瀏覽器是可以正確的解析的。font-family: "\5FAE\8F6F\96C5\9ED1"; 表示設置字體為“微軟雅黑”。
「3. font-weight」
| 屬性值 | 描述 |
|---|---|
| normal | 默認值（不加粗的） |
| bold | 定義粗體（加粗的） |
| 100~900 | 400 等同于 normal，而 700 等同于 bold (數字表示粗細用的多) |
「4. font-weight」
font-style屬性用于定義字體風格，如設置斜體、傾斜或正常字體，其可用屬性值如下：
| 屬性 | 作用 |
|---|---|
| normal | 默認值，瀏覽器會顯示標準的字體樣式 font-style: normal; |
| italic | 瀏覽器會顯示斜體的字體樣式。 |
「5. font:綜合設置字體樣式」
選擇器 { font: font-style font-weight font-size/line-height font-family;}
空格隔開font-size和font-family屬性，否則font屬性將不起作用。「6. font總結」
| 屬性 | 表示 | 注意點 |
|---|---|---|
| font-size | 字號 | 我們通常用的單位是px 像素，一定要跟上單位 |
| font-family | 字體 | 實際工作中按照團隊約定來寫字體 |
| font-weight | 字體粗細 | 記住加粗是 700 或者 bold 不加粗 是 normal 或者 400 記住數字不要跟單位 |
| font-style | 字體樣式 | 記住傾斜是 italic 不傾斜 是 normal 工作中我們最常用 normal |
| font | 字體連寫 | 1. 字體連寫是有順序的 不能隨意換位置 2. 其中字號 和 字體 必須同時出現 |
「1. color」
color屬性用于定義文本的顏色
其取值方式有以下3種：
| 表示表示 | 屬性值 |
|---|---|
| 預定義的顏色值 | red，green，blue，pink |
| 十六進制 | #FF0000，#FF6600，#29D794 |
| RGB代碼 | rgb(255,0,0)或rgb(100%,0%,0%) |
「2.text-align」
text-align屬性用于設置文本內容的水平對齊方式，相當于html中的align對齊屬性。
其可用屬性值如下：
| 屬性 | 解釋 |
|---|---|
| left | 左對齊（默認值） |
| right | 右對齊 |
| center | 居中對齊 |
「3. line-height」line-height屬性用于設置行間距，就是行與行之間的距離，即字符的垂直間距，一般稱為行高。
一般情況下，行距比字號大7--8像素左右就可以了。
line-height: 24px;
行高測量方法：
行高測量方法行高我們利用最多的一個地方是：可以讓單行文本在盒子中垂直居中對齊。文字的行高等于盒子的高度。行高 = 上距離 + 內容高度 + 下距離
上距離和下距離總是相等的，因此文字看上去是垂直居中的。
/*line-height 要設置在font屬性下面，否則無效，例如：*/
height: 80px;
text-align: center;
font: normal bold 30px "宋體";
line-height: 80px;
可以使用display:flex;布局方式讓文字水平垂直居中
display: flex;
align-items: center; /* 側軸對齊方式*/
justify-content: center; /* 主軸對齊方式 */
「4. text-indent」
text-indent屬性用于設置首行文本的縮進
p {
/*行間距*/
line-height: 25px;
/*首行縮進2個字 em 1個em 就是1個字的大小*/
text-indent: 2em;
}
「5. text-decoration」文本的裝飾
text-decoration,通常我們用于給鏈接修改裝飾效果
| 值 | 描述 |
|---|---|
| none | 默認。定義標準的文本。取消下劃線（最常用） |
| underline | 定義文本下的一條線。下劃線 也是我們鏈接自帶的（常用） |
| overline | 定義文本上的一條線。（不用） |
| line-through | 定義穿過文本下的一條線。（不常用） |
「6. CSS外觀屬性總結」
| 屬性 | 表示 | 注意點 |
|---|---|---|
| color | 顏色 | 我們通常用 十六進制 比如 而且是簡寫形式 #fff |
| line-height | 行高 | 控制行與行之間的距離 |
| text-align | 水平對齊 | 可以設定文字水平的對齊方式 |
| text-indent | 首行縮進 | 通常我們用于段落首行縮進2個字的距離 text-indent: 2em; |
| text-decoration | 文本修飾 | 記住 添加 下劃線 underline 取消下劃線 none |
標簽顯示模式是標簽以什么方式進行顯示。HTML標簽一般分為塊標簽和行內標簽兩種類型，它們也稱為塊元素和行內元素。
「1. 塊級元素(block-level)」
常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標簽是最典型的塊元素。
「2. 行內元素(inline-level)」
有的地方也稱為
內聯(lián)元素
常見的行內元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標簽最典型的行內元素。
「3. 行內塊元素(inline-block)」
在行內元素中有幾個特殊的標簽——<img>、<input >、<td>，可以對它們設置寬高和對齊屬性，有些資料可能會稱它們?yōu)樾袃葔K元素。
| 元素模式 | 元素排列 | 設置樣式 | 默認寬度 | 包含 |
|---|---|---|---|---|
| 塊級元素 | 一行只能放一個塊級元素 | 可以設置寬度高度 | 容器的100% | 容器級可以包含任何標簽 |
| 行內元素 | 一行可以放多個行內元素 | 不可以直接設置寬度高度 | 它本身內容的寬度 | 容納文本或則其他行內元素 |
| 行內塊元素 | 一行放多個行內塊元素 | 可以設置寬度和高度 | 它本身內容的寬度 |
「1. 背景顏色」
background-color: 顏色值; 默認的值是 transparent 透明的
「2. 背景圖片(image)」
語法：
background-image : none | url (url) ;
例如:
background-image: url(images/1.png);
「3. 背景平鋪（repeat）」
background-repeat : repeat | no-repeat | repeat-x | repeat-y
| 參數 | 作用 |
|---|---|
| repeat | 背景圖像在縱向和橫向上平鋪（默認的） |
| no-repeat | 背景圖像不平鋪 |
| repeat-x | 背景圖像在橫向上平鋪 |
| repeat-y | 背景圖像在縱向平鋪 |
「4. 背景位置(position)」
background-position : length || length
background-position : position || position
| 參數 | 值 |
|---|---|
| length | 百分數 | 由浮點數字和單位標識符組成的長度值 |
| position | top | center | bottom | left | center | right 方位名詞 |
/* 有背景圖片背景顏色可以不用寫*/
background: transparent url(image.jpg) repeat-y scroll center top ;
「5. 背景半透明(CSS3)」
background: rgba(0, 0, 0, 0.3);
background: rgba(0, 0, 0, .3);
opacity: .2;
「6. 背景總結」
| 屬性 | 作用 | 值 |
|---|---|---|
| background-color | 背景顏色 | 預定義的顏色值/十六進制/RGB代碼 |
| background-image | 背景圖片 | url(圖片路徑) |
| background-repeat | 是否平鋪 | repeat/no-repeat/repeat-x/repeat-y |
| background-position | 背景位置 | length/position 分別是x 和 y坐標， 切記 如果有 精確數值單位，則必須按照先X 后Y 的寫法 |
| background-attachment | 背景固定還是滾動 | scroll/fixed |
| 背景簡寫 | 更簡單 | 背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置; 他們沒有順序 |
| 背景透明 | 讓盒子半透明 | background: rgba(0,0,0,0.3); 后面必須是 4個值 |
「1. CSS 層疊性」
-概念：
-原則：
「2. CSS 繼承性」
概念：-注意：
「3. CSS 優(yōu)先級(CSS特殊性)」
概念：定義CSS樣式時，經常出現兩個或更多規(guī)則應用在同一元素上，此時，-權重計算公式：
| 標簽選擇器 | 計算權重公式 |
|---|---|
| 繼承或者 * | 0,0,0,0 |
| 每個元素（標簽選擇器） | 0,0,0,1 |
| 每個類，偽類 | 0,0,1,0 |
| 每個ID | 0,1,0,0 |
| 每個行內樣式 style="" | 1,0,0,0 |
| 每個!important 最重要的 | ∞ 無窮大 |
-權重疊加：
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
-繼承的權重是0：
css學習三大重點： css 盒子模型 、 浮動 、 定位
網頁布局的本質
W3c標準盒子模型
標準 w3c 盒子模型的范圍包括 margin、border、padding、content
當設置為box-sizing: content-box;時，將采用標準模式解析計算，也是默認模式；
內盒尺寸計算(元素實際大小)
IE 盒子模型的 content 部分包含了 border 和 pading
當設置為box-sizing: border-box時，將采用怪異模式解析計算；
| 屬性 | 作用 |
|---|---|
| border-width | 定義邊框粗細，單位是px |
| border-style | 邊框的樣式 |
| border-color | 邊框顏色 |
邊框的樣式：
邊框綜合設置
border : border-width || border-style || border-color
border: 1px solid red; 沒有順序要求
盒子邊框寫法總結表：
很多情況下，我們不需要指定4個邊框，我們是可以單獨給4個邊框分別指定的。
| 上邊框 | 下邊框 | 左邊框 | 右邊框 |
|---|---|---|---|
| border-top-style:樣式; | border-bottom-style:樣式; | border-left-style:樣式; | border-right-style:樣式; |
| border-top-width:寬度; | border- bottom-width:寬度; | border-left-width:寬度; | border-right-width:寬度; |
| border-top-color:顏色; | border- bottom-color:顏色; | border-left-color:顏色; | border-right-color:顏色; |
| border-top:寬度 樣式 顏色; | border-bottom:寬度 樣式 顏色; | border-left:寬度 樣式 顏色; | border-right:寬度 樣式 顏色; |
表格的細線邊框：
cellspacing="0",將單元格與單元格之間的距離設置為0，collapse 單詞是合并的意思,border-collapse: collapse;表示相鄰邊框合并在一起。<style>
table {
width: 500px;
height: 300px;
border: 1px solid red;
}
td {
border: 1px solid red;
text-align: center;
}
table, td {
border-collapse: collapse; /*合并相鄰邊框*/
}
</style>
padding屬性用于設置內邊距。是指邊框與內容之間的距離。
設置
| 屬性 | 作用 |
|---|---|
| padding-left | 左內邊距 |
| padding-right | 右內邊距 |
| padding-top | 上內邊距 |
| padding-bottom | 下內邊距 |
padding簡寫
| 值的個數 | 表達意思 |
|---|---|
| 1個值 | padding：上下左右內邊距; |
| 2個值 | padding: 上下內邊距 左右內邊距 ； |
| 3個值 | padding：上內邊距 左右內邊距 下內邊距； |
| 4個值 | padding: 上內邊距 右內邊距 下內邊距 左內邊距 ； |
當我們給盒子指定padding值之后， 發(fā)生了2件事情：
解決措施：通過給設置了寬高的盒子，減去相應的內邊距的值，維持盒子原有的大小。
padding不影響盒子大小情況：??如果沒有給一個盒子指定寬度， 此時，如果給這個盒子指定padding， 則不會撐開盒子。
margin屬性用于設置外邊距。margin就是控制盒子和盒子之間的距離
設置
| 屬性 | 作用 |
|---|---|
| margin-left | 左外邊距 |
| margin-right | 右外邊距 |
| margin-top | 上外邊距 |
| margin-bottom | 下外邊距 |
margin值的簡寫 （復合寫法）代表意思 跟 padding 完全相同。
塊級盒子水平居中
實際工作中常用這種方式進行網頁布局，示例代碼如下：
.header { width: 960px; margin: 0 auto;}
常見的寫法，以下下三種都可以????。
文字居中和盒子居中區(qū)別????
插入圖片和背景圖片區(qū)別????
插入圖片我們用的最多 比如產品展示類 移動位置只能靠盒模型 padding margin背景圖片我們一般用于小圖標背景或者超大背景圖片、背景圖片，移動位置只能通過 background-position清除元素的默認內外邊距????
* {
padding:0; /* 清除內邊距 */
margin:0; /* 清除外邊距 */
}
使用margin定義塊元素的「垂直外邊距」時，可能會出現外邊距的合并。
還有其他方法，比如浮動、固定、絕對定位的盒子不會有問題，后面咱們再總結。。。
優(yōu)先使用 寬度 （width） 其次 使用內邊距（padding） 再次 外邊距（margin）
width > padding > margin
原因：
圓角邊框：
border-radius:length;
border-top-left-radius 定義了左上角的弧度
border-top-right-radius 定義了右上角的弧度
border-bottom-right-radius 定義了右下角的弧度
border-bottom-left-radius 定義了左下角的弧度
border-radius: 50%;
border-radius: 左上角 右上角 右下角 左下角;
盒子陰影(box-shadow)：
box-shadow: offset-x offset-y [blur [spread]] [color] [inset]
| 值 | 描述 |
|---|---|
| offset-x | 陰影的水平偏移量。正數向右偏移，負數向左偏移。 |
| offset-y | 陰影的垂直偏移量。正數向下偏移，負數向上偏移。 |
| blur | 可選。陰影模糊距離，不能取負數。 |
| spread | 可選。陰影大小 |
| color | 可選。陰影的顏色 |
| inset | 可選。表示添加內陰影，默認為外陰影 |
div {
width: 200px;
height: 200px;
border: 10px solid red;
/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */
/* box-shadow:水平位置 垂直位置 模糊距離 陰影尺寸（影子大?。?nbsp;陰影顏色 內/外陰影； */
box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
}
「1. CSS布局的三種機制」
網頁布局的核心——就是用CSS來擺放盒子。
CSS 提供了3種機制來設置盒子的擺放位置，分別是普通流（標準流）、浮動和定位，其中：
A. 普通流（標準流）
B. 浮動
C. 定位
「2. 什么是浮動」元素的浮動是指設置了浮動屬性的元素會
選擇器 { float: 屬性值; }
| 屬性值 | 描述 |
|---|---|
| none | 元素不浮動（默認值） |
| left | 元素向左浮動 |
| right | 元素向右浮動 |
浮動只會影響當前的或者是后面的標準流盒子，不會影響前面的標準流。
建議:如果一個盒子里面有多個子盒子，如果其中一個盒子浮動了，其他兄弟也應該浮動。防止引起問題
浮動(float)小結
| 特點 | 說明 |
|---|---|
| 浮 | 加了浮動的盒子「是浮起來」的，漂浮在其他標準流盒子的上面。 |
| 漏 | 加了浮動的盒子「是不占位置的」，它原來的位置「漏給了標準流的盒子」。 |
| 特 | 「特別注意」：浮動元素會改變display屬性， 類似轉換為了行內塊，但是元素之間沒有空白縫隙 |
因為父級盒子很多情況下，不方便給高度，但是子盒子浮動就不占有位置，最后父級盒子高度為0，就影響了下面的標準流盒子。
清除浮動本質清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。清除浮動之后， 父級就會根據浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標準流了
選擇器 { clear: 屬性值; } clear 清除
| 屬性值 | 描述 |
|---|---|
| left | 不允許左側有浮動元素（清除左側浮動的影響） |
| right | 不允許右側有浮動元素（清除右側浮動的影響） |
| both | 同時清除左右兩側浮動的影響 |
實際工作中,幾乎只用clear: both
1).額外標簽法(隔墻法)
是W3C推薦的做法是通過在浮動元素末尾添加一個空的標簽例如 <div style=”clear:both”></div>，或則其他標簽br等亦可。
2).父級添加overflow屬性方法
可以給父級添加： overflow為 hidden| auto| scroll 都可以實現。
3).使用after偽元素清除浮動:after 方式為空元素額外標簽法的升級版，好處是不用單獨加標簽了
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* IE6、7 專有 */
.clearfix {
*zoom: 1;
}
4).使用雙偽元素清除浮動
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
什么時候用清除浮動呢？
| 清除浮動的方式 | 優(yōu)點 | 缺點 |
|---|---|---|
| 額外標簽法（隔墻法） | 通俗易懂，書寫方便 | 添加許多無意義的標簽，結構化較差。 |
| 父級overflow:hidden; | 書寫簡單 | 溢出隱藏 |
| 父級after偽元素 | 結構語義化正確 | 由于IE6-7不支持:after，兼容性問題 |
| 父級雙偽元素 | 結構語義化正確 | 由于IE6-7不支持:after，兼容性問題 |
建議遵循以下順序：
布局定位屬性：display / position / float / clear / visibility / overflow（建議 display 第一個寫，畢竟關系到模式）
自身屬性：width / height / margin / padding / border / background
文本屬性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他屬性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
.jdc {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
background: rgba(0,0,0,.5);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
「1. 定位詳解」
將盒子「定」在某一個「位」置 自由的漂浮在其他盒子(包括標準流和浮動)的上面。
所以，我們腦海應該有三種布局機制的上下順序????
標準流在最底層 (海底) ------- 浮動 的盒子 在 中間層 (海面) ------- 定位的盒子 在 最上層 （天空）
定位是用來布局的，它有兩部分組成：定位 = 定位模式 + 邊偏移在 CSS 中，通過 top、bottom、left 和 right 屬性定義元素的「邊偏移」：（方位名詞）
| 邊偏移屬性 | 示例 | 描述 |
|---|---|---|
top | top: 80px | 「頂端」偏移量，定義元素相對于其父元素「上邊線的距離」。 |
bottom | bottom: 80px | 「底部」偏移量，定義元素相對于其父元素「下邊線的距離」。 |
left | left: 80px | 「左側」偏移量，定義元素相對于其父元素「左邊線的距離」。 |
right | right: 80px | 「右側」偏移量，定義元素相對于其父元素「右邊線的距離」 |
「2. 定位模式(position)」在 CSS 中，通過 position 屬性定義元素的「定位模式」，語法如下：
選擇器 { position: 屬性值; }
| 值 | 語義 |
|---|---|
static | 「靜態(tài)」定位 |
relative | 「相對」定位 |
absolute | 「絕對」定位 |
fixed | 「固定」定位 |
「3. 靜態(tài)定位(static)」
「4. 相對定位(relative)」
「5. 絕對定位(absolute)」
絕對定位是元素以帶有定位的父級元素來移動位置
「6. 固定定位(fixed)」
固定定位是絕對定位的一種特殊形式;
絕對定位/固定定位的盒子不能通過設置margin: auto設置水平居中 在使用絕對定位時要向實現水平居中，可以按照下面的方法：
在使用「定位」布局時，可能會「出現盒子重疊的情況」。
加了定位的盒子，默認「后來者居上」， 后面的盒子會壓住前面的盒子。
應用 z-index 層疊等級屬性可以「調整盒子的堆疊順序」。如下圖所示：
前面提過， display 是 顯示模式， 可以通過以下方式改變顯示模式:
所以說， 一個行內的盒子，如果加了「浮動」、「固定定位」和「絕對定位」，不用轉換，就可以給這個盒子直接設置寬度和高度等。
| 定位模式 | 是否脫標占有位置 | 移動位置基準 | 模式轉換（行內塊） | 使用情況 |
|---|---|---|---|---|
| 靜態(tài)static | 不脫標，正常模式 | 正常模式 | 不能 | 幾乎不用 |
| 相對定位relative | 不脫標，占有位置 | 相對自身位置移動 | 不能 | 基本單獨使用 |
| 絕對定位absolute | 完全脫標，不占有位置 | 相對于定位父級移動位置 | 能 | 要和定位父級元素搭配使用 |
| 固定定位fixed | 完全脫標，不占有位置 | 相對于瀏覽器移動位置 | 能 | 單獨使用，不需要父級 |
注意：
邊偏移 需要和 定位模式 聯(lián)合使用，單獨使用無效；top 和 bottom 不要同時使用；left 和 right 不要同時使用。目的:讓一個元素在頁面中消失或者顯示出來
場景:類似網站廣告，當我們點擊關閉就不見了，但是我們重新刷新頁面，會重新出現！
display設置或檢索對象是否顯示或如何顯示。
設置或檢索是否顯示對象
visibility：visible ; 對象可視
visibility：hidden; 對象隱藏
檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容。
| 屬性值 | 描述 |
|---|---|
| visible | 不剪切內容也不添加滾動條 |
| hidden | 不顯示超過對象尺寸的內容，超出的部分隱藏掉 |
| scroll | 不管超出內容否，總是顯示滾動條 |
| auto | 超出自動顯示滾動條，不超出不顯示滾動條 |
實際開發(fā)場景：| 屬性 | 區(qū)別 | 用途 |
|---|---|---|
| display | 隱藏對象，不保留位置 | 配合后面js做特效，比如下拉菜單，原先沒有，鼠標經過，顯示下拉菜單， 應用極為廣泛 |
| visibility | 隱藏對象，保留位置 | 使用較少 |
| overflow | 只是隱藏超出大小的部分 | 1. 可以清除浮動 2. 保證盒子里面的內容不會超出該盒子范圍 |
所謂的界面樣式， 就是更改一些用戶操作樣式，以便提高更好的用戶體驗。
設置或檢索在對象上移動的鼠標指針采用何種系統(tǒng)預定義的光標形狀。
| 屬性值 | 描述 |
|---|---|
| default | 小白 默認 |
| pointer | 小手 |
| move | 移動 |
| text | 文本 |
| not-allowed | 禁止 |
<ul>
<li style="cursor:default">我是小白</li>
<li style="cursor:pointer">我是小手</li>
<li style="cursor:move">我是移動</li>
<li style="cursor:text">我是文本</li>
<li style="cursor:not-allowed">我是文本</li>
</ul>
outline : outline-color ||outline-style || outline-width
但是我們都不關心可以設置多少，我們平時都是去掉的。
最直接的寫法是 ： outline: 0; 或者 outline: none;
<textarea style="resize: none;"></textarea>
| 屬性 | 用途 | 用途 |
|---|---|---|
| 鼠標樣式 | 更改鼠標樣式cursor | 樣式很多，重點記住 pointer |
| 輪廓線 | 表單默認outline | outline 輪廓線，我們一般直接去掉，border是邊框，我們會經常用 |
| 防止拖拽 | 主要針對文本域resize | 防止用戶隨意拖拽文本域，造成頁面布局混亂，我們resize:none |
vertical-align 垂直對齊，它只針對于「行內元素」或者「行內塊元素」
設置或檢索對象內容的垂直對其方式。
vertical-align : baseline |top |middle |bottom
注意：
vertical-align 不影響塊級元素中的內容對齊，它只針對于「行內元素」或者「行內塊元素」，
特別是行內塊元素， 通常用來控制圖片/表單與文字的對齊。
我們可以通過vertical-align 控制圖片和文字的垂直關系了。默認的圖片會和文字基線對齊。
就是圖片底側會有一個空白縫隙。
解決方法：
white-space:normal ；默認處理方式
white-space:nowrap ； 強制在同一行內顯示所有文本，直到文本結束或者遭遇br標簽對象才換行。
text-overflow : clip ；不顯示省略標記（...），而是簡單的裁切
text-overflow：ellipsis ； 當對象內文本溢出時顯示省略標記（...）
「注意」：
一定要首先強制一行內顯示，再次和overflow屬性 搭配使用
/*1. 先強制一行內顯示文本*/
white-space: nowrap;
/*2. 超出的部分隱藏*/
overflow: hidden;
/*3. 文字用省略號替代超出的部分*/
text-overflow: ellipsis;
CSS精靈技術（也稱CSS Sprites、CSS雪碧）。
為什么需要精靈技術：為了有效地減少服務器接受和發(fā)送請求的次數，提高頁面的加載速度。
CSS 精靈其實是將網頁中的一些背景圖像整合到一張大圖中（精靈圖），然而，各個網頁元素通常只需要精靈圖中不同位置的某個小圖，要想精確定位到精靈圖中的某個小圖。
我們需要使用CSS的:
background-position 屬性精確地定位。首先我們知道，css精靈技術主要針對于背景圖片，插入的圖片img 是不需要這個技術的。
制作網頁時，為了美觀，常常需要為網頁元素設置特殊形狀的背景，比如微信導航欄，有凸起和凹下去的感覺，最大的問題是里面的字數不一樣多，咋辦？
核心技術就是利用CSS精靈（主要是背景位置）和 盒子padding撐開寬度, 以便能適應不同字數的導航欄。
一般的經典布局都是這樣的：
<li>
<a href="#">
<span>導航欄內容</span>
</a>
</li>
* {
padding:0;
margin:0;
}
body{
background: url(images/wx.jpg) repeat-x;
}
.father {
padding-top:20px;
}
li {
padding-left: 16px;
height: 33px;
float: left;
line-height: 33px;
margin:0 10px;
background: url(./images/to.png) no-repeat left ;
}
a {
padding-right: 16px;
height: 33px;
display: inline-block;
color:#fff;
background: url(./images/to.png) no-repeat right ;
text-decoration: none;
}
li:hover,
li:hover a {
background-image:url(./images/ao.png);
}
總結：
div {
width: 0;
height: 0;
line-height:0；
font-size: 0;
border-top: 10px solid red;
border-right: 10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid #000;
}
聯(lián)系客服
