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