CSS3:box-sizing:不再為盒子模型而煩惱

阿新 • • 發佈：2019-01-02

題外話:

W3C奉行的標準,就是content-box,就是需要計算邊框,填充還有內容的;但是就我個人而言,
比較喜歡的是傳統IE6時候的怪異模式,不用考慮容器是否會被撐開(打亂佈局);

盒子模型差異

盒子大小計算原理

W3C標準盒子 = (邊框 + 填充 + 內容塊大小) ,牽一髮而動全身;
傳統IE6盒子 = 整體寬高(邊框,填充和隨盒子大小而調整變化)

若是計算佔用位置,兩種盒子都要算上margin(邊距)

簡言之,W3C標準盒子是需要相加各種大小得到總體的寬高,而傳統的IE6是從整體減去內在元素大小而達到調整效果

CSS3:box-sizing

box-sizing : content-box | border-box | inherit;

,針對火狐的還有個padding-box,幾乎不用啊!!!

content-box : 標準的W3C盒子模型
border-box: 傳統IE6的盒子模型
padding-box: 目前只對火狐生效,也是減去適應..但是從padding開始

驗證及效果

程式碼

簡易程式碼,三個盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>box-sizing</title>
    <style 
>
        .demo1,.demo2,.demo3{
            width:200px;
            height:200px;
            background-color: #2277AD;
            margin:20px;
        }
        .demo1{
            box-sizing: content-box;
            border:30px solid #12D732;
            padding:10px;

        }
        .demo2{
            box-sizing 
: border-box;
            border:30px solid #12D732;
            padding:10px;
        }
        .demo3{
            box-sizing: padding-box;
            border:30px solid #12D732;
            padding:10px;
        }
    </style>

</head>
<body>
    <div class="demo1">
        我是盒子內部的內容啊!!
    </div>
    <div class="demo2">
        我是盒子內部的內容啊!!
    </div>
    <div class="demo3">
        我是盒子內部的內容啊!!
    </div>
</body>
</html>

效果圖

標準模型的盒子大小(280X280) = 200 +10*2 + 30*2 — 相加效果

Demo1

傳統IE6盒子大小(200X200) = 120 + 10 * 2 + 30*2 — 減去效果

Demo2

針對火狐的padding-box盒子大小(260X260) = 180 + 10*2 + 30*2 –減去效果從padding開始

Demo3

總結

這個屬性支援IE8+,其他瀏覽器基本都支援了(應該很少人用非常老的FF,CHROME這些吧)
感覺border-box非常適合用來排版佈局,因為不用擔心內距填充這些導致盒子大於包裹層大小,導致換行,或者其他亂七八糟的問題
標準盒子也有他的好處,可以針對性的控制內容塊的大小..很細緻的做出調整,就是需要計算比較麻煩點

CSS3:box-sizing:不再為盒子模型而煩惱

題外話: W3C奉行的標準,就是content-box,就是需要計算邊框,填充還有內容的;但是就我個人而言, 比較喜歡的是傳統IE6時候的怪異模式,不用考慮容器是否會被撐開(打亂佈局); 盒子模型差異盒子大小計算原理 W3C標準盒子 =

css3基礎 box-sizing 設置盒模型(邊線與padding不改盒子的大小)

鍛煉 author har con ast 學習 tca padding set 禮悟：　　公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。　　

CSS盒模型全面講解，怪異模式盒模型，CSS3 box-sizing屬性

今天學習了一下css3的box-sizing屬性，順便又溫習了一下css的盒模型，最後覺得有必要對盒模型做一個全面整理。先不考慮css3的情況，盒模型一共有兩種模式，一種是標準模式，另一種就是怪異模式。當你用編輯器新建一個html頁面的時候你一定會發現最頂上都會有一個DOCTYPE標籤，例如： &

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

css 樣式 boot 適用於兩種參考理想設置寬高增加盒模型的組成大家肯定都懂，由裏向外content,padding,border,margin. 盒模型是有兩種標準的，一個是標準模型，一個是IE模型。從上面兩圖不難看出在標準模型中，盒模型的

CSS3 box-sizing的作用

pad 計算 lis list clas 屬性 css 寬度 borde 設置CSS盒模型為標準模型或IE模型。標準模型的寬度只包括content，二IE模型包括border和padding box-sizing屬性可以為三個值之一： content-box，默認值，b

#css3# box-sizing

box 默認數學計算 -s png 怎樣 add mode con box-sizing屬性讓css布局更容易並且更直觀。但是為什麽它有效又被熱愛，先讓我們看下它的歷史。盒子模型歷史自從css誕生，盒子模型就這樣默認的工作： width + padding + bor

