盒模型

盒模型

盒模型

width : <length> | <percentage>|auto|inherit

width

还有max-width 和 min-width属性。

height: <length> | <percentage>|auto|inherit

height

还有max-height和min-height属性

基本上只会对块级元素设置宽度和高度，对行级元素没有用。

padding：[<length>|<percentage>]{1,4} | inherit

padding

四个方向的默认顺序

四个方向的默认顺序

不同方向属性值的缩写
对面相等，后者省略，四面相等，只设置一个

padding值缩写

margin:[<length>|<percentage> | auto ]{1,4} | inherit

image.png

margin合并
毗邻元素取两者中最大的，如有重复则合并。

水平居中

水平居中

border

Border

圆角矩形

圆角矩形边框 border-radius

水平半径，垂直半径 顺时针

border-radius

内容超出了盒尺寸的情况

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 内外多阴影

outline
类似于border，但是没有四个方向，不占空间，在border之外

outline outline样例