国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css之盒模型

SKYZACK / 3581人閱讀

摘要：內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。規(guī)定應(yīng)該從父元素繼承屬性的值。

盒模型

1.定義

1.任意一個(gè)元素都可以當(dāng)作盒模型
2.盒子的大小由內(nèi)容寬高(width/height)+邊距(padding)+邊框(border)
3.盒子由外邊距(margin),影響盒子的位置
廣義盒模型:文檔中所有功能性及內(nèi)容性標(biāo)簽,及文檔中所有顯示性標(biāo)簽.
狹義盒模型:文檔中以塊級(jí)形式存在的標(biāo)簽(塊級(jí)標(biāo)簽擁有盒模型100%特性且最常用)

2.盒模型成員介紹

content
  • 通過(guò)設(shè)置width與height來(lái)規(guī)定content
  • 塊級(jí)標(biāo)簽可以設(shè)置自身寬高,默認(rèn)寬為父級(jí)寬(width=auto),高為自動(dòng)(由內(nèi)容撐開(kāi))
  • 內(nèi)聯(lián)標(biāo)簽不可以設(shè)置自身寬高,默認(rèn)均為自動(dòng)(由內(nèi)容撐開(kāi))
border
  • border(邊框)由border-width(寬度)、border-color(顏色)、border-style(風(fēng)格)三部分組成

  • border成員:border-left、border-right、border-top、border-bottom

  • border-width成員：border-left-width、border-right-width、border-top-width、border-bottom-width
  • border-color成員：border-left-color、border-right-color、border-top-color、border-bottom-color

  • 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 外凸效果線
margin
  • margin成員：margin-left、margin-right、margin-top、margin-bottom
  • margin整體設(shè)置
賦值個(gè)數(shù) 方位
1 上下左右
2 上下|左右
3 上|左右|下
4 上|右|下|左
  • 總結(jié):1.規(guī)定起始位置 2.順時(shí)針 3.不是找對(duì)面

3.邊界圓角

border-radius
  • border-radius成員
成員 解釋
border-top-left-radius 左上 方位
border-top-right-radius 右上 方位
border-bottom-left-radius 左下 方位
border-bottom-right-radius 右下 方位
  • 單方位設(shè)置
賦值個(gè)數(shù)(值類型:長(zhǎng)度或百分比):1  解釋為:橫縱
賦值個(gè)數(shù)(值類型:長(zhǎng)度或百分比):2  解釋為:橫|縱
  • 分向整體設(shè)置
格式:1/1  解釋為:橫向|縱向

4.其他相關(guān)屬性

  • max|min-width|height
  • overflow
值
visible 默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。
hidden 內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見(jiàn)的。
scroll 內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
auto 如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
inherit 規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。
  • display
值 描述
inline 內(nèi)聯(lián)
block 塊級(jí)
inline-block 內(nèi)聯(lián)塊

5.盒模型布局

盒模型布局基本介紹
  • 布局方位：margin-left、margin-right、margin-top、margin-bottom
  • 影響自身布局：margin-left、margin-top
  • 影響兄弟布局：margin-right、margin-bottom
  • 正向 / 反向：正值 / 負(fù)值
margin布局坑
  • 很多語(yǔ)義標(biāo)簽具有默認(rèn)margin
  • 父子標(biāo)簽margin-top重疊取大者
  • 兄弟標(biāo)簽margin-bottom、margin-top重疊取大者

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/1761.html

相關(guān)文章

  • CSS入門(mén)之盒模型（六分之四）

    摘要：盒模型要點(diǎn)知識(shí)務(wù)必注意看，這可是前端面試必定會(huì)遇到的問(wèn)題。盒模型的主要屬性，除繼承外有兩個(gè)值這里不再細(xì)說(shuō)歷史原因，只說(shuō)其作用。嚴(yán)格來(lái)說(shuō)與標(biāo)簽大小無(wú)關(guān)，但是影響視覺(jué)上的位置。具象化需調(diào)試指出，如下其中的最外圈的黃色區(qū)域就是了。 盒模型要點(diǎn)知識(shí) 務(wù)必注意看，這可是前端面試 必定會(huì)遇到 的問(wèn)題。 box-sizing 盒模型的主要CSS屬性，除繼承外有兩個(gè)值： content-box...

    yearsj 評(píng)論0 收藏0

  • CSS入門(mén)之盒模型（六分之四）

    摘要：盒模型要點(diǎn)知識(shí)務(wù)必注意看，這可是前端面試必定會(huì)遇到的問(wèn)題。盒模型的主要屬性，除繼承外有兩個(gè)值這里不再細(xì)說(shuō)歷史原因，只說(shuō)其作用。嚴(yán)格來(lái)說(shuō)與標(biāo)簽大小無(wú)關(guān)，但是影響視覺(jué)上的位置。具象化需調(diào)試指出，如下其中的最外圈的黃色區(qū)域就是了。 盒模型要點(diǎn)知識(shí) 務(wù)必注意看，這可是前端面試 必定會(huì)遇到 的問(wèn)題。 box-sizing 盒模型的主要CSS屬性，除繼承外有兩個(gè)值： content-box...

    VPointer 評(píng)論0 收藏0

  • 面試之盒模型

    摘要：標(biāo)準(zhǔn)的的盒子模型與低版本的盒子模型有什么不同的標(biāo)準(zhǔn)盒子模型寬度內(nèi)容的寬度與向內(nèi)容外填充低版本盒子模型寬度內(nèi)容寬度與向內(nèi)容內(nèi)填充標(biāo)準(zhǔn)盒子模型盒子模型上刺刀可以看出我們?cè)O(shè)置了屬性用來(lái)控制元素的盒子模型的解析模式，默認(rèn)為的標(biāo)準(zhǔn)盒子模型，設(shè) 標(biāo)準(zhǔn)的CSS的盒子模型與低版本IE的盒子模型有什么不同的？ 標(biāo)準(zhǔn)盒子模型：寬度=內(nèi)容的寬度（content）+ border + padding + ma...

    LiveVideoStack 評(píng)論0 收藏0

  • 前端（六）之盒模型顯隱、定位與流式布局思想

    摘要：前端之盒模型顯隱定位與流式布局思想前端之盒模型顯隱定位與流式布局思想盒模型的顯隱盒模型的顯隱盒子的顯隱通過(guò)控制盒子的顯示方式來(lái)隱藏盒子該隱藏方式在頁(yè)面中不占位通過(guò)控制盒子的透明度來(lái)隱藏盒子該隱藏方式在頁(yè)面中占位注一般顯隱操作的盒子都是采用前端之盒模型顯隱、定位與流式布局思想 盒模型的顯隱 盒子的顯隱 .box, .wrap { ...

    cikenerd 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<