-背景的屬性
l Background-color: 背景顔色 例如：background-color：#ff0000;background-color:red;
l Background-image:背景圖檔 例如 background-image:url(圖檔的路徑)
l Background-repeat:背景圖檔是否平鋪 取值：no-repeat不平鋪 repeat-x橫向平鋪 repeat-y縱向平鋪 repeat橫向和縱向都平鋪 （預設）
l Background-attachment:背景附件，背景是否随着上方的内容一起滾動
取值 ：fixed背景固定 scroll滾動
例如：background-attachment:fixed;
l Background-position:背景圖檔的展開方式 例如：background-position:水準 垂直;
英文 ：水準 left center right 垂直top center bottom
數值 ：正值 負值
例如 background-position:left top;
例如:background-positon:0 0; background-position:10px 20px;
可以簡寫
Background:背景顔色 背景圖檔 背景圖檔是否平鋪 水準 垂直；（附件通常僅用body标簽）
注意：隻有水準和垂直不能颠倒，其他的屬性值可以順序颠倒
z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
cursor:光标标簽 pointer（一隻手） wait（通常是一隻表或沙漏） help（通常是一個問号或一個氣球） default（通常是一個箭頭）
border-radius
:50%(圓）用來設定邊框圓角
<!—設定主體标簽， 背景圖檔，縱向平鋪 水準居中垂直距離頂端20px-->
清單
去掉清單前面的項目符号
1. List-style-type:none;
可以簡寫為
2. List-style:none;
例如
效果
l 用小圖代替清單前面的符号
List-style-image:url(圖檔的位址)
display: inline ;去掉前面的符号并分布在一行
之前rules=”all” 表格<table>的屬性 合并表格的邊框線
Css樣式如何實作
Border-collapse:collapse; 合并表格的邊框線
例如
邊框（html标簽就可以加邊框線）
上邊框
1. Border-top-color:顔色值;上邊框的顔色
2. Border-top-style:線型;線型有solid實線 dashed虛線dotted點狀線
3. Border-top-width:粗細；例如border-top-width:2px;
簡寫為
Border-top:粗細 線型 顔色;
右邊框
1. Border-right-color:顔色值;上邊框的顔色
2. Border-right-style:線型;線型有solid實線 dashed虛線dotted點狀線
3. Border-right-width:粗細；例如border-right-width:2px;
簡寫為
Border-right:粗細 線型 顔色;
下邊框
1. Border-bottom -color:顔色值;上邊框的顔色
2. Border-bottom-style:線型;線型有solid實線 dashed虛線dotted點狀線
3. Border-bottom-width:粗細；例如border-bottom-width:2px;
簡寫為
Border-bottom:粗細 線型 顔色;
左邊框
1. Border-left-color:顔色值;上邊框的顔色
2. Border- left -style:線型;線型有solid實線 dashed虛線dotted點狀線
3. Border- left -width:粗細；例如border- left -width:2px;
簡寫為
Border- left:粗細 線型 顔色;
上右下左四條邊框的樣式一樣
可以簡寫為 border:粗細 線型 顔色；
盒子模型（div）
盒子的必要屬性
内容區：width和height
邊框 border:
内邊距 padding(将盒子撐大，盒子的寬高會改變)
内容和邊框之間的距離
1. Padding-top：數值；内容和上邊框之間的距離
2. Padding-right：數值；内容和右邊框之間的距離
3. Padding-bottom：數值；内容和下邊框之間的距離
4. Padding-left：數值；内容和左邊框之間的距離
簡寫形式
Padding：10px 20px 30px 40px;上邊框距離10px 右 20px 下邊框30px 左40px
Padding:10px 20px 30px; 上10px 左右 20px 下 30px
Padding:10px 30px; 上下10px 左右30px
Padding:10px; 上右下左都是10px
注意：一個值的話上右下左等距；兩個值上下等距、左右等距；三個值左右等距。
外邊距（margin預設8px） 不會将盒子撐大是盒子與盒子之間的距離
邊框以外的距離，即盒子距離外面盒子或網頁面闆的距離
1. Margin-top:數值；上邊框往外的距離
2. Margin-right:數值；右邊框往外的距離
3. Margin-bottom:數值；下邊框往外的距離
4. Margin-left:數值；左邊框往外的距離
簡寫為
Margin:10px 20px 30px 40px; 上邊框以外的10px 右是20px 下30px 左40px
Margin:10px 20px 30px; 上邊框以外的10px 左右是20px 下是30px
Margin:10px 20px; 上下為10px 左右為20px
Margin:10px; 上右下左都是10px
<!—兩個div盒子，第一個div内容區的寬度是300px 高度為280px，邊框線為2像素，實線 藍色，内容和上下邊框之間的20px，内容和左邊框的距離15px，
第二個盒子div,寬度為280px，高度為300px ，邊框線1px 實線 灰色， 内容和左邊框的距離為15px，兩個盒子之間的距離為20像素-->
網站布局的一個思想
網站的結構就是兩部分（橫向和縱向） 如果是縱向的就是正常的文檔流，設定内容器的寬度和高度，設定内容和邊框之間的距離 padding ,邊框往外的部分margin border調這些屬性就可以
如果是橫向排列，我們就要使用浮動
浮動（哪個框動在哪個框裡面加浮動）
Float：left；
Float:right;
裡面有三個盒子：左 左 右
左 左 左
浮動的特點：
使元素站隊（站隊的邊界是他父級的邊界），一行站滿後從下一行開始
設定浮動的元素，不占空間
設定浮動的元素層級高于普通元素
設定浮動之後，無論之前是否是塊元素，設定浮動之後一定是塊元素
盒子被浮動後後面的盒子會根據文本流動占位移動那個盒子的位置
如果在一行中的元素想橫向排列，都設定浮動就可以
通常情況下div裡面還有div（外面的div父盒子，）盒子裡面還有盒子
如何讓盒子在頁面水準居中
Margin: xx auto;
1. 例如：margin: 0 auto;
2. Margin-left:auto; margin-right:auto;
清除浮動（清楚周邊的浮動流）
Clear:left;
Clear:right;
Clear:both;
l Div裡面還有<div > p、div父盒子沒有設定固定高，裡面div設定了浮動，父元素受影響，無法正常的計算，如何讓父元素得到一個自然高
在父盒子裡面的p設定清除浮動的屬性clear:both;
浏覽器的一個bug ----在父元素的樣式中加overflow:hidden;
可以讓父元素得到一個自然高
不受浮動的影響
如有不足請多多指教！希望給您帶來幫助！祝您生活愉快。