CSS學習心得
CSS語法：只用冒號“:”不用“=”，每一行行末需要加分號“；”
選擇器
- 標籤選擇器 用
tagName來表示，比如p{} - 類選擇器 用
.className來表示，比如.login{} - ID選擇器 用
#idName來表示，比如#login{} - 子選擇器
selector>childSelector。比如#login>li。注意只會選擇第一代元素 - 包含選擇器
selector childSelector即中間是空格。這樣選擇所有的子輩（即包括孫子，孫孫子。。。）元素 - 通用選擇器
* - 僞選擇器 即類似於
a:hover{}的選擇器，是HTML中不存在的元素進行選擇。 - 分組選擇，當需要多個元素進行設置樣式的時候，可以採用”,”隔開，比如：selector1,selector2{}
樣式設置具有繼承性，即在一個標籤下的子元素也會具有這個標籤相同的一些樣式，但有一些是不會繼承的，比如border。
當一個元素有多個不同的CSS樣式時，如何顯示呢？瀏覽器對不同的選擇器有一個權重，權重關係是：繼承(0.1)<標籤(1)<類選擇器(10)
p span{
//權重爲1+1=2
}
p span.warning{
//權重爲1+1+10=12
}如果權重相同，則由最後添加的CSS樣式來決定。
如果需要只用當前樣式，用！important標記。例如：
p{
color:red!important;
}字體篇
- 字體：font-family。一般設置爲
font-family:"Microsoft Yahei" - 字號：font-size；顏色：color；粗體：font-weight:bold；斜體：font-style:italic
- 下劃線：
font-decoration:underline - 段首縮進：
text-indent:2em;2em是兩倍字體大小 - 行間距：
line-height:1.5em; - 字母間距：
letter-spacing:20px;單詞間距：word-spacing:20px;
邊框篇
邊框樣式：border-style:dashed|dotted|solid border-width(邊框寬度);border-color(邊框顏色);
注意：CSS中允許只在一個方向設置邊框，方法如下：
div{
border-bottom:1px solid red;
//border-top:1px solid red;
//border-right:1px solid red;
//border-left:1px solid red;
}注：div盒式模型
盒子內部的元素和盒子邊框的距離稱爲padding。
設置上下左右的padding，既可以分別設置，也可以一句話中寫完，順序是上右下左（順時針）
盒子和周圍元素的間距稱爲：margin
佈局
CSS包含3種基本的佈局模型，用英文概括爲：Flow、Layer 和 Float。
在網頁中，元素有三種佈局模型：
1、流動模型（Flow）
這是html默認的佈局模型。塊狀元素佔領的都是以行爲單位，且自上而下依次排列。
2、浮動模型 (Float)。內聯元素則是從左到右水平分佈。使用float:left/right即可設置
3、層模型（Layer）
層模型有三種形式：
1、絕對定位(position: absolute)position:absolute;然後使用left/right/top/bottom來設置和窗口的上下左右相對的位置。
2、相對定位(position: relative)設置的位置是正常流中的位置再加上偏移位置。通過position:relative來設置。
3、固定定位(position: fixed)通過position:fixed;來設置，不會由於進度條的滾動而變化。
注意可以相位其他元素進行absolute位置的設定。比如下面一段html:
<div id="box3">
<img src="1.jpg">
<div id="box4">可以相位其他元素進行absolute位置的設定。</div>
</div>box4是box3的子元素。當設定box4的absolute位置時，left等屬性是參照box3的，而不是瀏覽器。
顏色
顏色設置有三種方式。
- 英文名設置，比如red,green。
- RGB設置顏色，
color:rgb(133,233,255);color:rgb(20%,30%,30%); - 16進制顏色。
關於顏色的css樣式也是可以縮寫的，當你設置的顏色是16進制的色彩值時，如果每兩位的值相同，可以縮寫一半。
例子
p{color: #336699;}可以縮寫爲：
p{color: #369;}居中設置
想要居中圖片或者居中文字，需要在父級元素加入樣式text-align:center;
如果元素是塊狀元素，那麼這種辦法將失效。解決辦法是分爲定寬元素和不定寬元素。
定寬元素(即元素的width有明確設定)：設置樣式margin:auto;
不定寬元素
不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都很多）：
1.加入 table 標籤
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>
</div>table{
border:1px solid;
margin:0 auto;
}2.第二種方法：改變塊級元素的 display 爲 inline 類型（設置爲 行內元素 顯示），然後使用 text-align:center 來實現居中效果。如下例子：
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body><style>
.container{
text-align:center;
}
/* margin:0;padding:0（消除文本與div邊框之間的間隙）*/
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
/* margin-right:8px（設置li文本之間的間隔）*/
.container li{
margin-right:8px;
display:inline;
}
</style>以上代碼直接從慕課網粘貼，違規就刪。
3.設置 position:relative 和 left:50%：利用 相對定位 的方式，將元素向左偏移 50% ，即達到居中的目的
垂直居中，通過設置height和line-height一致就可以實現垂直居中。
