資訊專欄INFORMATION COLUMN
摘要：內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。規(guī)定應(yīng)該從父元素繼承屬性的值。
1.任意一個(gè)元素都可以當(dāng)作盒模型
2.盒子的大小由內(nèi)容寬高(width/height)+邊距(padding)+邊框(border)
3.盒子由外邊距(margin),影響盒子的位置
廣義盒模型:文檔中所有功能性及內(nèi)容性標(biāo)簽,及文檔中所有顯示性標(biāo)簽.
狹義盒模型:文檔中以塊級形式存在的標(biāo)簽(塊級標(biāo)簽擁有盒模型100%特性且最常用)border成員:border-left、border-right、border-top、border-bottom
border-style成員：border-left-style、border-right-style、border-top-style、border-bottom-style
| 風(fēng)格 | 解釋 |
|---|---|
| solid | 實(shí)線 |
| dashed | 虛線 |
| dotted | 點(diǎn)狀線 |
| double | 雙實(shí)線 |
| groove | 槽狀線 |
| ridge | 脊線 |
| inset | 內(nèi)嵌效果線 |
| outset | 外凸效果線 |
| 賦值個(gè)數(shù) | 方位 |
|---|---|
| 1 | 上下左右 |
| 2 | 上下|左右 |
| 3 | 上|左右|下 |
| 4 | 上|右|下|左 |
| 成員 | 解釋 |
|---|---|
| border-top-left-radius | 左上 方位 |
| border-top-right-radius | 右上 方位 |
| border-bottom-left-radius | 左下 方位 |
| border-bottom-right-radius | 右下 方位 |
賦值個(gè)數(shù)(值類型:長度或百分比):1 解釋為:橫縱
賦值個(gè)數(shù)(值類型:長度或百分比):2 解釋為:橫|縱格式:1/1 解釋為:橫向|縱向| 值 | |
|---|---|
| visible | 默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。 |
| hidden | 內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的。 |
| scroll | 內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。 |
| auto | 如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。 |
| 值 | 描述 |
|---|---|
| inline | 內(nèi)聯(lián) |
| block | 塊級 |
| inline-block | 內(nèi)聯(lián)塊 |
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1761.html
摘要：盒模型要點(diǎn)知識務(wù)必注意看，這可是前端面試必定會(huì)遇到的問題。盒模型的主要屬性，除繼承外有兩個(gè)值這里不再細(xì)說歷史原因，只說其作用。嚴(yán)格來說與標(biāo)簽大小無關(guān)，但是影響視覺上的位置。具象化需調(diào)試指出，如下其中的最外圈的黃色區(qū)域就是了。 盒模型要點(diǎn)知識 務(wù)必注意看，這可是前端面試 必定會(huì)遇到 的問題。 box-sizing 盒模型的主要CSS屬性，除繼承外有兩個(gè)值： content-box...
摘要：盒模型要點(diǎn)知識務(wù)必注意看，這可是前端面試必定會(huì)遇到的問題。盒模型的主要屬性，除繼承外有兩個(gè)值這里不再細(xì)說歷史原因，只說其作用。嚴(yán)格來說與標(biāo)簽大小無關(guān)，但是影響視覺上的位置。具象化需調(diào)試指出，如下其中的最外圈的黃色區(qū)域就是了。 盒模型要點(diǎn)知識 務(wù)必注意看，這可是前端面試 必定會(huì)遇到 的問題。 box-sizing 盒模型的主要CSS屬性，除繼承外有兩個(gè)值： content-box...
摘要：標(biāo)準(zhǔn)的的盒子模型與低版本的盒子模型有什么不同的標(biāo)準(zhǔn)盒子模型寬度內(nèi)容的寬度與向內(nèi)容外填充低版本盒子模型寬度內(nèi)容寬度與向內(nèi)容內(nèi)填充標(biāo)準(zhǔn)盒子模型盒子模型上刺刀可以看出我們設(shè)置了屬性用來控制元素的盒子模型的解析模式，默認(rèn)為的標(biāo)準(zhǔn)盒子模型，設(shè) 標(biāo)準(zhǔn)的CSS的盒子模型與低版本IE的盒子模型有什么不同的？ 標(biāo)準(zhǔn)盒子模型：寬度=內(nèi)容的寬度（content）+ border + padding + ma...
摘要：前端之盒模型顯隱定位與流式布局思想前端之盒模型顯隱定位與流式布局思想盒模型的顯隱盒模型的顯隱盒子的顯隱通過控制盒子的顯示方式來隱藏盒子該隱藏方式在頁面中不占位通過控制盒子的透明度來隱藏盒子該隱藏方式在頁面中占位注一般顯隱操作的盒子都是采用前端之盒模型顯隱、定位與流式布局思想 盒模型的顯隱 盒子的顯隱 .box, .wrap { ...
閱讀 3469·2019-08-30 13:15
閱讀 1405·2019-08-29 18:34
閱讀 832·2019-08-29 15:18
閱讀 3490·2019-08-29 11:21
閱讀 3252·2019-08-29 10:55
閱讀 3707·2019-08-26 10:36
閱讀 1875·2019-08-23 18:37
閱讀 1832·2019-08-23 16:57
