首頁 > web前端 > css教學 > 主體

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

高洛峰
發布: 2017-03-17 10:40:51
原創
1587 人瀏覽過

這篇文章分享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是很重要的(廢話)所以下面這些很重要(圖片是在網路上找的)

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

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!