逸管家中小企業不再為人才短缺而苦惱

png 統一中小企業 ffffff 沒有影響 mark 不可水平企業發展真正的資源其實是人才，而大多數中小企業不具備吸引人才的條件，中小企業人才流失卻是企業遇到的普遍問題，人才是企業發展的重要資本，人才具有的創造力是不可替代的。中小企業往往缺乏對人才培養的重視，不願

CSS3 Box-sizing屬性以及解決相容性的一些做法。

box-sizing是CSS3的box屬性之一。一說到CSS的盒模型（Box model）我想很多人都會比較煩，特別是對於新手，然而這個Box model又是我們CSS運用中比較重要的一個屬性。那麼CSS3的跟盒模型有什麼關係呢？第一句話就說了，Box-sizing是C

css3 box-sizing屬性（width,padding,border）

box-sizing屬性可以為三個值之一：content-box（default），border-box，padding-box。 content-box，border和padding不計算入width之內 padding-box，padding計算入width內 border-box，border和pad

還在為取快遞而煩惱嗎?智宇物聯助力自動快遞櫃

電子商務的快速發展促進了我國快遞業的升級與轉型。面對日益增長的對電子商務快遞的需求，許多快遞公司加入了物聯網的佈局，希望通過物聯網技術、智慧機器人和大資料量來提高運輸效率。智慧快遞櫃就是其中之一。隨著快遞行業的爆炸式增長，物聯網技術和物聯網技術的飛速發展，智慧卡物流裝置應運而生。智慧

css3偽元素選擇器和box-sizing盒子模型

要點： 1.偽元素選擇器寫法：E::before E::after （E代表元素，如下面的div元素為例）作用：在div中內容部分的最前面和最後面新增content屬性，文字內容可以為空。但是注意，content是行類元素，自己本身也是一個盒子，所以我們這裡可以使用相對定位。 2

box-sizing 盒子模型

light 包含 -s blank clas tps cnblogs borde tricks box-sizing盒子模型 box-sizing: border-box; /*這樣border包含在寬高裏*/ 詳細參考地址https://css-tricks.com

W3c盒子模型+IE盒子模型+box-sizing屬性

fault 部分 col 公式就是 space 內容高度增加 1.盒子模型有兩種，標準盒模型和IE盒模型，其中W3C標準的盒模型就是在網頁的頂部加上 DOCTYPE 聲明。（1）W3C標準的盒模型 W3C盒子模型包括4部分：margin，border，padding

【CSS】css 盒子模型以及 box-sizing屬性

css 盒子模型以及 box-sizing屬性在標準的盒子模型下，css中 width，padding以及border的關係關於css中的width和padding以及border的關係。在css中，width和height指的是內容區域的寬度和高度，增加pad

CSS3 盒子模型(box Model)和邊框(border)

1 CSS盒子模型首先來複習下CSS的box Model,box Model 是CSS+DIV佈局的靈魂所在，下面這張圖足以說明一切：元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距，外邊距預設

盒子模型和box-sizing屬性

1 前言今天被杭州有讚的前端面試官面了，很多問題一知半解。主要原因還是因為我這幾個月大多數時間都在寫專案，平常學習也是主要以框架為主，很多基礎知識都遺忘了。從這篇文章開始，我會記錄、學習和研究面試中遇到的問題。當然，一般都是關於前端開發的。第一篇文章

box-sizing:border-box,padding-box 顛覆盒子模型

<!DOCTYPE html> <html> <head> <title></title> <meta charset="gbk"> <style type="text/

【css3網頁布局】flex盒子模型

剩余空間新的 4.2 默認前綴 ron 實現 4.3 邊框 1.0 前言網頁布局（layout）是CSS的一個重點應用。經典布局類型：布局的傳統解決方案，基於盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對於那些特殊

CSS3盒子模型

mod 由於 htm gravity mark 分享邊框 -a borde 每一個HTML標記都可看作一個盒子；每一個盒子都有：邊界(margin)、邊框(border)、填充(padding)、內容(content)四個屬性；每一個屬性都包含四個部分：上、右、下

使用 CSS3 的 box-sizing 屬性設置元素大小包含 border 與 padding

lang htm tle 內部 p s itl css3 div char 默認情況下，內部元素（如：input）的寬度或高度，是不會包含元素的邊框和內邊距的，這是就需要使用 box-sizing 屬性設置該元素。 box-sizing 是 CSS3 的屬性，可以設置以

CSS3:box-sizing:不再為盒子模型而煩惱

題外話:

盒子模型差異

盒子大小計算原理

CSS3:box-sizing

驗證及效果

程式碼

效果圖

總結

相關推薦