CSS 七 盒模型

拿相框來作比較的話

盒模型

相框邊框- > border

畫和相框邊框的距離-> padding

相框之間的距離-> margin

這個和前面的p標籤的邊框的設定方法是類似的，也是3種方式

border-width 邊框寬度(粗細)

border-color 邊框顏色

border-style 邊框樣式

#outerbox1

#outerbox2
#outerbox3

用padding 設定內邊距

用margin 設定外邊距

#outerbox1

#outerbox2
#outerbox3

塊級元素：以乙個塊的形式展現，跟同級的兄弟塊依次豎直排列，左右撐滿，比如；

行內元素：以普通的乙個dom 節點展現，跟同級的兄弟元素橫向排列，排滿後，自動換行，比如；

指在不使用其他與排列和定位相關的特殊css 規則時，各種元素的排列規則；

marin-right + margin-left

style="margin-right: 10px;border: 1px red solid;">塊1span>

style="margin-left: 10px;border: 1px red solid;">塊2span>
2 塊級元素之間的豎直margin
style="margin-bottom: 10px;border: 1px red solid;">塊1div>

style="margin-top: 0px;border: 1px red solid;">塊2div>margin-bottom margin-top 以大的為標準 
3 巢狀盒子之間的margin
style="margin: 100px;border: 1px red solid;">塊1
style="margin-top: 20px;border: 1px red solid;">塊2div>
div>子塊的margin 將以父塊的內容為參考 
4 margin 屬性可以設定成負值 
會在相應的向左移動
style="margin-right: 10px;border: 1px red solid;">塊1span>
style="margin-left: -20px;border: 1px green solid;">塊2span>
 
css盒模型 標準盒模型 怪異盒模型
css 盒子模型 box model 每個html元素都可以看作是乙個盒子，父元素和子元素的關係就行大盒子裡放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...
CSS 盒模型和怪異盒模型
盒模型是css布局的基石,它規定了網頁元素如何顯示以及元素間相互關係,css定義所有元素都可以擁有像盒子一樣的外形和平面空間,即都包含內容區,補白 填充,內邊距 邊框,邊界 外邊距 下面說明了盒子模型 盒模型又分為標準盒模型 w3c標準 和怪異盒模型 ie盒模型 標準盒模型與ie盒模型的區別在於寬高...
css盒模型組成
css盒模型是本節教程的重點。前面幾個知識點，如果您會用 布局的話，就非常好理解和掌握了。這裡的盒模型是和table布局的乙個不同點。學 習web標準，首先要弄懂的就是這個盒模型，這就是div排版的核心所在。傳統的 排版是通過大小不一的 和 巢狀來定位排版網頁內容，改用css 排版後，就是通過由cs...