css常用屬性

標籤：style   blog   http   io   color   ar   os   使用   sp   

一個盒子實際所佔有的寬度或高度是由"內容+內邊距+邊框+外邊距"組成。

    1.邊框border

邊框的主要屬性有三個，分別是：

border-width：邊框寬度、 border-style：邊框樣式、border-color：邊框顏色。

以上屬性可以單個寫，也可以寫成：

border:[border-width][border-style][border-color]|inherit

border-color:上、右、下、左  /* 同時設定四個邊框的一個屬性 */

border-left:1px red solid   /* 單獨設定某一邊框三個屬性 */

border-left-color：red      /* 單獨設定某一邊框的某一屬性 */

2.內邊距padding

padding:[上單元][右單元][下單元][左單元]，也可以單獨設定padding-top，padding-right，padding-bottom，padding-left。

3.外邊距margin

margin:[上單元][右單元][下單元][左單元]，也可以單獨設定margin-top，margin-right，margin-bottom，margin-left。

注意外邊距合并的概念：就是有垂直上下兩個元素時，上面元素的margin-bottom與下面元素的margin-top會合并為一個，並取兩者中的大者為垂直margin

4.背景 background

     background-attachment   設定背景映像是否固定或者隨著頁面的其餘部分滾動。

     fixed：固定，不隨螢幕的滾動而滾動。

     scroll：隨螢幕的滾動而滾動。

     inherit:從父元素中繼承。

background-color：[顏色]   設定背景圖片的顏色

background-image:ulr("映像的地址");  背景圖片地址

background-position: 背景的位置  可以跟兩個百分比或兩個數字  

      50px 50px

      50% 50%

top left

background-repeat:背景圖片重複

     no-repeat:不重複

     repeat:延水平，垂直兩個方向平鋪

     repeat-x:  延水平方向平鋪

     repeat-y:延垂直方向平鋪

background  一次過設定以上5個屬性

     background:[background-color][background-image][background-repeat][background-attachment][background-position]

 5.文本text

color:設定文本顏色。

direction：設定文本方向。

line-height：行高。   行高設定與元素同樣高以實現垂直置中對齊是常用技巧之一。

letter-spacing：字元間距。    中文之間的字間隔用它來實現，可以用像素，也可以用em等等。letter-spacing添加字母之間的空白，而word-spacing添加每個單詞之間的空白。請大家注意，word-spacing對中文無效。

text-align：對齊元素中的文本。

text-decoration：文本添加樣式(上劃線，底線，刪除線等等)。

text-indent：文本首行縮排。

text-shadow：文本陰影。     text-shadow: -10px -10px #666,10px 10px #fff;

text-transform：控制元素中的字母。 屬性：lowercase：全部轉為小寫，uppercase:全部轉換為大寫，capitalize將單詞首字母轉為大寫，none不處理。

unicode-bidi：設定文本方向。

white-space：設定元素中空白的處理方式。normal：預設屬性，空白符被忽略。pre：保留空白，不換行。pre-wrap:保留空白，但是正常換行。nowrap:不換行，忽略空白，直到遇到<br/>。pre-line：忽略空白，保留換行。

word-spacing：設定字屬性。

      6.字型font

            font-family:宋體;   設定字型系列。

            font-size:2em。    設定字型大小。2em 2xm 2px等等。

            font-weight:700;  設定字型促銷。 100-900  bold:粗體 bolder:更粗。lighter:更小。

            font-style:italic;    設定字型樣式  normal：正常，italic:斜體 oblique：傾斜

            font-variant:small-caps;   以小型大寫字型或者正常字型顯示文本。只對英文文本有效。

            font  一次過設定多個屬性。

       7.列表

            list-style-type：circle             設定清單項目標誌的類型。(li前面顯示得字元。)

list-style-image：url("k.jpg")  設定清單項目標誌的圖片。(li前面顯示得字元。)

list-sutle-position:inside        inside：清單項目標誌放置在文本以內，且環繞文本根據標記對齊。outside:  預設值 保持標記位於文本的左側。清單項目標記放置在文本以外，且環繞文本不根據標記對齊。

