七 css系列之盒子模型

（一）盒子模型

1.盒子模型是網頁製作中的重要的指導思想 2.盒子模型是網頁布局的基石 3.它認為頁面中所有元素都可以看做是乙個盒子，p div span a img 4.它認為可以通過設定盒子的屬性，進而改變盒子在頁面中的顯示效果

5.它認為頁面中的所有盒子是相互影響

（二）盒子模型的屬性：寬度、高度、邊框、內邊距、外邊距

1.寬度、高度

寬度width:屬性值為畫素值，或者是百分比

高度height:屬性值為畫素值，或者是百分比

2.邊框border

border-style:設定邊框的型別，常用的屬性值為solid(實線)/dashed(虛線)/dotted（點線）/none(去掉邊框) border-width:設定邊框的寬度，屬性值為畫素值，畫素值越大，邊框越粗 border-color:設定邊框的顏色,屬性值為單詞、十六進製制**、rgb/rgba

注意：邊框型別是必須項

3.邊框的復合形式border:值1 值2 值3; border: 1px solid #000;

上邊框：border-top 下邊框：border-bottom 左邊框：border-left

右邊框：border-right

4.盒子陰影box-shadow：

值1：代表陰影水平方向上的位移距離，可以是正整數（向右移）、也可以是負整數（向左移）值2：代表陰影垂直方向上的位移距離，可以是正整數（向下移）、也可以是負整數（向上移）值3：代表陰影半徑

值4：代表陰影顏色

（三）內邊距（內填充、內補丁）:內容和邊框的距離；padding,屬性值為畫素值，值越大，距離越遠

1.內邊距

上內邊距padding-top 下內邊距padding-bottom 左內邊距padding-left

右內邊距padding-right

2.復合形式

padding: 5px;（上下左右都相同） padding: 5px（上下） 10px（左右） padding: 5px（上） 10px（左右） 15px（下）

padding：5px（上） 10px（右） 15px（下） 20px（左）

（四）外邊距（外補丁）：元素間的距離，屬性值為屬性值，值也越大，距離越遠

1.外邊距

上外邊距margin-top 下外邊距margin-bottom 左外邊距margin-left 右外邊距margin-right

注意：兩個元素上下間的距離不是求和關係，是取最大值,左右間的距離是求和關係

2.復合形式

margin: 5px margin:5px 10px margin:5px 10px 15px

margin: 5px 10px 15px 20px

（五）如果html元素是包含與被包含關係（即父子關係）時，給子元素設定margin-top會出現父元素同步下移問題，解決該問題的方法是

1.給父元素設定padding-top 2.給父元素加邊框

3.給子元素設定margin-top,同時給父元素設定padding-top:0.1px;

（六）盒子的實際寬度和高度

寬度=左邊框+左內邊距+內容的寬+右內邊距+右邊框

高度=上邊框+上內邊距+內容的高+下內邊距+下邊框

七 css系列之盒子模型

css盒子模型前端系列 css盒子模型

css盒子模型 CSS 盒子模型

css之盒子模型

七 css系列之盒子模型

css盒子模型 前端系列 css盒子模型

css盒子模型 CSS 盒子模型

css之盒子模型

相關推薦

css盒子模型前端系列 css盒子模型