CSS
子選擇器 (>)
.first>span{border:1px solid red;}通用選擇器 *
* {color:red;}偽類選擇符
它允許給html不存在的標(biāo)簽（標(biāo)簽的某種狀態(tài)）設(shè)置樣式此改，比如說(shuō)我們給html中一個(gè)標(biāo)簽元素的鼠標(biāo)滑過(guò)的狀態(tài)來(lái)設(shè)置字體顏色：a:hover{color:red}CSS的某些樣式是具有繼承性的，
p{color:red;} <p>三年級(jí)時(shí)，我還是一個(gè)<span>膽小如鼠</span>的小女孩斯入。</p>
可見右側(cè)結(jié)果窗口中p中的文本與span中的文本都設(shè)置為了紅色豁翎。但注意有一些css樣式是不具有繼承性的主经。如border:1px solid red;特殊性
標(biāo)簽的權(quán)值為1陪白，類選擇符的權(quán)值為10窍株，ID選擇符的權(quán)值最高為100煮落。例如下面的代碼：
p span{color:green;} /*權(quán)值為1+1=2*/
.warning{color:white;} /*權(quán)值為10*/
p span.warning{color:purple;} /*權(quán)值為1+1+10=12*/
#footer .note p{color:yellow;} /*權(quán)值100+10+1=111*/
注意：還有一個(gè)權(quán)值比較特殊--繼承也有權(quán)值但很低敞峭，有的文獻(xiàn)提出它只有0.1，所以可以理解為繼承的權(quán)值最低蝉仇。
層疊就是在html文件中對(duì)于同一個(gè)元素可以有多個(gè)css樣式存在旋讹，當(dāng)有相同權(quán)重的樣式存在時(shí)殖蚕，會(huì)根據(jù)這些css樣式的前后順序來(lái)決定，處于最后面的css樣式會(huì)被應(yīng)用沉迹。
最高權(quán)值 !important
p a{font-style:italic;}文字斜體p a{text-decoration:underline;}下劃線.oldPrice{text-decoration:line-through;}刪除線p{text-indent:2em;}段落排版縮進(jìn)p{line-height:2em;}段落排版--行間距（行高）h1{ letter-spacing:50px; }文字間隔或者字母間隔
h1{ word-spacing:50px; }單詞之間間隔塊級(jí)元素 文本圖片樣式
text-align:center/left/right;常用的塊狀元素有：
<div>睦疫、<p>、<h1>...<h6>鞭呕、<ol>蛤育、<ul>、<dl>琅拌、<table>缨伊、<address>、<blockquote> 进宝、<form>
常用的內(nèi)聯(lián)元素有：
<a>刻坊、<span>、<br>党晋、<i>谭胚、<em>、<strong>未玻、<label>灾而、<q>、<var>扳剿、<cite>旁趟、<code>
常用的內(nèi)聯(lián)塊狀元素有：
<img>、<input>
display:block就是將元素顯示為塊級(jí)元素
塊級(jí)元素特點(diǎn)：
1.每個(gè)塊級(jí)元素都從新的一行開始庇绽，并且其后的元素也另起一行锡搜。（真霸道，一個(gè)塊級(jí)元素獨(dú)占一行）
2.元素的高度瞧掺、寬度耕餐、行高以及頂和底邊距都可設(shè)置。
3.元素寬度在不設(shè)置的情況下辟狈，是它本身父容器的100%（和父元素的寬度一致）肠缔，除非設(shè)定一個(gè)寬度。display:inline將元素設(shè)置為內(nèi)聯(lián)元素
內(nèi)聯(lián)元素特點(diǎn)：
1哼转、和其他元素都在一行上明未；
2、元素的高度壹蔓、寬度及頂部和底部邊距不可設(shè)置亚隅；
3、元素的寬度就是它包含的文字或圖片的寬度庶溶，不可改變煮纵。
小伙伴們你們觀查一下右側(cè)代碼段，有沒有發(fā)現(xiàn)一個(gè)問(wèn)題偏螺，內(nèi)聯(lián)元素之間有一個(gè)間距問(wèn)題行疏，這個(gè)問(wèn)題在本小節(jié)的 wiki 中有介紹，感興趣的小伙伴可以去查看套像。display:inline-block就是將元素設(shè)置為內(nèi)聯(lián)塊狀元素酿联。
inline-block 元素特點(diǎn)：
1、和其他元素都在一行上夺巩；
2贞让、元素的高度、寬度柳譬、行高以及頂和底邊距都可設(shè)置喳张。
盒模型
- 邊框：
border:1px solid red;
分開寫
div{
border-width:2px;
border-style:solid;
border-color:red;
}
border-style（邊框樣式）常見樣式有：
dashed（虛線）| dotted（點(diǎn)線）| solid（實(shí)線）。
- css內(nèi)定義的寬（width）和高（height）美澳，指的是填充以里的內(nèi)容范圍销部。
元素實(shí)際寬度（盒子的寬度）=左邊界(margin-left)+左邊框(border-left)+左填充(padding-left)+內(nèi)容寬度(width)+右填充(padding-right)+右邊框(border-right)+右邊界(margin-right)。
-
div{padding:20px 10px 15px 30px;}上右下左
布局模型
- 在網(wǎng)頁(yè)中制跟，元素有三種布局模型：
- 1舅桩、流動(dòng)模型（Flow）
- 塊狀元素都會(huì)在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因?yàn)樵谀J(rèn)狀態(tài)下雨膨，塊狀元素的寬度都為100%擂涛。實(shí)際上，塊狀元素都會(huì)以行的形式占據(jù)位置聊记。
- 在流動(dòng)模型下撒妈，內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示。（內(nèi)聯(lián)元素可不像塊狀元素這么霸道獨(dú)占一行）
- 2甥雕、浮動(dòng)模型 (Float)
任何元素在默認(rèn)情況下是不能浮動(dòng)的踩身，但可以用 CSS 定義為浮動(dòng)，如 div社露、p挟阻、table、img 等元素都可以被定義為浮動(dòng)峭弟。 - 3附鸽、層模型（Layer）
1、絕對(duì)定位(position: absolute)
如果想為元素設(shè)置層模型中的絕對(duì)定位瞒瘸，需要設(shè)置position:absolute(表示絕對(duì)定位)坷备，這條語(yǔ)句的作用將元素從文檔流中拖出來(lái)，然后使用left情臭、right省撑、top赌蔑、bottom屬性相對(duì)于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對(duì)定位。如果不存在這樣的包含塊竟秫，則相對(duì)于body元素娃惯，即相對(duì)于瀏覽器窗口。
2肥败、相對(duì)定位(position: relative)
如果想為元素設(shè)置層模型中的相對(duì)定位趾浅，需要設(shè)置position:relative（表示相對(duì)定位），它通過(guò)left馒稍、right皿哨、top、bottom屬性確定元素在正常文檔流中的偏移位置纽谒。相對(duì)定位完成的過(guò)程是首先按static(float)方式生成一個(gè)元素(并且元素像層一樣浮動(dòng)了起來(lái))证膨，然后相對(duì)于以前的位置移動(dòng)，移動(dòng)的方向和幅度由left佛舱、right椎例、top、bottom屬性確定请祖，偏移前的位置保留不動(dòng)订歪。
3、固定定位(position: fixed)
fixed：表示固定定位肆捕，與absolute定位類型類似刷晋，但它的相對(duì)移動(dòng)的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁(yè)窗口）本身。由于視圖本身是固定的慎陵，它不會(huì)隨瀏覽器窗口的滾動(dòng)條滾動(dòng)而變化眼虱，除非你在屏幕中移動(dòng)瀏覽器窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小席纽，因此固定定位的元素會(huì)始終位于瀏覽器窗口內(nèi)視圖的某個(gè)位置捏悬，不會(huì)受文檔流動(dòng)影響，這與background-attachment:fixed?屬性功能相同润梯。
使用position:absolute可以實(shí)現(xiàn)被設(shè)置元素相對(duì)于瀏覽器（body）設(shè)置定位以后过牙，大家有沒有想過(guò)可不可以相對(duì)于其它元素進(jìn)行定位呢？答案是肯定的纺铭，當(dāng)然可以寇钉。使用position:relative來(lái)幫忙，但是必須遵守下面規(guī)范：
1舶赔、參照定位的元素必須是相對(duì)定位元素的前輩元素：
<div id="box1"><!--參照定位的元素-->
<div id="box2">相對(duì)參照元素進(jìn)行定位</div><!--相對(duì)定位元素-->
</div>
從上面代碼可以看出box1是box2的父元素（父元素當(dāng)然也是前輩元素了）扫倡。
2、參照定位的元素必須加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}
3竟纳、定位元素加入position:absolute撵溃，便可以使用top疚鲤、bottom、left征懈、right來(lái)進(jìn)行偏移定位了石咬。
#box2{
position:absolute;
top:20px;
left:30px;
}
這樣box2就可以相對(duì)于父元素box1定位了（這里注意參照物就可以不是瀏覽器了，而可以自由設(shè)置了）卖哎。
- 代碼縮寫
p{color:#000000;}
可以縮寫為：
p{color: #000;}
例子2：
p{color: #336699;}
可以縮寫為：
p{color: #369;}
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋體",sans-serif;
}
這么多行的代碼其實(shí)可以縮寫為一句：body{
font:italic small-caps bold 12px/1.5em "宋體",sans-serif;
}
設(shè)置技巧
- 行內(nèi)元素水平居中
text-align:center; - 當(dāng)被設(shè)置元素為 塊狀元素 時(shí)用 text-align：center 就不起作用了，這時(shí)也分兩種情況：
定寬塊狀元素
滿足定寬和塊狀兩個(gè)條件的元素是可以通過(guò)設(shè)置“左右margin”值為“auto”來(lái)實(shí)現(xiàn)居中的删性。不定寬塊狀元素亏娜。
- 加入 table 標(biāo)簽
table其長(zhǎng)度根據(jù)其內(nèi)文本長(zhǎng)度決定），因此可以看做一個(gè)定寬度塊元素
第一步：為需要設(shè)置的居中的元素外面加入一個(gè) table 標(biāo)簽 ( 包括 <tbody>蹬挺、<tr>维贺、<td> )。
第二步：為這個(gè) table 設(shè)置“左右 margin 居中”（這個(gè)和定寬塊狀元素的方法一樣）巴帮。
- 設(shè)置 display: inline 方法：與第一種類似溯泣，顯示類型設(shè)為 行內(nèi)元素，進(jìn)行不定寬元素的屬性設(shè)置
- 設(shè)置
position:relative和left:50%：利用 相對(duì)定位 的方式榕茧，將元素向左偏移 50% 垃沦，即達(dá)到居中的目的
垂直居中
- 父元素高度確定的單行文本，
設(shè)置父元素的 height 和 line-height 高度一致來(lái)實(shí)現(xiàn)的用押。(height: 該元素的高度肢簿，line-height: 顧名思義，行高（行間距）蜻拨，指在文本中池充，行與行之間的 基線間的距離 )。
<u>弊端：當(dāng)文字內(nèi)容的長(zhǎng)度大于塊的寬時(shí)缎讼，就有內(nèi)容脫離了塊收夸。</u> - 以及父元素高度確定的多行文本。
方法一：使用插入 table (包括tbody血崭、tr卧惜、td)標(biāo)簽，同時(shí)設(shè)置 vertical-align：middle功氨。
css 中有一個(gè)用于豎直居中的屬性 vertical-align序苏，在父元素設(shè)置此樣式時(shí)，會(huì)對(duì)inline-block類型的子元素都有用捷凄。
方法二：
display:table-cell;/*IE8以上及Chrome忱详、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
有一個(gè)有趣的現(xiàn)象就是當(dāng)為元素（不論之前是什么類型元素跺涤，display:none除外）設(shè)置以下 2 個(gè)句之一：
1.position : absolute
-
float : left 或 float:right
簡(jiǎn)單來(lái)說(shuō)匈睁，只要html代碼中出現(xiàn)以上兩句之一监透，元素的display顯示類型就會(huì)自動(dòng)變?yōu)橐?display:inline-block（塊狀元素）的方式顯示，當(dāng)然就可以設(shè)置元素的 width 和 height 了航唆，且默認(rèn)寬度不占滿父元素胀蛮。
a 標(biāo)簽是 行內(nèi)元素 ，所以設(shè)置它的 width 是 沒有效果的糯钙，但是設(shè)置為 position:absolute 以后粪狼，就可以了。
