[小工匠說CSS]-盒子模型-概述

java小工匠發表於2017-06-09
CSS模型

1、盒子型簡介

在HTML文件中任何元素，都可以看作是一個盒子，因此理解盒子模型非常重要。一個盒子包含 盒子的內容、盒子內邊距、盒子的邊框、盒子的外邊距。

image.png

最終元素的總寬度計算公式是這樣的：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距

2、瀏覽器相容性

W3C 的規範，元素內容佔據的空間是由 width 屬性設定的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。
  IE8 及更早IE版本不支援 填充的寬度和邊框的寬度屬性設。
解決IE8及更早版本不相容問題可以在HTML頁面宣告 <!DOCTYPE html>即可。

3、內聯元素與塊元素

div、h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容，即“塊框”。與之相反，span 和 strong 等元素稱為“行內元素”，這是因為它們的內容顯示在行中，即“行內框”。如果讓行內元素變成塊元素，通過將 display 屬性設定為 block。還可以通過把 display 設定為 none，隱藏元素，不在文件流中佔據空間。

4、CSS3 box-sizing

屬性值content-box
width=內容區寬度
height=內容區高度

 .test1{
     box-sizing:content-box; 
     width:200px;  
     padding:10px; 
     border:15px solid #eee; 
}
image.png

屬性值border-box
width=內容寬度+左填充+右填充+左邊框+右邊框
height=高度+頂部填充+底部填充+上邊框+下邊框

.test2{ 
    box-sizing:border-box; 
    width:200px;
    padding:10px; 
    border:15px solid #eee; 
}
image.png


相關文章