寬和高

　　width屬性可以為元素設置寬度。

　　height屬性可以為元素設置高度。

　　塊級標簽才能設置寬度，內聯標簽的寬度由內容來決定。

字體屬性

文字字體

　　按照從第一個開始識別,直到能夠識別到為止,識別到後後面的不再繼續

body {
font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
}

字體大小

p {
 font-size: 14px;
}

字重(粗細)

　　font-weight用來設置字體的字重（粗細）。

normal 　　　　標準粗細 (默認)
bold    　　　 粗體
bolder    　　 更粗
lighter　　    更細
 
inherit 　　　　繼承父元素字體的粗細值

　　100~900 設置具體粗細，400等同於normal，而700等同於bold

p {
font-weight: bold;
}　　

p {
font-weight: 500;
}　

文本顏色

格式:

　　　　十六進制值 - 如: ＃FF0000

　　　　一個RGB值 - 如: RGB(255,0,0)

　　　　顏色的名稱 - 如: red

　　　　rgba(255,0,0,0.3)，第四個值指定了色彩的透明度/不透明度，範圍為0.0~1.0

p {
 color:RGB(255,0,0);
}

段落屬性

文字對其

　　text-align屬性規定元素中的文本的水平對齊方式。

　　　　left 　　 左邊對齊 默認值
　　　　right 　　 右對齊
　　　　center 　 居中對齊
　　　　justify 　　兩端對齊

文字裝飾

　　text-decoration 給文字添加特殊效果。

　　　　none 　　　　 定義標準的文本。(默認)
　　　　underline 　　 定義文本下的一條線。
　　　　overline 　　 定義文本上的一條線。
　　　　line-through 　　定義穿過文本下的一條線。
　　　　inherit 　　　 　繼承父元素的text-decoration屬性的值。

常用的為去掉a標簽默認的自劃線

a {
text-decoration: none;
}

首行縮進

將段落的第一行縮進 32像素

p {
text-indent: 32px;
}

背景屬性

background-color:背景顏色
background-image:url(‘11.jpg‘); 背景圖片鏈接
background-repeat:repeat-x; x軸平鋪
background-repeat:no-repeat; 不重復
background-position:400px 200px 調整背景的位置（距左。距右）
background-position: center:center; 背景居中

簡寫：
background: url(‘11.jpg‘) no-repeat center;

邊框

屬性

border-width　　寬度

border-style　　 風格

　　none 　　　   無邊框。
　　dotted    　　    點狀虛線邊框。
　　dashed    　　  矩形虛線邊框。
　　solid    　　      實線邊框。

border-color　　 顏色

border-radius　 用這個屬性能實現圓角邊框的效果。
　　　　　　　　　將border-radius設置為長或高的一半即可得到一個圓形，可用於圓形頭像展示

示例

#i1 {
border-width: 2px;
border-style: solid;
border-color: red;
}

支持簡寫方式：

#i1 {
 border: 2px solid red;
}

display 屬性

　　用於控制HTML元素的顯示效果。

屬性

display:"none"    　　　　HTML文檔中元素存在，但是在瀏覽器中不顯示。一般用於配合JavaScript代碼使用。

display:"block"    　　　　默認占滿整個頁面寬度，如果設置了指定寬度，則會用margin填充剩下的部分。

display:"inline"    　　　　按行內元素顯示，此時再設置元素的width、height、margin-top、margin-bottom和float屬性都不會有什麽影響。

display:"inline-block"    　使元素同時具有行內元素和塊級元素的特點。

display:"none"與visibility:hidden的區別：

　　visibility:hidden: 隱藏某個元素，隱藏的元素仍需占用與未隱藏之前一樣的空間。會影響布局。

　　display:none: 隱藏某個元素，隱藏的元素不會占用任何空間。不影響布局

　　

CSS盒子

概念

　　margin: 用於控制元素與元素之間的距離；

　　　　margin的最基本用途就是控制元素周圍空間的間隔，

　　　　從視覺角度上達到相互隔開的目的。

