********css之操作屬性********一、文字1.文字顏色：color
顏色屬性被用來設定文字的顏色
顏色是通過css最經常的指定：
十六進製制值 -如: ＃ff0000
乙個rgb值 - 如: rgb(255,0,0)
顏色的名稱 -如: red
2.水平對齊方式
text-align 屬性規定元素中的文字的水平對齊方式。
left 把文字排列到左邊。預設值：由瀏覽器決定。
right 把文字排列到右邊。
center 把文字排列到中間。
justify 實現兩端對齊文字效果。
*****.文字其他操作
font-size: 10px; 字型大小
line-height: 200px; 文字行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基於字型大小的百分比
vertical-align:－4px 設定元素內容的垂直對齊方式 ,只對行內元素有效，對塊級元素無效
text-decoration:none text-decoration 屬性用來設定或刪除文字的裝飾。主要是用來刪除鏈結的下劃線
font-family: '
lucida bright
'font-weight: lighter/bold/border/font-style: oblique
text-indent: 150px; 首行縮排150px
letter-spacing: 10px; 字母間距
word-spacing: 20px; 單詞間距
text-transform: capitalize/uppercase/lowercase ; 文字轉換，用於所有字句變成大寫或小寫字母，或每個單詞的首字母大寫
3.背景屬性
background-color
background-image
background-repeat
background-position
background-color: cornflowerblue 背景顏色
'); 背景
background-repeat: no-repeat;(repeat:平鋪滿) 是否鋪滿
background-position: right top（20px 20px）; 位置
簡寫：background:
#ffffff url('1.png') no-repeat right top;
4.邊框屬性
border-style 邊框樣式（實線還是虛線）
border-color 邊框顏色
border-width 邊框厚度
border-radius: 50%畫圓
border-left/right/top/bottom
簡寫：border:厚度 樣式 顏色
5.列表屬性
ul/ol
list-style 列表樣式
none(無樣式)/circle(圓圈)/square(方塊)/lower-latin(英文本母)
6.外邊距（margin）和內邊距（padding）
1.盒子模型
margin: 用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
padding: 用於控制內容與邊框之間的距離；
border(邊框): 圍繞在內邊距和內容外的邊框。
content(內容): 盒子的內容，顯示文字和影象。
2.margin(外邊距)
單邊外邊距屬性
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
簡寫屬性：
margin:10px 20px 20px 10px；
上邊距為10px
右邊距為20px
下邊距為20px
左邊距為10px
margin:10px 20px 10px;
上邊距為10px
左右邊距為20px
下邊距為10px
margin:10px 20px;
上下邊距為10px
左右邊距為20px
margin:25px;
所有的4個邊距都是25px
********居中應用********margin: 0 auto;
3.padding(內邊距)
單獨使用填充屬性可以改變上下左右的填充。縮寫填充屬性也可以使用，一旦改變一切都改變。
設定同margin
第一刀：body的外邊距
邊框在預設情況下會定位於瀏覽器視窗的左上角，但是並沒有緊貼著瀏覽器的視窗的邊框，這是因為body本身也是乙個盒子（外層還有html），在預設情況下， body距離html會有若干畫素的margin，具體數值因各個瀏覽器不盡相同，所以body中的盒子不會緊貼瀏覽器視窗的邊框了，為了驗證這一點，加上：
body
》解決方案
body
第二刀：margin collapse（邊界塌陷或者說邊界重疊）
1、兄弟div：
上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin裡最大值作為顯示值
2、父子div：
if父級div中沒有border，padding，inlinecontent，子級div的margin會一直向上找，直到找到某個標籤包括border，padding，inline content中的其中乙個，然後按此div 進行margin；
》解決方法：
overflow: hidden;
7.float 屬性
布局關鍵點：如何能夠讓可以調節長度的元素（標籤）在一行顯示
如果上乙個是浮動的，那麼就緊貼著
如果上乙個不是浮動的，那麼就保持垂直距離不變
****基本浮動規則****先來了解一下block元素和inline元素在文件流中的排列方式。
block元素通常被現實為獨立的一塊，獨佔一行，多個block元素會各自新起一行，預設block元素寬度自動填滿其父元素寬度。block元素可以設定width、height、margin、padding屬性；
inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裡，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。inline元素設定width、height屬性無效
常見的塊級元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等
所謂的文件流，指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。
脫離文件流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文件流的元素不存在而進行定位。
假如某個div元素a是浮動的，如果a元素上乙個元素也是浮動的，那麼a元素會跟隨在上乙個元素的後邊(如果一行放不下這兩個元素，那麼a元素會被擠到下一行)；如果a元素上乙個元素是標準流中的元素，那麼a的相對垂直位置不會改變，也就是說a的頂部總是和上乙個元素的底部對齊。此外，浮動的框之後的block元素元素會認為這個框不存在，但其中的文字依然會為這個元素讓出位置。 浮動的框之後的inline元素，會為這個框空出位置，然後按順序排列。
****非完全脫離文件流****左右結構div盒子重疊現象，一般是由於相鄰兩個div乙個使用浮動乙個沒有使用浮動。乙個使用浮動乙個沒有導致div不是在同個「平面」上，但內容不會造成覆蓋現象，只有div形成覆蓋現象。
》解決方法：
要麼都不使用浮動；要麼都使用float浮動；要麼對沒有使用float浮動的div設定margin樣式
position定位 和 display 屬性見下篇
CSS之margin樣式屬性
相對於同級的標籤設定偏移量 doctype html utf 8 title span in style head border 1px solid red height 300px width 300px margin bottom 20px in style background color b...
CSS屬性之文字樣式
css屬性之文字樣式 1 字母轉化 text transform uppercase 將小寫字母轉化為大寫字母 text transform none 變回原樣 text transform lowercase 將大寫字母轉化為小寫字母 text transform capitalize 將英文的首...
CSS樣式屬性
position用來設定元素的定位型別，有absolute 絕對定位 relative 相對定位 static 靜態定位，預設值 fixed 固定定位 四種。static 預設。位置設定為 static 的元素，它始終會處於頁面流給予的位置 static 元素會忽略任何 top bottom lef...