盒子模型

什么是盒子?

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)

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, 表示阴影的方向是朝向盒子内