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

 | 

本站AI自動(dòng)判斷提供您所需要的app下載：點(diǎn)我下載安裝，你懂的APP

本篇文章給大家談?wù)?a href="http://m.hljstys.com/t117993.html">盒子里的貓，以及盒子瀏覽器居中的知識(shí)點(diǎn)，希望對各位有所幫助，不要忘了收藏本站喔。

文章詳情介紹：

盒子里的貓

你若喜歡點(diǎn)個(gè)贊

我是貓九

美圖壁紙頭像應(yīng)有盡有

css盒子模型深入了解

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

css盒子模型深入了解

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

盒子里的貓咪

CSS盒模型使用技巧及相關(guān)問題

盒模型使用技巧及相關(guān)問題

margin相關(guān)技巧

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

2、margin負(fù)值讓元素位移及邊框合并

理解練習(xí)

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

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

外邊距合并

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

1、使用這種特性

2、設(shè)置一邊的外邊距，一般設(shè)置margin-top

3、將元素浮動(dòng)或者定位

理解練習(xí)

使用div標(biāo)簽制作如下布局:

margin-top 塌陷

在兩個(gè)盒子嵌套時(shí)候，內(nèi)部的盒子設(shè)置的margin-top會(huì)加到外邊的盒子上，導(dǎo)致內(nèi)部的盒子margin-top設(shè)置失敗，解決方法如下：

qq飛車手游捏臉數(shù)據(jù)男(能捏臉的手游有哪些) - 櫻花動(dòng)漫

1、外部盒子設(shè)置一個(gè)邊框

2、外部盒子設(shè)置 overflow:hidden

英雄無敵手游王朝殺敵日和英雄無敵手游戰(zhàn)爭紀(jì)元 - 櫻花動(dòng)漫

3、使用偽元素類：

魔域爭霸戰(zhàn)役攻略 - 櫻花動(dòng)漫

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

理解練習(xí)

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

盒模型的實(shí)際尺寸

按照下面代碼制作頁面：

盒子的真實(shí)尺寸

1

2

3

頁面顯示效果如下：

通過上面的頁面得出結(jié)論：盒子的width和height設(shè)置的是盒子內(nèi)容的寬和高，不是盒子本身的寬和高，盒子的真實(shí)尺寸計(jì)算公式如下：

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

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

理解練習(xí)

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