盒子模型

一個標簽就是一個盒子，網頁布局看盒子的擺放位置。

盒子包括什么？

邊框（border）內邊距（padding)外邊距（margin)內容（content）；

邊框

border的屬性；粗細 風格 顏色border-width，border-style，border-color

border-style:solid(實線）dashed（虛線）dotted(點線）none（默認值沒有邊框）

可以簡寫為：border:width style color;

按方向：border-top:width

合并border-collapse: collapse; 表示相鄰邊框合并在一起

邊框會影響盒子的實際大小；

邊框會額外增加盒子的大小，所以測量盒子的時候不用加上邊框。

內邊距

padding邊框與內容之間的。

padding-left: 20px;padding-top: 30px;/* 復合屬性 *//* 上下左右 */padding: 5px;/* 上下5px左右10px */padding: 5px 10px;/* 上、左右、下、 */padding: 5px 10px 20px;/* 上右下左 順時針 */padding: 5px 10px 20px 30px;

內邊距會影響盒子的實際值。

- 如果盒子已經有了寬度和高度，此時再指定內邊框，會撐大盒子。

- 如何盒子本身沒有指定width/height屬性, 則此時padding不會撐開盒子大小。

要想讓與效果圖保持一致，就讓width/height減去內邊距。

外邊距

margin；保持盒子與盒子之間的距離。

它能讓兩個塊級盒子水平居中：

---

margin:auto;

margin:0,auto;

margin:20px auto;

margin-left: auto; ? margin-right: auto;

---

這是塊級元素，行內塊元素為text-align:center;

1、相鄰塊元素垂直外邊距的合并

? ? 當上下相鄰的兩個塊元素（兄弟關系）相遇時，如果上面的元素有下外邊距 margin-bottom，下面的元素有上外邊距 margin-top ，則他們之間的垂直間距不是 margin-bottom 與 margin-top 之和。取兩個值中的較大者這種現象被稱為相鄰塊元素垂直外邊距的合并。

方法：盡量給一個盒子加margin。

2、嵌套塊元素垂直外邊距的塌陷

? ? 對于兩個嵌套關系（父子關系）的塊元素，父元素有上外邊距同時子元素也有上外邊距，此時父元素會塌陷較大的外邊距值。

方法

- 可以為父元素定義上邊框。

- 可以為父元素定義上內邊距。

- 可以為父元素添加 overflow:hidden。

怎么清除默認的邊距？

類似于圖上這種。

解決方法

*{margin: 0;padding: 0;}

?css的三大特性

層疊性

相同選擇器給設置相同的樣式，此時一個樣式就會覆蓋（層疊）另一個沖突的樣式。

解決方法：就近原則，哪個近就選哪個樣式。

繼承性

? ? CSS中的繼承: 子標簽會繼承父標簽的某些樣式，如文本顏色和字號。恰當地使用繼承可以簡化代碼，降低 CSS 樣式的復雜性。

子代可以繼承父代的樣式。

行高的繼承性：

body {font:12px/1.5 Microsoft YaHei；}

- 行高可以跟單位也可以不跟單位

- 如果子元素沒有設置行高，則會繼承父元素的行高為 1.5

- 此時子元素的行高是：當前子元素的文字大小 * 1.5

- body 行高 1.5 ?這樣寫法最大的優勢就是里面子元素可以根據自己文字大小自動調整行高

優先級

當同一個元素指定多個選擇器，就會有優先級的產生。

- 選擇器相同，則執行層疊性

- 選擇器不同，則根據選擇器權重執行

通配符和繼承權重為0, 標簽選擇器為1,類(偽類)選擇器為 10c, id選擇器 100, 行內樣式表為 1000, !important 無窮大.

簡單來說，范圍越小，權重越大。

id選擇器>類選擇器>基礎選擇器。

前端日記：

我覺得自己不夠厲害，好累，時間不在我手上。

總結

以上是生活随笔為你收集整理的css前端日记之盒子模型-----一起去未来的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。