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

資訊專欄INFORMATION COLUMN

面試之盒模型

LiveVideoStack / 2396人閱讀

摘要：標準的的盒子模型與低版本的盒子模型有什么不同的標準盒子模型寬度內容的寬度與向內容外填充低版本盒子模型寬度內容寬度與向內容內填充標準盒子模型盒子模型上刺刀可以看出我們設置了屬性用來控制元素的盒子模型的解析模式，默認為的標準盒子模型，設

標準的CSS的盒子模型與低版本IE的盒子模型有什么不同的？

標準盒子模型：寬度=內容的寬度（content）+ border + padding + margin

       (border與padding向內容外填充)

低版本IE盒子模型：寬度=內容寬度（content+border+padding）+ margin

(border與padding向內容內填充)

標準盒子模型

IE盒子模型

上刺刀


box1

box2
可以看出我們設置了box-sizing

box-sizing屬性？
用來控制元素的盒子模型的解析模式，默認為content-box
context-box：W3C的標準盒子模型，設置元素的 height/width 屬性指的是content部分的高/寬，定義的寬度和高度之外繪制元素的內邊距和邊框
border-box：IE傳統盒子模型。設置元素的height/width屬性指的是border + padding + content部分的高/寬

適用場景
比如我們在寫一個頭部，background：gray，我們需要兩邊有10px的距離，如果設margin：0 10px的話，會發現兩邊有了間距，但是間距不是灰色背景，而且出現了滾動條，這個時候就需要我們的padding：0 10px,完美解決了兩邊留白的尷尬，但是滾動條還在，這就需要上大刀box-sizing:border-box;就會發現滾動條沒了，頭部也很美觀。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114731.html

相關文章

  • CSS入門之盒模型（六分之四）

    摘要：盒模型要點知識務必注意看，這可是前端面試必定會遇到的問題。盒模型的主要屬性，除繼承外有兩個值這里不再細說歷史原因，只說其作用。嚴格來說與標簽大小無關，但是影響視覺上的位置。具象化需調試指出，如下其中的最外圈的黃色區域就是了。 盒模型要點知識 務必注意看，這可是前端面試 必定會遇到 的問題。 box-sizing 盒模型的主要CSS屬性，除繼承外有兩個值： content-box...

    yearsj 評論0 收藏0

  • CSS入門之盒模型（六分之四）

    摘要：盒模型要點知識務必注意看，這可是前端面試必定會遇到的問題。盒模型的主要屬性，除繼承外有兩個值這里不再細說歷史原因，只說其作用。嚴格來說與標簽大小無關，但是影響視覺上的位置。具象化需調試指出，如下其中的最外圈的黃色區域就是了。 盒模型要點知識 務必注意看，這可是前端面試 必定會遇到 的問題。 box-sizing 盒模型的主要CSS屬性，除繼承外有兩個值： content-box...

    VPointer 評論0 收藏0

  • css之盒模型

    摘要：內容不會被修剪，會呈現在元素框之外。內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。規定應該從父元素繼承屬性的值。盒模型 1.定義 1.任意一個元素都可以當作盒模型 2.盒子的大小由內容寬高(width/height)+邊距(padding)+邊框(border) 3.盒子由外邊距(margin),影響盒子的位置 廣義盒模型:文檔中所有功能性及內容性標簽,及文檔中所有顯示性標簽. 狹...

    SKYZACK 評論0 收藏0

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

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

    cikenerd 評論0 收藏0

發表評論

0條評論

LiveVideoStack

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<