文本
p{ font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; /*字體*/ font-size: 20px; /*字號*/ color: red; /*字體顏色*/ font-style: italic; /*字體樣式*/ font-weight: bold /*字體粗細*/ }
p{ text-align: left; /*文本的對齊方式*/ text-decoration-line:underline; /*文本裝飾*/ /*也可以這樣來設置 text-decoration: underline; */ text-decoration-style:solid; /*默認就是單實線*/ text-decoration-color: red; /*線顏色*/ text-transform: capitalize; /*大小寫轉換，每個單詞的首字母都大寫*/ text-indent: 40px; /*首行縮進*/ letter-spacing: 2px; /*字符間距*/ word-spacing: 10px; /*單詞間距*/ line-height: 150%; /*行高（行間距）*/ white-space: nowrap /*空格、換行處理*/ }
背景
body{ background-color: red; /*背景顏色*/ background-image: url("bg.png"); /*背景圖片，url()中的路徑可引可不引。可以設置多個url()，用逗號隔開即可*/ background-repeat:no-repeat; /*背景填充*/ background-position: left; /*背景圖片的位置，這個屬性需要和background-repeat: no-repeat搭配使用*/ background-attachment:fixed; /*背景圖片是否隨內容的上下滾動而滾動*/ background-size:80px 60px; /*設置背景圖片的尺寸，可使用百分比*/ background-origin:content-box; /*設置背景圖片填充的范圍，只能為背景圖片，不能是背景顏色*/ background-clip: content-box; /*設置背景的填充范圍，可以是背景圖片或顏色*/ /*element=content+padding+border，content-box是填充content，padding-box是填充padding+content，border-box是填充border+padding+content*/ }
可使用總屬性background來設置：
background: url("bg.png") no-repeat fixed left;
邊框
/*同時設置4條邊線*/ border: 1px red solid; /*同時設置4條邊線的線寬|線型|線顏色*/ border-width: 1px; border-style: sold; border-color: red; /*設置一條邊線，默認是沒有邊線的，我們可以用此來實現分隔線*/ border-bottom: 1px red solid; /*分開設置某條邊線的線寬、線型、線顏色*/ border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: red;
列表樣式
ul>li{ list-style-type: disc; /*可通過此屬性來指定列表項標記*/ list-style-image: url("logo.jpg") /*以圖片作為列表項標記*/ /*這2個屬性是矛盾的，一般只設置其中一個。如果同時設置，后設置的屬性會覆蓋前面設置的屬性*/ }
表格樣式
th,td{border: 1px red solid} table{ border-collapse: collapse /*折疊邊框（合並多余的邊框線），因為給所有單元格設置border后，會出現多余的邊框線*/
}
設置單元格間距：
th,td{border: 1px red solid} table{ border-spacing: 10px 10px /*設置單元格的間距，第一個參數設置水平間距，第二個設置垂直間距*/ }
border-spacing是對<table>使用的，對<td>、<th>使用無效。
border-spacing不能和border-collapse一起使用，一起使用時border-spacing無效。
盒子模型
標准盒子模型：
width、hight指的是content的寬、高。
低版本IE盒子模型（IE9.0以下）：要算上內邊距、border的線寬
width=content的寬+（padding-left + padding-right）+（border-left-width + border-right-width）
height=content的高+（padding-top + padding-bottom）+（border-top-width + border-bottom-width）
padding、margin
div{ /*分別設置4個內邊距*/ padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; padding: 10px 20px 10px 20px; /*一起設置，頂右底左*/ padding:10px 20px; /*參數不全時，默認取對邊的值，頂=底，左=右*/ padding: 10px; /*4個內邊距都是10px*/ }
margin的設置方式和padding相同。
display 元素的顯示方式
div{ display: none; /*不顯示元素，不再占據空間*/ display: block; /*作為塊級元素顯示，前后自動換行，可設置width、height*/ display: inline; /*作為行內元素顯示，前后不自動換行，不能設置width、height（設置了無效）*/ display: inline-block; /*行內塊方式顯示，前后不會自動換行，但可以設置width、height*/ }
塊級、行內元素均可設置margin、padding。
塊級元素前后會自動換行，可以設置width、height。
行內元素前后不會自動換行，一般不能設置width、height（有特殊的，比如<img />）。
visibility 設置元素是否可見
div{ visibility: hidden; /*隱藏元素，元素不可見，但任然占據空間*/ visibility: visible; /*默認值，元素可見*/ }
overflow 溢出的處理方式
div{ overflow: hidden; /*隱藏|剪掉溢出的部分，可能會出現殘缺文字*/ overflow: scroll; /*加滾動條，不管溢不溢出，都會出現滾動條*/ overflow: auto; /*這個用得最多，溢出時才出現滾動條*/ }
可單獨設置水平、豎直方向溢出的處理方式：
div{ overflow-x: auto; /*設置水平方向溢出的處理方式*/ overflow-y: hidden; /*設置豎直方向溢出的處理方式*/ }
float 浮動
div{ float:left; /*向左浮動*/ float:right; /*向右浮動*/ }
行內、塊級元素均可浮動，浮動是在父容器中浮動，左浮動向左，右浮動向右，直到碰到一個兄弟元素的邊緣或達到父容器的邊界。
浮動后，周圍元素的排列會改變，相鄰的不浮動的元素會受到影響，相鄰的不浮動的元素可使用clear清除浮動影響：
.clear{ clear:left; /*此元素的左邊不能有相鄰的浮動元素，如果有，會重起一行來顯示此元素*/ clear:right; /*此元素的右邊不能有相鄰的浮動元素，如果有，會重起一行來顯示右邊的浮動元素*/ clear:both; /*left+right*/ }
clear是對相鄰的不浮動的元素使用的。
position 定位
1、static 正常顯示
div { position: static; /*默認值，正常的文檔流顯示方式*/ }
如果定位方式是static（默認值），則設置的left|right|top|bottom屬性無效。
2、relative 相對於正常位置定位
div { position:relative; /*相對於正常位置定位,需配合left|right|top|bottom使用*/ left:50px; /*距原來位置左側50px*/ top:20px /*距原來位置頂端20px*/ }
支持負數，負數表示朝反方向移動。css中的坐標系：
3、絕對定位
div { position:absolute; /*需配合left|right|top|bottom使用*/ left:50px; top:20px }
絕對定位是一種特殊的相對定位，相對於（距離上）最近的已定位的祖先元素（父親、爺爺....）定位，這里的已定位指的是使用static之外的方式來定位。
如果沒有已定位的祖先元素，則相對於<html>（整個頁面的頂|底端、左|右邊界）定位。
以上三種方式，元素會隨着頁面的上下滾動而移動。
4、fixed定位
div { position:fixed; /*需配合left|right|top|bottom使用*/ left:50px; top:20px }
相對於瀏覽器窗口（頂部、左|右邊界）定位，頂部指的是書簽欄下面。
一直固定在指定位置，不隨頁面的滾動而移動。
z-index 設置元素的堆疊順序
使用relative、absolute、fixed這些定位時，元素可能會堆疊到其他元素之上，會覆蓋掉下面的元素。可以使用z-index指定元素的堆疊順序：
div { position:absolute; /*需配合left|right|top|bottom使用*/ left:50px; top:20px; z-index:1 /*值為整數（支持負整數），默認為0，數值越大，優先級越高，堆疊在越上面。*/ }
元素的對齊方式
1、通過調節margin、padding、width、height來實現元素對齊。
常用margin的auto屬性來是實現元素在父容器中的居中（對齊）：
div{margin:auto}
元素的水平居中(對齊)需要把左右margin設置為auto，元素的垂直居中（對齊）需要把頂底margin設置為auto。
auto單獨使用不能實現居中，需要配合width|height使用，實現水平居中需要配合width使用（如果不設置，塊級的width默認為父容器的width，本身就占據了父容器的寬，怎么水平居中？）；實現垂直居中需要配合height屬性使用。
2、通過float來實現元素的水平對齊
3、通過position: absolute; 來實現元素對齊
4、vertical-align 設置同一行（排）內元素的對齊方式
img{ vertical-align: top; /*與行中最高的元素的頂端對齊*/ vertical-align: middle; /*與行的中間線對齊*/ vertical-align: bottom; /*與行中最低的元素的底端對齊*/ vertical-align: text-top; /*與行中文本的頂端對齊*/ vertical-align: text-bottom;/*與行中文本的底端對齊*/ }
5、text-align 設置文本的對齊方式
p{ text-align:left; /*左對齊*/ text-align: right; /*右對齊*/ text-align: center; /*居中對齊*/ text-align: justify; /*兩端對齊*/ }
opacity 透明度
img{opacity: 0.5}
可對所有元素使用，常用於圖片。
取值范圍[0,1]上的小數，0表示完全透明（不可見），1表示完全不透明（最清晰），數值越大越清晰。
width、height常用值
- px 像素
- 百分數 占父容器的百分比
應該給margin、padding等屬性設置初始值，因為各瀏覽器的css屬性默認初始值可能不同，如果不設置初始值，可能會導致在不同瀏覽器中頁面顯示效果存在差異。