盒模型
盒模型
width : <length> | <percentage>|auto|inherit
width
還有max-width 和 min-width屬性。
height: <length> | <percentage>|auto|inherit
height
還有max-height和min-height屬性
基本上只會對塊級元素設(shè)置寬度和高度,對行級元素沒有用。
padding:[<length>|<percentage>]{1,4} | inherit
padding
四個方向的默認順序
四個方向的默認順序
不同方向?qū)傩灾档目s寫
對面相等,后者省略轴总,四面相等三热,只設(shè)置一個
padding值縮寫
margin:[<length>|<percentage> | auto ]{1,4} | inherit
image.png
margin合并
毗鄰元素取兩者中最大的睛藻,如有重復(fù)則合并。
水平居中
水平居中
border
Border
圓角矩形
圓角矩形邊框
border-radius
水平半徑碍侦,垂直半徑 順時針
border-radius
內(nèi)容超出了盒尺寸的情況
overflow
實際上還有overflow-x和overflow-y屬性
默認情況下width和height是content box粱坤,但是也可以改為border-box
box-sizing
box-sizing
盒子陰影
box-shadow :none | <shadow>[,<shadow>]*<shadow>:inset?&&<length>{2,4}&&<color>?
box-shadow
內(nèi)外多陰影
outline
類似于border隶糕,但是沒有四個方向,不占空間站玄,在border之外
outline
outline樣例