一、.盒子模型(Box Model)组成
所谓盒子模型:就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器
CSS 盒子模型本质上是一个盒子,封装周围的 HTML 元素,它包括:边框、外边距、内边距和实际内容
二、边框(border)
(1)有默认值,默认颜色是黑色
(2)可以写多个颜色,以空格隔开
格式:
border:颜色,大小,样式;
border-top:颜色,大小,样式;
border-right:颜色,大小,样式;
border-bottom:颜色,大小,样式;
border-left:颜色,大小,样式;
注意: solid 实线
dashed 虚线
dotted 点状虚线
double 双线
三、边框会影响盒子的实际大小
边框会额外增加盒子的实际大小,因此我们有两种方案解决:
- 测试盒子大小的时候,不量边框
- 如果测量的时候包含了边框,则需要 width/height 减去边框宽度
四、内边框(padding)
格式: padding-top:xxpx; 上内边距
padding-right:xxpx; 右内边距
padding-bottom:xxpx; 下内边距
padding-left:xxpx; 左内边距
五、外边框(margin)
格式:
margin:xxpx; 外边距 指的是当前盒子和其他盒子之间的距离
margin-top :xxpx; 上外边距 盒子正值向下移动,负值向上移动
margin-right:xxpx; 右外边距 默认情况,设置margin-right是没有效果
margin-bottom:xxpx; 下外边距 盒子自己不动,挤下面的盒子移动,正值向下,负值向上
margin-left:xxpx; 左外边距 盒子正值向右移动,负值向左移动