css常用屬性

少年織夢發表於2017-01-31
CSS

這是自己日常中所常用的屬性 現在把他記下來 方便後面記憶 轉載時請註明地址謝謝




長度單位
* 畫素 px
* - 畫素是我們在網頁中使用的最多的一個單位，
* 一個畫素就相當於我們螢幕中的一個小點，
* 我們的螢幕實際上就是由這些畫素點構成的
* 但是這些畫素點，是不能直接看見。
* - 不同顯示器一個畫素的大小也不相同，
* 顯示效果越好越清晰，畫素就越小，反之畫素越大。
* 
* 百分比 %
* - 也可以將單位設定為一個百分比的形式，
* 這樣瀏覽器將會根據其父元素的樣式來計算該值
* - 使用百分比的好處是，當父元素的屬性值發生變化時，
* 子元素也會按照比例發生改變
* - 在我們建立一個自適應的頁面時，經常使用百分比作為單位
* 
* em
* - em和百分比類似，它是相對於當前元素的字型大小來計算的
* - 1em = 1font-size
* - 使用em時，當字型大小發生改變時，em也會隨之改變
* - 當設定字型相關的樣式時，經常會使用em
*
顏色單位：
* 在CSS可以直接使用顏色的單詞來表示不同的顏色
* 紅色：red
* 藍色：blue
* 綠色：green
*   也可以使用RGB值來表示不同的顏色
* - 所謂的RGB值指的是通過Red Green Blue三元色，
* 通過這三種顏色的不同的濃度，來表示出不同的顏色
* - 例子：rgb(紅色的濃度,綠色的濃度,藍色的濃度);
* - 顏色的濃度需要一個0-255之間的值，255表示最大，0表示沒有
* - 濃度也可以採用一個百分數來設定，需要一個0% - 100%之間的數字
* 使用百分數最終也會轉換為0-255之間的數
* 0%表示0
* 100%表示255
*   也可以使用十六進位制的rgb值來表示顏色，原理和上邊RGB原理一樣，
* 只不過使用十六進位制數來代替，使用三組兩位的十六進位制陣列來表示一個顏色
* 每組表示一個顏色,第一組表示紅色的濃度，範圍00-ff
* 第二組表示綠色的濃度，範圍是00-ff
* 第三組表示藍色的濃度，範圍00-ff
* 語法：#紅色綠色藍色
* 十六進位制：
* 0 1 2 3 4 5 6 7 8 9 a b c d e f
* 00 - ff
* 00表示沒有，相當於rgb中的0
* ff表示最大，相當於rgb中255
* 紅色：
* #ff0000
* 像這種兩位兩位重複的顏色，可以簡寫
* 比如：#ff0000 可以寫成 #f00
* #abc  #aabbcc
*
*/
/*background-color: rgb(161,187,215);*/

/*background-color: rgb(100%,50%,50%);*/

/*background-color: #00f;*/

/*background-color: #abc;*/ /*#aabbcc*/
字型樣式
color: red;設定字型顏色,使用color來設定文字的顏色
font-size：設定文字的大小,瀏覽器中一般預設的文字大小都是16px，設定的並不是文字本身的大小，在頁面中，每個文字都是處在一個看不見的框中的
font-family: "curlz mt";通過font-family可以指定文字的字型
 font-family: serif;在網頁中將字型分成5大類：
serif（襯線字型）
sans-serif（非襯線字型）
monospace （等寬字型）
cursive （草書字型）
fantasy （虛幻字型）
可以將字型設定為這些大的分類,當設定為大的分類以後，
瀏覽器會自動選擇指定的字型並應用樣式
一般會將字型的大分類，指定為font-family中的最後一個字型
line-height：設定行間距的方式
可以接收的值：
* 1.直接就收一個大小
* 2.可以指定一個百分數，則會相對於字型去計算行高
* 3.可以直接傳一個數值，則行高會設定字型大小相應的倍數
/*
* 在font中也可以指定行高
* 在字型大小後可以新增/行高，來指定行高，該值是可選的，如果不指定則會使用預設值
*/
font: 30px "微軟雅黑";
line-height: 50px;
text-transform可以用來設定文字的大小寫
* 可選值：
* none 預設值，該怎麼顯示就怎麼顯示，不做任何處理
* capitalize 單詞的首字母大寫，通過空格來識別單詞
* uppercase 所有的字母都大寫
* lowercase 所有的字母都小寫
text-decoration可以用來設定文字的修飾
* 可選值：
* none：預設值，不新增任何修飾，正常顯示
* underline 為文字新增下劃線
* overline 為文字新增上劃線
* line-through 為文字新增刪除線
letter-spacing可以指定字元間距
ord-spacing可以設定單詞之間的距離
text-align用於設定文字的對齊方式
* 可選值：
* left 預設值，文字靠左對齊
* right ， 文字靠右對齊
* center ， 文字居中對齊
* justify ， 兩端對齊
* - 通過調整文字之間的空格的大小，來達到一個兩端對齊的目的

