（一）盒子模型
1.盒子模型是網頁製作中的重要的指導思想
2.盒子模型是網頁布局的基石
3.它認為頁面中所有元素都可以看做是乙個盒子，p div span a img
4.它認為可以通過設定盒子的屬性，進而改變盒子在頁面中的顯示效果
5.它認為頁面中的所有盒子是相互影響
1.寬度、高度
寬度width:屬性值為畫素值，或者是百分比
高度height:屬性值為畫素值，或者是百分比
border-style:設定邊框的型別，常用的屬性值為solid(實線)/dashed(虛線)/dotted（點線）/none(去掉邊框)
border-width:設定邊框的寬度，屬性值為畫素值，畫素值越大，邊框越粗
border-color:設定邊框的顏色,屬性值為單詞、十六進製制**、rgb/rgba
注意：邊框型別是必須項
上邊框：border-top
下邊框：border-bottom
左邊框：border-left
右邊框：border-right
值1：代表陰影水平方向上的位移距離，可以是正整數（向右移）、也可以是負整數（向左移）
值2：代表陰影垂直方向上的位移距離，可以是正整數（向下移）、也可以是負整數（向上移）
值3：代表陰影半徑
值4：代表陰影顏色
1.內邊距
上內邊距padding-top
下內邊距padding-bottom
左內邊距padding-left
右內邊距padding-right
padding: 5px;（上下左右都相同）
padding: 5px（上下） 10px（左右）
padding: 5px（上） 10px（左右） 15px（下）
padding：5px（上） 10px（右） 15px（下） 20px（左）
1.外邊距
上外邊距margin-top
下外邊距margin-bottom
左外邊距margin-left
右外邊距margin-right
注意：兩個元素上下間的距離不是求和關係，是取最大值,左右間的距離是求和關係
margin: 5px
margin:5px 10px
margin:5px 10px 15px
margin: 5px 10px 15px 20px
1.給父元素設定padding-top
2.給父元素加邊框
3.給子元素設定margin-top,同時給父元素設定padding-top:0.1px;
寬度=左邊框+左內邊距+內容的寬+右內邊距+右邊框
高度=上邊框+上內邊距+內容的高+下內邊距+下邊框
css盒子模型 前端系列 css盒子模型
1 盒子模型 下圖中可以看到，在設定width的時候，標準的盒子模型是不包括border和padding的，而在ie瀏覽器中是包括這兩項的。盒模型是有兩種標準的，乙個是標準模型，乙個是ie模型。標準模型中，盒模型的寬高只是內容 content 的寬高，預設正是w3c標準盒模型。而在ie模型中盒模型的...
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
css之盒子模型
一 前言 盒子模型，英文即box model。無論是div span 還是a都是盒子。但是，表單元素一律看作是文字，它們並不是盒子。這個很好理解，比如說，一張裡並不能放東西，它自己就是自己的內容。盒子中的區域 乙個盒子中主要的屬性就5個 width height padding border mar...