list-style:[list-style-type][list-style-image][list-style-position] 一次過設定以上3個屬性。

     8.表格table

　　　　border-collapse   設定表格的邊框是否合并為單一的邊框。  屬性： separate：不合并。  collapse:合并為單線邊框。

           border-spacing   設定表格邊框線之間的距離，如果邊框已經collapse合并，則無效果。

　　　　caption-side       設定表格標題的位置，預設是top。屬性有：top 標題在表格頂部。bottom 標題在表格底部。

　　　　empty-cells        設定表格空單元周圍是否繪製邊框，注意要border-collapse不合并separate，在能看得到效果。屬性 hide不繪製邊框，show繪製邊框。

　　　　table-layout       設定表格儲存格寬度的計算方法。fixed：列表由表格寬度設定。auto：列表由儲存格內容設定。注意表格width由百分比設定有效，設定為50px時，無效。

      9.輪廓

　　　　outline-color　　輪廓顏色

　　　　outline-style　　輪廓線條樣式

　　　　outline-width　　輪廓線條寬度

　　　　outline　　　　將以上一次性設定以上3個屬性。

　　10.定位

　　　　position：static  靜態定位、relative 相對定位、absolute 絕對位置、fixed 類似絕對位置，不過定位標準是視窗。

　　　　靜態定位即標準流位置。相對定位可以設定相對原標準流中位置的位移量，但仍佔用標準流位置。絕對位置以最近的已定位父元素為定位基準(已定位含義：有position且不為static)。fixed以瀏覽器視窗為定位基準。

　　11.浮動

　　　　float:　　left左浮動，right 右浮動，none，不浮動。注意浮動只對區塊層級元素有效。

區塊層級元素(block)會佔一行，不管內容滿不滿一行。如：<ul li> <div>

行內元素(inline)佔用的元素僅僅為內容的長度，當多個元素的內容都不滿一行時，會自動顯示在同一行。如：<span><a>

12.清除浮動

　　clear     left: 清除左浮動　right：清除右浮動    both：清除左浮動和右浮動。none:預設值，不清除浮動。

13.尺寸

　　width:定義元素寬度

　　height:定義元素高度

　　max-width:定義元素最大寬度

　　max-width:定義元素最大高度

　　min-widht:定義元素最小寬度

　　min-height:定義元素最小高度

　　line-height:設定行高;　　　　百分比：100%是預設的行高。 純數字：1是預設行高。像素：不知道。

　　content:　  為所選中元素新增內容。通常配合:before或:after一起使用。

:before 在元素之前新增內容。

:after 在元素之後新增內容。

 

14、overflow 超出父元素邊界的處理方法　　

　　 overflow　　屬性:visible 預設屬性。內容不會被修剪，會呈現在元素框之外。

　　 　　　　　　　　  hidden:超出部分內容會被隱藏，其餘不可見。

　　　　　　　　　　　scroll:內容會被修剪，但是瀏覽器會顯示捲軸其餘的內容。

　　　　　　　　　　　auto:如果內容被修剪，則瀏覽器會顯示捲軸以便查看其餘內容。

<div style="width:200px;height:200px; border:1px solid #999; overflow:scroll" id="div1">　　<div id="div2" style="width:400px;height:400px; margin:20px 0px 0px 20px;">　　　　　　</div></div>

 　　15、white-space

 　　

pre	空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標籤。
nowrap	文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標籤為止。
pre-wrap	保留空白符序列，但是正常地進行換行。
pre-line	合并空白符序列，但是保留分行符號。
inherit	規定應該從父元素繼承 white-space 屬性的值。

 　　pre空白符被瀏覽器保留是什麼意思呢？

    <p style="white-space:pre">你好         嗎？         </p> <p>你好 嗎？ </p>

　　結果

　　

　　第一行，所有的空格都保留。第二行，中間保留一個，右邊一個都沒。

　　pre-line中的保留分行符號是什麼意思呢？就是代碼中的換行保留下來，同時也正常地換行。

<body style="width:250px; border:1px solid #000;">    <p style="white-space:pre-line">你好 嗎？ I AM A SUPER MAN HA HA HA HA HA HA HA HA HA A</p></body>

　　結果如下：

　　

css常用屬性