css盒子模型,div css布局

2021-07-28 14:19:03 字數 2361 閱讀 3607

css盒子模型

border:

border-width:邊框的寬度

border-color:邊框的顏色

border-style:邊框的線型

border-top:上邊框

border-bottom:下邊框

border-left:左邊框

border-right:右邊框

padding:

代表邊框內壁與內部元素之間的距離

padding:10px;代表上下左右都是10px

padding:1px 2px 3px 4px;上右下左

padding:1px 2px;上下/左右

padding:1px 2px 3px;

padding-top:單獨設定

margin:

代表邊框外壁與其他元素之間的距離

margin:10px;代表上下左右都是10px

margin:1px 2px 3px 4px;上右下左

margin:1px 2px;上下/左右

margin:1px 2px 3px;

margin-top:單獨設定

css框模型

盒子模型

css 框模型

(box model)

規定了元素框處理元素內容、

內邊距、邊框

和 外邊距

的方式。

元素框的最內部分是實際的內容,直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距,外邊距預設是透明的,因此不會遮擋其後的任何元素

邊框

元素的邊框 (border)是圍繞元素內容和內邊距的一條或多條線。

css border 屬性允許你規定元素邊框的樣式、寬度和顏色。

常用屬性:

l border:簡寫屬性,用於把針對於四個邊的屬性設定在乙個宣告。

l border-color:簡寫屬性,定義元素邊框中可見部分的顏色,或為四個邊分別設定顏色。

l border-style:用於定義所有邊框的樣式,或者單獨為各邊設定邊框樣式。

l border-width:簡寫屬性,用於為元素的所有邊框設定寬度,或則單獨地為各邊邊框設定寬度

l border-top:簡寫屬性,用於把上邊框的所有屬性設定到乙個宣告中

l border-right:簡寫屬性,用於把右邊框所有屬性設定到乙個宣告中

l border-bottom:簡寫屬性,用於把下邊框的所有屬性設定到乙個宣告中

l border-left:簡寫屬性,用於把左邊框的所有屬性設定到乙個宣告中。

外邊距

圍繞在元素邊框的空白區域是外邊距。設定外邊距會在元素外建立額外的「空白」。

設定外邊距的最簡單的方法就是使用 margin屬性,這個屬性接受任何長度單位、百分數值甚至負值。

常用屬性:

l margin:簡寫屬性,在乙個宣告中設定所有外邊距屬性

l margin-top:定義元素的上外邊距

l margin-right:定義元素的右外邊距

l margin-bottom:定義元素的下外邊距

l margin-left定義元素的左外邊距

注意:在使用

margin

來定義所有外邊距時,可以使用值複製。

n 如果缺少左外邊距的值,則使用右外邊距的值。

n 如果缺少下外邊距的值,則使用上外邊距的值。

n 如果缺少右外邊距的值,則使用上外邊距的值。

內邊距

元素的內邊距在邊框和內容區之間。控制該區域最簡單的屬性是 padding 屬性。

css padding 屬性定義元素邊框與元素內容之間的空白區域。

常用屬性:

l padding:簡寫屬性,作用是在乙個宣告中設定元素的所有內邊距屬性

l padding-top:定義元素的上內邊距

l padding-right:定義元素的右內邊距

l padding-bottom:定義元素的下內邊距

l padding-left:定義元素的左內邊距。

【筆試面試題】

1. css基本語法是什麼

2. css匯入方式有幾種

3. 外部匯入與@import有什麼區別

4. css選擇器的作用是什麼

,並說出常見三種選擇器。

5. display=none與

visibility=hidden

有什麼區別

DIV CSS 盒子模型

盒子模型有兩種,分別是 ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同,先來看看我們熟悉的標準盒子模型 看不清楚?這裡檢視原圖 大圖 從上圖可以看到標準w3c 盒子模型的範圍包括 margin border padding content,並且 content 部分不包含其他部...

div css 盒子模型

那麼它為什麼叫盒子呢?先說說我們在網頁設計中常聽的屬性名 內容 content 填充 padding 邊框 border 邊界 margin css盒子模式都具備這些屬性。我們可以把它想像成現實中上方開口的盒子,然後從正上往下俯視,邊框相當於盒子的厚度,內容相對於盒子中所裝物體的空間,而填充呢,相當...

DIV CSS盒子模型

一 盒子模型css height width padding 內邊距 margin 外邊距 border 1.margin 外邊距 margin top 15px margin right 50px margin bottom 100px margin left 150px 或者margin 10p...