css+div常用屬性的詳細介紹

這篇文章分享css+div常用屬性的詳細介紹

css

通配符選擇符*{}

標籤選擇子p{}

ID選擇子#ID{}

類別選擇子.class{}

#包含選擇子p a{}　　p中的a標籤

#分組選擇符p，p{}　　p標籤和p標籤

display　　規定元素框類型block區塊級元素，none元素不顯示，inine內聯元素即行內元素，inline-black行內塊元素。

visibility　　指定元素是否可見visible可見，hidden不可見，inherit繼承父元素

　　　　　　disalay與visibilitydisalay與visibilitydisalay 用來隱藏的區別是隱藏後是不佔空間的

overflow　　內容溢出時發生的事visible不修剪，呈現在元素窗之外，hidden溢出內容隱藏，scroll總是添加滾動條，auto自動，修剪則新增捲軸，inherit繼承父元素。

cursor　　遊標形狀

float　　方塊-浮動

。

#line-height

　　行高height定義的是整個區塊的高度，而line-heught定義的是文字的行高，設定一行為30px，文字就會相對於這30px垂直居中。

border-collapse

　　表格邊框重疊

font-weight

　　設定文字的粗細

#text-decoration

　　文字修飾

font-family

　　規定元素的字體

text-align

　　區塊-文字對齊被設定元素為文字、圖片等行內元素時，水平居中是透過為父元素設定 text-align:center 來實現的。

clear

　　可取值為left，righr，both既物件左右不允許出現浮動物件

z-index

　　取值為auto/ number，數字越大越在前，可為負。

position

　　定位 取值為絕對定位absolute表示物件脫離文件流，根據瀏覽器或具有定位功能的父元素的左上角為座標原點來定位，                                             中使用中對上相對定位的relative表示一文檔流中的當前物件的自身位置為座標原點定位，#  為fixed表示不受任何網頁影響，根據瀏覽器左上角進行定位，定位後在視窗中固定不隨捲軸滾動

ol　　有序

#ul　　無序

list-style-type　　none不顯示項目符號

##list-style-type　　none不顯示項目符號

list-style-image　　URL列表圖片

：link　　沒有被訪問過的連結

：visted　　被訪問過的連結

：hover　　滑鼠停留的元素

：active　　被啟動的元素（即點擊過的元素）

css3

border-radius　　邊框圓角　　border-radius:5px 10px 15px 20px; 分別表示左上角、右上角、右下角、左下角的半徑。如果對border-radius指定兩個值,那麼第一個值　　　　　　　　　　　　　　　為左上角和右下角，第二個值為右上角和左下角。如果指定三個值，那麼第一個值為左上角，第二個值為右上角和左下角，第三個值為右下角。

box-shadow　　用來加入陰影box-shadow:10px 10px 5px blue;第一個是水平移動距離、第二個是垂直移動距離、第三個是模糊的距離、第四個是陰影的顏色。

border-image　　

background-image

background-size　　設定圖片尺寸使用時要設定p的高寬，否則圖片不顯示，background-size:50px 100px;可為百分數，意為父元素的百分比。

backgrond-origin　　設定背景圖片的位置預設是padding-box; border-box從最外層開始content-box在內部開始

background-clip　　指定位置的背景與之前裁切指定位置的背景與之前的box-shadow一樣

linear-gradient　　線性漸變顏色background:-moz-linear-gradient(red,blue);從上到下background:-webkit-linear-gradient(right,red,blue) ;由左至右標準語法to 　　　　　　　　　　　　　　　　　　right 45deg即指向右上角，90deg,background:-o　　right 45deg即指向右上角，90deg) 任何角度：-o-50-dientd, 1000g。

linear-gradient　　顏色透明度　　rgba(255,0,0,0.7); rgba的最後一個值表示不透明度：0表示完全透明，1表示完全不透明。

text-shadow　　為文字新增陰影與box-shadow用法一樣

white-space　　指定元素內的空格如何處理normal（預設）壓縮空格、pre保留所有空格且永遠不換行、nowrap壓縮空格，不換行、pre-wrap保留空格，正常換行、pre-　　　　　　　　　　　　　　　　　　　　　　　　　　　

text-overflow　　文字溢出時如何顯示內容

word-wrap　　允許單字在很長的時候換行word-wrap:break-word;

word-break　　作用同上屬性值為keep-all則所有的單字都是完整的，而屬性值是break-all時，所有超出邊界的單字都會被break。

p

盒子模型p是很重要的（廢話）所以下面這些很重要(圖片是在網路上找的)

top right bottom left 　　分別代表定位-置入的上右下左，這個奇怪的順序是因為css一個奇怪的設定，所有沒有指定方向的屬性全都是這個順序，

margin　　外邊距 　　　　塊級元素的垂直相鄰外邊距會合併，而行內元素實際上不佔上下外邊距。浮動元素的外邊距也不會合併。允許指定負的外邊距值。

border　　邊框　　　　例如border-width：10px 5px 1px 20px就代表上邊框10像素，右邊框5像素，下邊框1px，框20px。左邊框10像素，右邊框5像素，下邊框1px，框20px。

padding　　內邊距　　　　若是兩個數值則第一個值是上下，第二個值左右。若是三個數值，則第一個值是上，第二個值是左右第三個值是下。

height  width　　內部內容的高和寬

 

margin　　定寬塊狀元素是可以透過設定「左右margin」值為「auto」來實現居中的。

 

p層預設寬度是100%

確定寬度之後才可以使用float屬性進行漂移

當用float設定後的層，在接下來用到的層將受漂移後的影響，需要用clear來設定

在層內部設定絕對定位時需要在父物件中先設定相對定位否則絕對定位會以body父物件進行定位

 

 

以上是css+div常用屬性的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！