浮動、盒模型

2、浮動屬性

語法：float:none(沒有浮動)/left（左浮動）/right（右浮動）；

有三種狀況float不生效

1）只給一個元素加了float時；

2）當寬+寬大於父級元素的寬時；

3）單詞寫錯；

說明：浮動對象會向左或者向右移動直到遇到邊框（border）、內補丁（padding）、外補丁（margin）或者另外一個塊元素爲止。

清除浮動屬性

clear:left/right/both（兩側）

 

盒模型

1、盒模型的概念和組成

盒模型是css佈局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義全部的元素均可以擁有像盒子同樣的外形和平面空間，即都包含邊框、邊界、補白、內容區，這就是盒模型。

2、padding的使用方法

填充：padding，在設定頁面中一個元素內容到元素的邊緣（邊框）之間的距離，也稱補白。

寫法：padding的屬性值的4種方式：

四個值：上右下左{padding:10px 20px 30px 40px;}

三個值：上 左右 下{padding:10px 20px 30px;}

二個值：上下 左右{padding:10px 20px ；}

一個值：四個方向{padding:2px;} 定義元素四周填充都爲2px

 

說明：可單獨設置一方向填充，如：padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;

用法：

1）用來調整內容在容器中的位置關係

2）用來調整子元素在父元素中的位置關係

注：padding屬性須要添加在父元素上。

3、margin的使用方法

邊界：margin,在元素外邊的空白區域，被稱爲邊距（邊界）。

margin值的做用：控制同輩元素之間的位置關係；

margin:0 auto;  定義元素在瀏覽器中橫向居中

margin可寫負值

4、border（邊框）的使用方法

做用：網頁中不少修飾性的線條都是由邊框來實現；

邊框寬度：border-width:2px;

邊框樣式：border-style:solid（實線）/dotted（點）/dashed（虛線）/double（雙邊線）/none(取消邊框）

邊框顏色：border-color:#ff0f0f;

縮寫：border:1px solid #f00;

可單獨設置一方向邊框，

如：border-bottom:邊框寬度 邊框風格 邊框顏色； 底邊框

border-left:邊框寬度 邊框風格 邊框顏色； 左邊框

border-right:邊框寬度 邊框風格 邊框顏色； 右邊框

border-top:邊框寬度 邊框風格 邊框顏色； 上邊框

 

盒子的實際大小

寬=左右margin+左右border+左右padding+width

高=上下margin+上下border+上下 padding+height

例如：一個盒子的margin爲20px,border爲1px,padding爲10px,content的寬爲200px,高爲50px

 

背景色能夠延伸到border區域