　　padding: 用於控制內容與邊框之間的距離；

　　Border(邊框): 圍繞在內邊距和內容外的邊框。

　　Content(內容): 盒子的內容，顯示文本和圖像。

margin外邊距

.margin-test {
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
}

推薦使用簡寫：

　　順序：上右下左

.margin-test {
margin: 5px 10px 15px 20px;
}

　　常見的居中方式:

.mycenter {
 margin: 0 auto;
 }

padding內填充

.padding-test {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}

推薦使用簡寫：

　　順序：上右下左

.padding-test {
padding: 5px 10px 15px 20px;
}

補充padding的常用簡寫方式：

　　提供一個，用於四邊；

　　提供兩個，第一個用於上－下，第二個用於左－右；

　　如果提供三個，第一個用於上，第二個用於左－右，第三個用於下；

　　提供四個參數值，將按上－右－下－左的順序作用於四邊；

　　

float

概念

　　在 CSS 中，任何元素都可以浮動。

　　浮動元素會生成一個塊級框，而不論它本身是何種元素。

關於浮動的兩個特點：

　　浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

　　由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。

取值

　　left：　　向左浮動
　　right： 　向右浮動
　　none： 默認值，不浮動

clear

概念

　　清除浮動的副作用（父標簽塌陷問題）

父標簽塌陷問題:

　　浮動後的元素會脫離文檔流,被浮動的元素會跑出父標簽,從而破壞頁面布局

實例

div設置邊框為1,裏面包兩個p1和p2.p1浮動後.div會變成一條線

而p1和p2 會被放置在 div 下面而不是div內部 ,即浮動後的元素跑出了父標簽

解決方法

固定高度

　　固定高度限制死了.如果後期有更多的浮動元素快超出了限定高度就無效了

偽元素清除法

　　只要子孫元素有浮動就給父標簽設置這一屬性即可,原理是浮動元素的下面添加空內容動態撐起父標簽

overflow:hidden

　　將溢出的部分消除,會破壞子標簽的顯示,不推薦

推薦偽元素清除法（使用較多）：

.clearfix:after {   # 在元素的最下面插入一個內容
content: "";   　　 # 內容為空
display: block;    # 展示為整個寬度(變成塊級)
clear: both;       # 不允許浮動
}

清除浮動示例 : 　　

View Code

　　

overflow溢出屬性

屬性值

visible 　　 默認值。內容不會被修剪，會呈現在元素框之外。

hidden 　   內容會被修剪，並且其余內容是不可見的。

scroll 　　  內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。

auto 　　   如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。

inherit 　　規定應該從父元素繼承 overflow 屬性的值。

滾動條出現位置：

overflow（水平和垂直均設置）

overflow-x（設置水平方向）

overflow-y（設置垂直方向）

圓形頭像示例:

View Code　

定位（position）

屬性值

static 　　默認值 不定位

relative    相對定位 相對於該元素的原始位置

absolite    絕對定位 相對於父標簽的定位,一層一層往上直到 body
 
fixed    固定,以窗口為參考點固定

返回頂部按鈕示例

View Code

　　

z-index

概念

　　設置對象的層疊順序。

　　z-index 值表示誰壓著誰，數值大的壓蓋住數值小的，

　　z軸代表了你與電腦的距離,離你越近的頁面z-index越大

　　被定位後的元素，才可使用z-index,不管相對定位，絕對定位，固定定位，都可以使用z-index，而浮動元素不能使用z-index

ps:

position:relative 可以讓元素定位而不變換位置.雖然沒換位置,但是這個元素已經是被定位過的元素了.

　　z-index值 沒有單位，就是一個正整數，

　　默認的z-index值為0如果大家都沒有z-index值，或者z-index值一樣，那麽誰寫在HTML後面，誰在上面壓著別人，

　　定位了元素，永遠壓住沒有定位的元素。

#i2 {
z-index: 999;
}

自定義模態框示例 :

View Code

opacity

定義透明效果 0~1

6.3 CSS 屬性