CSS：盒模型

時間 2019-11-13

標籤 css 模型欄目 CSS 简体版

原文原文鏈接

在CSS中有兩種盒模型:html

(1)W3C標準盒模型：包括content(內容)，padding(內邊距：內容與邊框的距離)，border(邊框)；margin(與其餘元素的距離)，在此模型中，width/height(寬度和高度就是內容的寬和高)；htm

（2）IE下怪異模型：當html沒有寫<!doctype html>時，在IE6下就會開啓怪異模式，此時的寬度和高度（width/height）=content+padding+border;blog

eg:input

應用：容器

在父子盒子中，給子元素加padding想要移動子元素的位置，而不改變父元素的大小，能夠將標準模型轉化爲怪異模型（box-sizing:border-box;）;
eg:
結果：
box-sizing:border-box的應用:原生普通文本框<input >和文本域<textarea>的100%自適應父容器的寬度；width/border 和 padding 註定要共存，同時還要總體寬度 100%自適應容器。<input >，<textarea>都有border,並且須要padding的大小，不然輸入的光標會頂着邊框。自適應

解決: textarea{im

width:100%;d3

-ms-box-sizing:border-boxtextarea

box-sizing:border-box;margin

}
eg:
結果
box-sizing:改變width/height的做用細節；

內在盒子：content-box,padding-box,border-box,margin-box;默認狀況下width是做用在content-box上的，box-sizing的做用是把width做用的盒子變成其餘幾個；

{

box-sizing:content-box;//默認值

box-sizing:padding-box;//

box-sizing:border-box;//支持，此時，border和padding/content平分width

box-sizing:margin-box;//不支持
注意事項：絕對定位的元素，使用百分比設置其寬和高時，它參考的是其第一個定位非static祖先節點的padding-box;即width:padding+content