盒子里的貓(盒子瀏覽器居中)

 | 

本篇文章給大家談談盒子里的貓，以及盒子瀏覽器居中的知識點，希望對各位有所幫助，不要忘了收藏本站喔。

文章詳情介紹：

盒子里的貓

你若喜歡點個贊

我是貓九

美圖壁紙頭像應有盡有

css盒子模型深入了解

行高：line-height行高是文字基線到基線的距離一行文字的行高當年等于父元素的高度時，文字垂直居中顯示當一個盒子沒有設置高度時，里面要有內容，可以用行高撐開盒子瀏覽器默認的字體大小是16px如果子元素沒有設置行高當行高數值由em、%為單位是，子元素的行高是繼承父元素的行高乘字體大小的結果當行高數值是px為單位時，子元素直接繼承父元素的行高當行高無單位直接是數值的時候，子元素行高是子元素的文字大小和子元素的行高相乘子元素設置行高的時候使用子元素的行高，不繼承（inherit）盒子模型總寬度：margin+border+margin+content外邊距：margin上下盒子都有外邊距會取大的包含的子盒子設置上外邊距會造成塌陷（給子盒子設置上外邊距后，父盒子會隨著子盒子同時向下移動），解決辦法是給父盒子設置overflow：hidden；或者個給父元素設置邊框（不推薦使用）內邊距：padding會撐大盒子尺寸會影響盒子的寬度繼承的盒子寬度不會被撐大，子元素的寬度如果是從父元素繼承來的，設置內邊距。盒子的寬度不會改變，但是僅在內邊距小于父盒子寬度的情況下生效，垂直方向上沒有此規則邊框：borderborder：寬度 樣式 顏色（沒有順序要求，樣式必須寫）邊框合并：border-collapse：sellapsetable的邊框覆蓋td的邊框內容：content盒子居中顯示：margin：0 auto；label：綁定標簽點擊"顯示文字"可獲取光標焦點，也可以執行：focus偽類，獲取焦點發生的樣式變換border：0 none：去掉邊框outline：none；去掉輪廓線FireWorks的基本應用

css盒子模型深入了解

行高：line-height行高是文字基線到基線的距離一行文字的行高當年等于父元素的高度時，文字垂直居中顯示當一個盒子沒有設置高度時，里面要有內容，可以用行高撐開盒子瀏覽器默認的字體大小是16px如果子元素沒有設置行高當行高數值由em、%為單位是，子元素的行高是繼承父元素的行高乘字體大小的結果當行高數值是px為單位時，子元素直接繼承父元素的行高當行高無單位直接是數值的時候，子元素行高是子元素的文字大小和子元素的行高相乘子元素設置行高的時候使用子元素的行高，不繼承（inherit）盒子模型總寬度：margin+border+margin+content外邊距：margin上下盒子都有外邊距會取大的包含的子盒子設置上外邊距會造成塌陷（給子盒子設置上外邊距后，父盒子會隨著子盒子同時向下移動），解決辦法是給父盒子設置overflow：hidden；或者個給父元素設置邊框（不推薦使用）內邊距：padding會撐大盒子尺寸會影響盒子的寬度繼承的盒子寬度不會被撐大，子元素的寬度如果是從父元素繼承來的，設置內邊距。盒子的寬度不會改變，但是僅在內邊距小于父盒子寬度的情況下生效，垂直方向上沒有此規則邊框：borderborder：寬度 樣式 顏色（沒有順序要求，樣式必須寫）邊框合并：border-collapse：sellapsetable的邊框覆蓋td的邊框內容：content盒子居中顯示：margin：0 auto；label：綁定標簽點擊"顯示文字"可獲取光標焦點，也可以執行：focus偽類，獲取焦點發生的樣式變換border：0 none：去掉邊框outline：none；去掉輪廓線FireWorks的基本應用

盒子里的貓咪

CSS盒模型使用技巧及相關問題

盒模型使用技巧及相關問題

margin相關技巧

1、設置元素水平居中： margin:x auto;

2、margin負值讓元素位移及邊框合并

理解練習

1、制作一個600*100的盒子，邊框1像素黑色，距離瀏覽器頂部100px，水平居中。

2、制作下面的菜單效果：

外邊距合并

外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。解決方法如下：

1、使用這種特性

2、設置一邊的外邊距，一般設置margin-top

3、將元素浮動或者定位

理解練習

使用div標簽制作如下布局:

margin-top 塌陷

在兩個盒子嵌套時候，內部的盒子設置的margin-top會加到外邊的盒子上，導致內部的盒子margin-top設置失敗，解決方法如下：

1、外部盒子設置一個邊框

2、外部盒子設置 overflow:hidden

3、使用偽元素類：

.clearfix:before{ content: ''; display:table; }

理解練習

分別使用margin間距和padding間距制作下面的例子：

盒模型的實際尺寸

按照下面代碼制作頁面：

盒子的真實尺寸

1

2

3

頁面顯示效果如下：

通過上面的頁面得出結論：盒子的width和height設置的是盒子內容的寬和高，不是盒子本身的寬和高，盒子的真實尺寸計算公式如下：

盒子寬度 = width + padding左右 + border左右

盒子高度 = height + padding上下 + border上下

理解練習

通過盒子模型的原理，制作下面的盒子：