border-top(-width/-style/-color)
寬度 種類 顏色
border-right(-width/-style/-color)
寬度 種類 顏色
border-bottom(-width/-style/-color)
寬度 種類 顏色
border-left(-width/-style/-color)
寬度 種類 顏色
實際佔據寬度=width+左padding+右padding**+左border+右border**
實際佔據高度=height+上padding+下padding**+上border+下border**
普通盒模型的padding加上之後，實際寬度會撐大，因為他要保證內容區 尺寸不變
怪異盒模型的padding加上之後，實際寬度不變，因為計算機會計算減少內容區來保證整體寬高不變
怪異盒模型的實際寬度 只由 width決定
設定邊框
設定內邊距
overflow:hidden
給父級或者子集任何一方設定 float
給父級或者子集任何一方設定 定位
給父級或者子集任何一方設定為行內塊元素
注：子元素的外邊距負數 可以解除其父元素的內邊距效果
CSS盒模型概念及企業應用規則
是w3c規定乙個瀏覽器如何渲染 顯示乙個元素，根據元素的種類分為塊級元素盒模型和行內元素盒模型 1.width height content box 內容區 content box 存放塊級元素的內容 塊級元素的width和height值在標準盒模型下，定義了乙個塊級元素能夠存放內容的區域大小，元素...
前端面試 一面03 CSS盒模型
三 實際情況中的例項 四 延伸問題 思考接下來會怎麼延伸追問，做好心理準備 1 盒模型的基本概念 區別 2 怎麼應用2種盒模型 box sizing content box 預設標準模型 box sizing border box ie模型包含border padding 3 js怎麼獲取盒模型 c...
CSS 盒模型應用
預設情況下，width和height設定的是內容盒寬高 矛盾 衡量設計稿的時候往往使用的是邊框盒，但設定weight和height，則設定的是內容盒 方法 精確計算 css3屬性 box sizing 預設情況下，背景覆蓋邊框盒 可以通過background clip進行修改 background ...