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

資訊專欄INFORMATION COLUMN

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

K_B_Z / 847人閱讀

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

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

盒模型是有兩種標準的，一個是標準模型，一個是IE模型。

?從上面兩圖不難看出在標準模型中，盒模型的寬高只是內容（content）的寬高，

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

css如何設置兩種模型

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

1 /* 標準模型 */ 
2 box-sizing:content-box;
3 
4  /*IE模型*/
5 box-sizing:border-box;

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

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

測試參考案例

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

.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;(默認的可不寫)
}

應用在有用 bootstrap框架 的項目中發現bootstrap.min.css 樣式里默認?box-sizing: border-box; 會干擾搜索框的寬高

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

這個屬性導致頁面出現的樣子：

.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;
}

這個時候想要實現理想中的效果必須把樣式調整成：

.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技巧: 當一個容器寬度定義為 width:100%; ?之后，如果再增加 padding 或者 border 則會溢出父容器，是向外擴張的

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

?

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

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

相關文章

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

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

    Barry_Ng 評論0 收藏0

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

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

    ky0ncheng 評論0 收藏0

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

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

    blankyao 評論0 收藏0

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

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

    DataPipeline 評論0 收藏0

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

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

    miracledan 評論0 收藏0

發表評論

0條評論

K_B_Z

男|高級講師

TA的文章

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