盒子模型主要定義了四個區域:內容、填充、邊框和邊距。
框的內容區域存儲文本和圖片等頁面元素,並具有以下屬性:
基本邊框屬性:
通過壹個屬性設置四個方向邊框的寬度、樣式和顏色。
屬性:邊框
值:寬度樣式顏色;
僅設置邊框的寬度、樣式和顏色。
語法:border- direction(上/右/下/左):寬度樣式顏色;
僅設置邊框的寬度、樣式和顏色之壹。
語法:border- attribute(寬度/樣式/顏色):value
僅設置某個邊框的寬度、樣式和顏色之壹。
語法:border- direction(上/右/下/左)- attribute(寬度/樣式/顏色):value
屬性:邊框半徑
功能:設置倒角位置的圓的半徑。半徑越大,弧度越大。
價值:
屬性:邊框-圖像
語法:
邊框-圖片-來源:介紹壹個背景圖片。
價值:
默認:無圖片
Url(圖片URL地址)
邊框-圖像-切片:剪切背景圖片,將邊框背景剪成9塊。
價值:
數字:默認單位px。
百分比:
填充:保留邊框圖像的中間部分。
邊框圖像寬度:指定邊框圖片的寬度。
Border-image-repeat:指定邊框背景圖片的排列方式,可以定義兩個參數,即水平方向和垂直方向。
價值:
拉伸:默認值,拉伸
重復:平鋪
圓形:取整塊瓷磚。
內容區域和邊框(邊緣)之間的距離
語法:padding:value;
單邊設置:填充方向(上/右/下/左):值;
價值:
值px
百分率
內邊距的簡寫:
填充:值;
四個方向的邊距值都是value。
padding:value 1 value 2;
Value1是上下內邊距的值,value2是左右內邊距的值。
padding:value 1 value 2 value 3;
Value1是上內邊距的值,value2是左內邊距和右內邊距的值,value3是下內邊距的值。
padding:value 1 value 2 value 3 value 4;
右上、左下和內邊距的值分別為value1、value2、value3和value4。
外邊距是指元素之間的距離,即元素邊界周圍的空白區域,通過它可以為元素創建額外的“空間”。默認情況下,它不能被其他元素占用,用於拉伸兩個元素之間的距離。
語法:margin:value;
單邊設置:邊距-方向(上/右/下/左):值;
價值:
重新定義元素大小的計算模式
屬性:框大小
價值:
屬性:調整大小
價值:
元素邊框外的線。
屬性:
輪廓:寬度樣式顏色;
屬性:方框陰影
語法:
框-陰影:h-陰影v-陰影模糊蔓延顏色插入;
值:由壹組值組成的值列表。
屬性:背景色
值:顏色值或透明
註意:背景色是從邊框位置繪制的。
屬性:背景圖像
值:url(背景圖像的URL)
屬性:背景-重復
價值:
屬性:背景附件
價值:
滾動:默認值,滾動
已修復:已修復
屬性:背景-位置
價值:
屬性:背景尺寸
價值:
屬性:背景-來源
價值:
屬性:背景剪輯
價值:
CSS3多背景是通過為每個背景屬性提供多個屬性值來實現的。
字體速記屬性語法:
將所有字體屬性寫在壹行,其中font-family是復合屬性中必不可少的屬性。
您不需要設置其中壹個值,如果您省略了該值,您將使用該屬性的默認值。
②文本屬性:
(2)CSS3文本陰影屬性:
屬性:文本-陰影
功能:制造陰影,模糊主體。
語法:
角色:定義列表的編號樣式。
屬性:列表樣式類型
功能:用於設置列表項的圖像屬性。
語法:
圖像URL地址:圖像的相對路徑或絕對路徑。
無:默認值,未指定圖像。
註意:在不同的瀏覽器中,圖片圖標和文本之間的距離是不同的。因此,壹般情況下,該方法不用於設置列表的圖片樣式。
通過設置
將“列表樣式類型”屬性值設置為“無”。
壹組
函數:用於聲明列表標記相對於列表項內容的位置。
語法:
功能:可以同時設置列表樣式類型、列表樣式位置、列表樣式圖片等屬性的值。
語法:
註意:
您不需要設置其中壹個值,默認值用於未設置的屬性。
如果同時指定了list-style-image和list-style-type,則list-style-image優先,除非list-style-image設置為none,或者圖像路徑錯誤,無法顯示。
當列表和列表項同時使用樣式時,首先顯示列表項的樣式。
特點:
您可以設置寬度和高度。
默認情況下,每個塊級元素都有壹個獨占行。
功能:
塊級元素主要用於頁面布局
常見的塊級元素:
& ltdiv & gt、& ltp & gt、& lth 1 & gt;~ & lth6 & gt、& ltol & gt、& ltul & gt等待
特點:
妳不能設置寬度和高度,它的寬度是妳自己的文字或圖片的寬度。
默認情況下,多個內嵌元素將顯示在壹行中,並在遇到父元素的邊界時自動換行。
功能:
內嵌元素主要用於設置文本樣式。
常用的行內元素:
& lta & gt、& ltspan & gt、& ltem & gt、& ltb & gt、& lt我& gt、& ltstrong & gt、& ltimg & gt、& lt輸入& gt等待
功能:控制頁面元素脫離原來的文檔流,向左或向右移動,直到元素的外邊緣接觸到其包含框或另壹個浮動框的邊緣,標準流中的其他框將被推到浮動框的位置。浮動元素不占用真實空間。
屬性:浮動
價值:
浮動元素互不重疊;
浮動元素不會上下浮動。如果壹個浮動元素顯示在另壹個浮動元素後面,並且超出了保持塊,則它會下降到比任何先前的浮動元素都低的位置。
功能:指定元素的哪壹側不允許有其他浮動元素。
價值:
功能:控制頁面元素在頁面中的位置。
屬性:位置
值:靜態/相對/絕對/固定。
默認屬性值,元素按照標準文檔流排列,塊級元素占壹行,行內元素顯示壹行,行不能顯示,自動換行。
特點:
相對於其原始位置的偏移量
仍然在標準文檔流中
然後是偏移屬性和z-idex屬性。
偏移屬性:
左:數值px;
右圖:數值px;
Top:數值px;
下圖:數值px;
當壹個元素被相對定位時,它將在Z軸上產生壹個堆棧。如果未設置z-index屬性,默認情況下,元素將出現在由X軸和Y軸形成的平面上。
特點:
建立基於包含塊的定位。
絕對定位元素的位置相對於最近定位的祖先元素(設置絕對定位、相對定位或固定定位中的任意壹個)。如果元素沒有定位的祖先元素,則元素的位置相對於瀏覽器窗口。
完全脫離了標準的文件流程。
然後是偏移屬性和z-idex屬性。
偏移屬性:
左:數值px;
右圖:數值px;
Top:數值px;
下圖:數值px;
無需設置偏移量的絕對定位的特點:
無論是否有已經定位的祖先元素,它都保持在元素的初始位置。
在標準文件流程之外
設置固定位置的元素框類似於將position設置為absolute,但它包含的塊是瀏覽器窗口本身。
在計算機顯示中,垂直於屏幕平面的方向稱為Z方向,CSS絕對定位容器的z-index屬性就是對應的方向。
功能:用於控制元素的層疊順序,使壹個元素浮動在其他元素之上。
語法:
Auto:跟隨其父元素的位置。
Number:整數,可以是負數,最大值疊加在上層。
註意:使用z-index屬性時,該元素的position屬性值需要為絕對、相對或固定。
功能:用於定義創建布局時元素生成的顯示框架類型。
語法:display:value;
功能:用於定義創建布局時元素生成的顯示框架類型。
語法:可見性:值;