盒子模型

一個(gè)標(biāo)簽就是一個(gè)盒子，網(wǎng)頁(yè)布局看盒子的擺放位置。

盒子包括什么？

邊框（border）內(nèi)邊距（padding)外邊距（margin)內(nèi)容（content）；

邊框

border的屬性；粗細(xì) 風(fēng)格 顏色border-width，border-style，border-color

border-style:solid(實(shí)線）dashed（虛線）dotted(點(diǎn)線）none（默認(rèn)值沒有邊框）

可以簡(jiǎn)寫為：border:width style color;

按方向：border-top:width

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

邊框會(huì)影響盒子的實(shí)際大小；

邊框會(huì)額外增加盒子的大小，所以測(cè)量盒子的時(shí)候不用加上邊框。

內(nèi)邊距

padding邊框與內(nèi)容之間的。

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

內(nèi)邊距會(huì)影響盒子的實(shí)際值。

- 如果盒子已經(jīng)有了寬度和高度，此時(shí)再指定內(nèi)邊框，會(huì)撐大盒子。

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

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

外邊距

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

它能讓兩個(gè)塊級(jí)盒子水平居中：

---

margin:auto;

margin:0,auto;

margin:20px auto;

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

---

這是塊級(jí)元素，行內(nèi)塊元素為text-align:center;

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

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

方法：盡量給一個(gè)盒子加margin。

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

? ? 對(duì)于兩個(gè)嵌套關(guān)系（父子關(guān)系）的塊元素，父元素有上外邊距同時(shí)子元素也有上外邊距，此時(shí)父元素會(huì)塌陷較大的外邊距值。

方法

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

- 可以為父元素定義上內(nèi)邊距。

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

怎么清除默認(rèn)的邊距？

類似于圖上這種。

解決方法

*{margin: 0;padding: 0;}

?css的三大特性

層疊性

相同選擇器給設(shè)置相同的樣式，此時(shí)一個(gè)樣式就會(huì)覆蓋（層疊）另一個(gè)沖突的樣式。

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

繼承性

? ? CSS中的繼承: 子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式，如文本顏色和字號(hào)。恰當(dāng)?shù)厥褂美^承可以簡(jiǎn)化代碼，降低 CSS 樣式的復(fù)雜性。

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

行高的繼承性：

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

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

- 如果子元素沒有設(shè)置行高，則會(huì)繼承父元素的行高為 1.5

- 此時(shí)子元素的行高是：當(dāng)前子元素的文字大小 * 1.5

- body 行高 1.5 ?這樣寫法最大的優(yōu)勢(shì)就是里面子元素可以根據(jù)自己文字大小自動(dòng)調(diào)整行高

優(yōu)先級(jí)

當(dāng)同一個(gè)元素指定多個(gè)選擇器，就會(huì)有優(yōu)先級(jí)的產(chǎn)生。

- 選擇器相同，則執(zhí)行層疊性

- 選擇器不同，則根據(jù)選擇器權(quán)重執(zhí)行

通配符和繼承權(quán)重為0, 標(biāo)簽選擇器為1,類(偽類)選擇器為 10c, id選擇器 100, 行內(nèi)樣式表為 1000, !important 無(wú)窮大.

簡(jiǎn)單來(lái)說(shuō)，范圍越小，權(quán)重越大。

id選擇器>類選擇器>基礎(chǔ)選擇器。

前端日記：

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。