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

資訊專欄INFORMATION COLUMN

淺談CSS3 box-sizing 屬性 有趣的盒模型

K_B_Z / 845人閱讀

摘要：盒模型的組成大家肯定都懂，由里向外盒模型是有兩種標(biāo)準(zhǔn)的，一個是標(biāo)準(zhǔn)模型，一個是模型。指定元素的寬度和高度最小最大屬性適用于的寬度和高度。

盒模型的組成大家肯定都懂，由里向外content,padding,border,margin.

盒模型是有兩種標(biāo)準(zhǔn)的，一個是標(biāo)準(zhǔn)模型，一個是IE模型。

?從上面兩圖不難看出在標(biāo)準(zhǔn)模型中，盒模型的寬高只是內(nèi)容（content）的寬高，

而在IE模型中盒模型的寬高是內(nèi)容(content)+填充(padding)+邊框(border)的總寬高。

css如何設(shè)置兩種模型

這里用到了CSS3 的屬性 box-sizing(默認(rèn)值：content-box)

1 /* 標(biāo)準(zhǔn)模型 */ 
2 box-sizing:content-box;
3 
4  /*IE模型*/
5 box-sizing:border-box;

content-box: 這是CSS2.1指定的寬度和高度的行為。指定元素的寬度和高度（最小/最大屬性）適用于box的寬度和高度。元素的填充和邊框布局和繪制指定寬度和高度除外

border-box: 指定寬度和高度（最小/最大屬性）確定元素邊框box。也就是說，對元素指定寬度和高度包括padding和border的指定。內(nèi)容的寬度和高度減去各自雙方該邊框和填充的寬度從指定的"寬度"和"高度"屬性計算

測試參考案例

理想中的效果和代碼如下圖：

.input {
    width: 146px;
    height: 36px;
    line-height: 36px;
    background: transparent;
    border: 2px solid #0D349A;
    color: #bdbdbd;
    padding-left: 10px;
    padding-right: 30px;
    font-size: 14px;
    box-sizing:content-box;(默認(rèn)的可不寫)
}

應(yīng)用在有用 bootstrap框架 的項目中發(fā)現(xiàn)bootstrap.min.css 樣式里默認(rèn)?box-sizing: border-box; 會干擾搜索框的寬高

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

這個屬性導(dǎo)致頁面出現(xiàn)的樣子：

.input {
    width: 146px;
    height: 36px;
    line-height: 36px;
    background: transparent;
    border: 2px solid #0D349A;
    color: #bdbdbd;
    padding-left: 10px;
    padding-right: 30px;
    font-size: 14px;
    box-sizing:border-box;
}

這個時候想要實現(xiàn)理想中的效果必須把樣式調(diào)整成：

.input {
    width: 190px;
    height: 40px;
    line-height: 40px;
    background: transparent;
    border: 2px solid #0D349A;
    color: #bdbdbd;
    padding-left: 10px;
    padding-right: 30px;
    font-size: 14px;
    box-sizing:border-box;
}

?

PS技巧: 當(dāng)一個容器寬度定義為 width:100%; ?之后，如果再增加 padding 或者 border 則會溢出父容器，是向外擴張的

如果使用該樣式，指定為?box-sizing: border-box; 則 padding 和 border 就不會再溢出，而是向內(nèi)收縮的，這個效果感覺非常實用的

?

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/1021.html

相關(guān)文章

  • 扯一下似乎被遺忘的盒模型

    摘要：不過想想，現(xiàn)在都讓微軟給退下了，還有多少呢。接著就是要提到的一點，盒模型的計算方式，標(biāo)準(zhǔn)方式和模式是不同的，不知道又想知道的同學(xué)請問谷哥或者度娘吧，記得幾年前我那本破書上也又提到，還做了一些測試。扯遠(yuǎn)了，盒模型大概的情況就是這樣。 前段時間為了組里在擴充人員，在面試的過程中有過幾次扯到盒模型這個東西。對于盒模型以前是經(jīng)常提到，現(xiàn)在被CSS3的風(fēng)頭給蓋下去了，已經(jīng)沒多少人去講盒模型，也導(dǎo)...

    Barry_Ng 評論0 收藏0

  • 深入css布局 (1) — 盒模型 & 元素分類

    摘要：深入布局盒模型元素分類在知識體系中，除了選擇器，樣式屬性等基礎(chǔ)知識外，布局相關(guān)的知識才是比較核心和重要的點。從元素的布局特性來分，主要可以分為三類元素塊級元素，行內(nèi)元素，行內(nèi)塊級元素。行內(nèi)級元素屬性取的元素。? 深入css布局（1）—— 盒模型 & 元素分類 ? ? ? 在css知識體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識外，css布局相關(guān)的知識才是css比較核心和重要的點。今天我們...

    ky0ncheng 評論0 收藏0

  • 深入css布局(1) — 盒模型 & 元素分類

    摘要：深入布局盒模型元素分類在知識體系中，除了選擇器，樣式屬性等基礎(chǔ)知識外，布局相關(guān)的知識才是比較核心和重要的點。規(guī)定元素和屬性是包含元素的邊框內(nèi)邊距內(nèi)容的。后來微軟也慢慢轉(zhuǎn)向了的標(biāo)準(zhǔn)，在以后支持了標(biāo)準(zhǔn)盒模型。行內(nèi)級元素屬性取的元素。 深入css布局（1）—— 盒模型 & 元素分類 ????在css知識體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識外，css布局相關(guān)的知識才是css比較核心和重...

    blankyao 評論0 收藏0

  • 《50道CSS基礎(chǔ)面試題（附答案）》中的答案真的就只是答案嗎？

    摘要：背景想想自己為什么要寫這個，難道不是因為這篇道基礎(chǔ)面試題附答案文章最近被轉(zhuǎn)載的多，比較多而湊熱鬧蹭熱點顯然，肯定是因為這樣我才打算寫的。繼承得到的樣式的優(yōu)先級最低。 背景 想想自己為什么要寫這個，難道不是因為這篇《50道CSS基礎(chǔ)面試題（附答案）》文章最近被轉(zhuǎn)載的多，比較多而湊熱鬧蹭熱點？顯然，肯定是因為這樣我才打算寫的。而且還有就是，我的公眾號也很久沒有更新了，微信說長期不更新會關(guān)掉...

    DataPipeline 評論0 收藏0

  • CSS中各種布局的背后(*FC)

    摘要：中各種布局的背后，實質(zhì)上是各種的組合。相反，一些塊容器盒，比如非替換行內(nèi)塊及非替換表格單元格，不是塊級盒。描述元素跟它的后代之間的影響。行盒行盒由行內(nèi)格式化上下文產(chǎn)生的盒，用于表示一行。彈性容器外和彈性項目內(nèi)的一切元素都不受影響。 CSS中各種布局的背后，實質(zhì)上是各種*FC的組合。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 FFC 和 GFC。 盒模型(Box M...

    miracledan 評論0 收藏0

發(fā)表評論

0條評論

K_B_Z

男|高級講師

TA的文章

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