是的,float不屬于盒子屬性。盒子屬性有:width、height、padding、padding-bottom、padding-left、padding-right、padding-top、margin、border等等。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
盒子模式(模型)就是在網(wǎng)頁設計中經(jīng)常用到的CSS技術所使用的一種思維模型。CSS假定所有的HTML文檔元素都生成一個描述該元素在HTML文檔布局中所占空間的矩形元素框,可以形象地將其看作是一個盒子。
通過定義一系列與盒子相關的屬性,可極大地豐富和促進各個盒子乃至整個HTML文檔的表現(xiàn)效果和布局結構。
css盒子模式(模型)又稱為框模型 (Box Model) ,是由元素內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)幾個要素組成的(如下圖所示)。
這些屬性我們可以把它轉移到我們日常生活中的盒子(箱子)上來理解,日常生活中所見的盒子也就是能裝東西的一種箱子,也具有這些屬性,所以叫它盒子模式。
盒子模型(Flexible Box) 屬性
1. 內容區(qū)域設定(content):
- width:寬度的設定
- height:高度的設定
寬度和高度的設定可以是具體的數(shù)值(帶單位),也可以是百分比設置。
2. 內邊距(padding)的設定:
- 盒子的內邊距分為上右下左四個方向
- 內邊距的設定用來控制盒子中裝載的內容到盒子邊緣(邊框)之間距離。
- 盒子的內邊距占據(jù)的是盒子里面的空間,最小為0,不允許出現(xiàn)負值。
屬性 | 說明 |
---|---|
padding | 使用簡寫屬性設置在一個聲明中的所有填充屬性 |
padding-bottom | 設置元素的底部填充 |
padding-left | 設置元素的左部填充 |
padding-right | 設置元素的右部填充 |
padding-top | 設置元素的頂部填充 |
(學習視頻分享:css視頻教程)
3. 外邊距(margin)的設定
- 盒子的外邊距分為上右下左四個方向
- 外邊距的設定用來控制盒子外圍四周的距離,不屬于盒子本身范疇
- 外邊距的主要用途是控制盒子的位置,所以可以出現(xiàn)負值
屬性 | 描述 |
---|---|
margin | 簡寫屬性。在一個聲明中設置所有外邊距屬性。 |
margin-bottom | 設置元素的下外邊距。 |
margin-left | 設置元素的左外邊距。 |
margin-right | 設置元素的右外邊距。 |
margin-top | 設置元素的上外邊距。 |
4. 邊框(border)的設定
-
大部分的元素對象在默認情況下是沒有邊框的
-
要設定邊框,必須同時設定3個要素:寬度、樣式和色彩。
- border 復合屬性
-
邊框按屬性要素分類的擴展屬性(border-width:邊框寬度;border-style:邊框樣式;border-color:邊框色彩)
屬性 | 描述 |
---|---|
border | 簡寫屬性,用于把針對四個邊的屬性設置在一個聲明。 |
border-style | 用于設置元素所有邊框的樣式,或者單獨地為各邊設置邊框樣式。 |
border-width | 簡寫屬性,用于為元素的所有邊框設置寬度,或者單獨地為各邊邊框設置寬度。 |
border-color | 簡寫屬性,設置元素的所有邊框中可見部分的顏色,或為 4 個邊分別設置顏色。 |
border-bottom | 簡寫屬性,用于把下邊框的所有屬性設置到一個聲明中。 |
border-bottom-color | 設置元素的下邊框的顏色。 |
border-bottom-style | 設置元素的下邊框的樣式。 |
border-bottom-width | 設置元素的下邊框的寬度。 |
border-left | 簡寫屬性,用于把左邊框的所有屬性設置到一個聲明中。 |
border-left-color | 設置元素的左邊框的顏色。 |
border-left-style | 設置元素的左邊框的樣式。 |
border-left-width | 設置元素的左邊框的寬度。 |
border-right | 簡寫屬性,用于把右邊框的所有屬性設置到一個聲明中。 |
border-right-color | 設置元素的右邊框的顏色。 |
border-right-style | 設置元素的右邊框的樣式。 |
border-right-width | 設置元素的右邊框的寬度。 |
border-top | 簡寫屬性,用于把上邊框的所有屬性設置到一個聲明中。 |
border-top-color | 設置元素的上邊框的顏色。 |
border-top-style | 設置元素的上邊框的樣式。 |
border-top-width | 設置元素的上邊框的寬度。 |