CSS樣式之操做屬性一

********css之操做屬性********

1、文本
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～h五、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 屬性見下篇