盒子模型
border:边框
margin:外边距
padding:内边距
盒子大小计算方式:
margin+border+padding+内容宽度
一、边框border
border有三部分组成:
- 粗细(单位px)
- 样式(分为dashed-虚线 solid-实线)
- 颜色
例:
border:2px solid red
二、外内边距margin与padding
**内外边距(妙用居中元素):
组合使用时:
顺时针计算,外边距举例:
1. margin:1px 2px 3px 4px
(上边距(top)1px 右边距(right)为2px 下边距(left)3px 左边距(bottom)4px)
2.margin:1px 2px 3px
上边距1px 左右2px 下3px
3.margin:0(上下为0) auto(左右对齐)
4.margin:0(表示所有边距为0)**
居中表示 margin:0 auto;
要求:
- 块元素
- 固定的宽度
最保守的方法:
margin:0 auto与text-align:center配合使用
三、圆角边框及盒子阴影
border-radius圆角边框
四个角,从左上角开始顺时计算
圆圈:圆角等于半径;
盒子阴影box-shadow
box-shadow与背景图像阴影一致
box-shadow:10px 10px 5px red;
效果图