text-indent用來設定首行縮排
* 當給它指定一個正值時，會自動向右側縮排指定的畫素
* 如果為它指定一個負值，則會向左移動指定的畫素,
* 通過這種方式可以將一些不想顯示的文字隱藏起來
*  這個值一般都會使用em作為單位

盒子模型：

使用width來設定盒子內容區的寬度
* 使用height來設定盒子內容區的高度
* 
* width和height只是設定的盒子內容區的大小，而不是盒子的整個大小，
* 盒子可見框的大小由內容區，內邊距和邊框共同決定
為元素設定邊框
* 要為一個元素設定邊框必須指定三個樣式
* border-width:邊框的寬度
* border-color:邊框顏色
* border-style:邊框的樣式
使用border-width可以分別指定四個邊框的寬度
如果在border-width指定了四個值，
則四個值會分別設定給 上 右 下 左，按照順時針的方向設定的

如果指定三個值，
則三個值會分別設定給上  左右 下

如果指定兩個值，
則兩個值會分別設定給 上下 左右

如果指定一個值，則四邊全都是該值

除了border-width，CSS中還提供了四個border-xxx-width
xxx的值可能是top right bottom left
專門用來設定指定邊的寬度
設定邊框的樣式
* 可選值：
* none，預設值，沒有邊框
* solid 實線
* dotted 點狀邊框
* dashed 虛線
* double 雙線
* 
* style也可以分別指定四個邊的邊框樣式，規則和width一致，
* 同時它也提供border-xxx-style四個樣式，來分別設定四個邊
/*
* 內邊距（padding），指的是盒子的內容區與盒子邊框之間的距離
* 一共有四個方向的內邊距，可以通過：
* padding-top
* padding-right
* padding-bottom
* padding-left
* 來設定四個方向的內邊距
* 
* 內邊距會影響盒子的可見框的大小，元素的背景會延伸到內邊距,
* 盒子的大小由內容區、內邊距和邊框共同決定
* 盒子可見框的寬度 = border-left-width + padding-left + width + padding-right + border-right-width
*  可見寬的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width
*/

/*設定上內邊距*/
/*padding-top: 100px;*/
/*設定右內邊距*/
/*padding-right: 100px;
padding-bottom: 100px;
padding-left: 100px;*/
/*
* 外邊距指的是當前盒子與其他盒子之間的距離，
* 他不會影響可見框的大小，而是會影響到盒子的位置。
* 盒子有四個方向的外邊距：
* margin-top
* margin-right
* margin-bottom
* margin-left
* 
* 由於頁面中的元素都是靠左靠上擺放的，
* 所以注意當我們設定上和左外邊距時，會導致盒子自身的位置發生改變，
* 而如果是設定右和下外邊距會改變其他盒子的位置
*/ 如果外邊距設定的是負值，則元素會向反方向移動
margin還可以設定為auto，auto一般只設定給水平方向的margin
* 如果只指定，左外邊距或右外邊距的margin為auto則會將外邊距設定為最大值
* 垂直方向外邊距如果設定為auto，則外邊距預設就是0
* 
* 如果將left和right同時設定為auto，則會將兩側的外邊距設定為相同的值，
* 就可以使元素自動在父元素中居中，所以我們經常將左右外邊距設定為auto
* 以使子元素在父元素中水平居中
垂直外邊距的重疊
* - 在網頁中相鄰的垂直方向的外邊距會發生外邊距的重疊
* 所謂的外邊距重疊指兄弟元素之間的相鄰外邊距會取最大值而不是取和
* 如果父子元素的垂直外邊距相鄰了，則子元素的外邊距會設定給父元素
將一個內聯元素變成塊元素，
* 通過display樣式可以修改元素的型別
* 可選值：
* inline：可以將一個元素作為內聯元素顯示
* block: 可以將一個元素設定塊元素顯示
* inline-block：將一個元素轉換為行內塊元素
* - 可以使一個元素既有行內元素的特點又有塊元素的特點
* 既可以設定寬高，又不會獨佔一行
* none: 不顯示元素，並且元素不會在頁面中繼續佔有位置
*/
/*
* display: none;
* 使用該方式隱藏的元素，不會在頁面中顯示，並且不再佔據頁面的位置
*/
/*display: none;*/

