********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-image: url(‘1.jpg‘);            背景圖片
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{
    border: 1px solid;
    background-color: cadetblue;
}

》》》》解決方案

body {
    margin: 0;
}

第二刀：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樣式之操作屬性一