什麼是盒子?
html中的標籤(元素)統統都是乙個矩形的平面框, 在立體上, 它由多個平面構成, 這稱為盒子模型.
從底層到頂層的立體結構: margin->background-color->background-image->padding->content->border
三大盒子屬性:
border(邊框)
padding(內邊距)
margin(外邊距)
經驗:這三大屬性可以結合top right bottom left來使用!
當同時設定4個值時,遵循順時針順序: 上右下左, 如: padding: 9px 10px 11px 12px;
border: 邊框寬度(border-width) 邊框風格(border-style) 邊框顏色(border-color);
邊框風格: solid(實線), dashed(虛線), dotted(點線)
margin的特殊用法:盒子在其容器中水平居中.
margin-left: auto; margin-right: auto;
margin可以取負值, 但padding不可以.
部分元素有預設的內/外邊距:
body,h1-h6,p,ul,ol,dl,dd
box-sizing: content-box | border-box;
context-box的含義:
為盒子設定的width屬性僅表示內容區寬度, 實際寬度=width+padding+border
border-box的含義:
為盒子設定的width屬性就是實際寬度
為盒子設定的padding和border自動從width中扣除, 內容區寬度自動縮減.
border-radius: 圓角半徑;
border-top-left-radius: 左上角半徑
box-shadow: 陰影型別 x-offset y-offset blur-radius color;
陰影型別如果是inset, 表示陰影的方向是朝向盒子內
盒子模型理解
今天分享一下關於盒子模型的一些理解。在我看來盒子模型是一種為了方便程式設計師布局而定下的一種標準，在空間上規定乙個元素。content 內容區域，width和height就是給他的。padding 內邊距，因為在border內就叫他內邊距 這是我胡說的！與content無關，但background屬...
盒子模型的理解
標準盒子模型 從上圖可以看到標準 w3c 盒子模型的範圍包括 margin border padding content，並且 content 部分不包含其他部分。ie 盒子模型 從上圖可以看到 ie 盒子模型的範圍也包括 margin border padding content，和標準 w3c ...
盒子模型的理解
盒子模型有兩種 w3c和ie盒子模型 盒子模型包括margin border padding content w3c的元素寬度 content的寬度 ie的元素寬度 content padding border 我個人認為w3c定義盒子模型與ie定義的盒子模型，ie定義的比較合理，元素的寬度應該包含...