/*
* visibility
* - 可以用來設定元素的隱藏和顯示的狀態
* - 可選值：
* visible 預設值，元素預設會在頁面顯示
* hidden 元素會隱藏不顯示
* 
* 使用 visibility:hidden;隱藏的元素雖然不會在頁面中顯示，
* 但是它的位置會依然保持
*/
float: left;
/*
* 塊元素在文件流中預設垂直排列，所以這個三個div自上至下依次排開，
* 如果希望塊元素在頁面中水平排列，可以使塊元素脫離文件流
* 使用float來使元素浮動，從而脫離文件流
* 可選值：
* none，預設值，元素預設在文件流中排列
* left，元素會立即脫離文件流，向頁面的左側浮動
* right，元素會立即脫離文件流，向頁面的右側浮動
* 
* 當為一個元素設定浮動以後（float屬性是一個非none的值），
* 元素會立即脫離文件流，元素脫離文件流以後，它下邊的元素會立即向上移動
* 元素浮動以後，會盡量向頁面的左上或這是右上漂浮，
* 直到遇到父元素的邊框或者其他的浮動元素
* 如果浮動元素上邊是一個沒有浮動的塊元素，則浮動元素不會超過塊元素
* 浮動的元素不會超過他上邊的兄弟元素，最多最多一邊齊
*/
position: relative;
/*
* 定位：
* - 定位指的就是將指定的元素擺放到頁面的任意位置
* 通過定位可以任意的擺放元素
* - 通過position屬性來設定元素的定位
* -可選值：
* static：預設值，元素沒有開啟定位
* relative：開啟元素的相對定位
* absolute：開啟元素的絕對定位
* fixed：開啟元素的固定定位（也是絕對定位的一種）
*/

/*
* 當元素的position屬性設定為relative時，則開啟了元素的相對定位
* 1.當開啟了元素的相對定位以後，而不設定偏移量時，元素不會發生任何變化
*  2.相對定位是相對於元素在文件流中原來的位置進行定位
* 3.相對定位的元素不會脫離文件流
* 4.相對定位會使元素提升一個層級
* 5.相對定位不會改變元素的性質，塊還是塊，內聯還是內聯
*/
/*
* 當開啟了元素的定位（position屬性值是一個非static的值）時，
* 可以通過left right top bottom四個屬性來設定元素的偏移量
* left：元素相對於其定位位置的左側偏移量
* right：元素相對於其定位位置的右側偏移量
* top：元素相對於其定位位置的上邊的偏移量
* bottom：元素相對於其定位位置下邊的偏移量
* 
* 通常偏移量只需要使用兩個就可以對一個元素進行定位，
* 一般選擇水平方向的一個偏移量和垂直方向的偏移量來為一個元素進行定位
*/
position: absolute;
/*
* 當position屬性值設定為absolute時，則開啟了元素的絕對定位
* 
* 絕對定位：
* 1.開啟絕對定位，會使元素脫離文件流
* 2.開啟絕對定位以後，如果不設定偏移量，則元素的位置不會發生變化
* 3.絕對定位是相對於離他最近的開啟了定位的祖先元素進行定位的（一般情況，開啟了子元素的絕對定位都會同時開啟父元素的相對定位）
* 如果所有的祖先元素都沒有開啟定位，則會相對於瀏覽器視窗進行定位
* 4.絕對定位會使元素提升一個層級
* 5.絕對定位會改變元素的性質，
* 內聯元素變成塊元素，
* 塊元素的寬度和高度預設都被內容撐開
*/
position: fixed;
/*
* 當元素的position屬性設定fixed時，則開啟了元素的固定定位
* 固定定位也是一種絕對定位，它的大部分特點都和絕對定位一樣
* 不同的是：
* 固定定位永遠都會相對於瀏覽器視窗進行定位
* 固定定位會固定在瀏覽器視窗某個位置，不會隨滾動條滾動
* 
* IE6不支援固定定位
*/

相關文章