盒子模型的组成
- 盒子模型包括:边框、内边距、外边距和实际内容,具体参见下图:
边框
- 边框由三部分组成,分别是:边框宽度,边框样式以及边框颜色,具体参见下表:
属性 | 说明 |
---|
border-width | 定义边框粗细,单位是px |
border-style | 定义边框的样式,主要记住:solid(实线)、dashed(虚线)、dotted(点线) |
border-color | 定义边框的颜色 |
- border:1px solid blue; (没有顺序)
- border-top:1px solid blue (没有顺序)
border-collapse:collapse ——表示相邻边框合并在一起
- 边框会额外增加盒子的实际大小,因此我们有两种方案解决:
- 测量盒子大小的时候,不要量取边框
- 如果测量的时候包含了边框,则需要width/height减去边框宽度
内边距
- padding属性用于设置内边距,即边框与内容之间的距离,具体参见下表:
属性 | 说明 |
---|
padding-left | 左内边距 |
padding-right | 右内边距 |
padding-top | 上内边距 |
padding-bottom | 下内边距 |
值的个数 | 说明 |
---|
padding:5px | 1个值,代表上下左右都有5px的内边距 |
padding:5px 10px | 2个值,代表上下内边距是5px,左右内边距是10px |
padding:5px 10px 15px | 3个值,代表上内边距是5px,左右内边距是10px,下内边距是15px |
padding:5px 10px 15px 20px | 4个值,上下左右内边距分别是5px 15px 20px 10px,顺时针 |
- 内边距会额外增加盒子的实际大小。如果想要保证盒子跟效果图的大小一致,则应该让width/height减去多出来的内边距大小。
- 如果盒子本身没有设置width/height属性,则此时padding不会撑开盒子大小。
外边距
- margin属性用于设置外边距,即控制盒子和盒子之间的距离,具体参见下表:
属性 | 说明 |
---|
margin-left | 左外边距 |
margin-right | 右外边距 |
margin-top | 上外边距 |
margin-bottom | 下外边距 |
1、外边距可以让块级盒子水平居中,但必须满足以下两个条件:
(1)盒子必须指定了宽度
(2)盒子左右的外边距必须都设置为auto,以下三种都可以:
— margin-left:auto; margin-right:auto;
— margin:auto;
— margin:0 auto;
3、行内元素和行内块元素水平居中的方法是:给其父元素添加 text-align:center
1、相邻块元素垂直外边距的合并
定义:当上下相领的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距取两个值中的较大者。
解决方案:尽量只给一个盒子添加margin值。
2、嵌套块元素垂直外边距的塌陷
定义:对于两个嵌套关系(父子关系)的块元素,父元素有上外边距,同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。
解决方案:
(1)为父元素设置上边框
(2)为父元素设置上内边距
(3)为父元素设置overflow:hidden
(4)浮动
(5)固定定位、绝对定位
微信公众号也会定期更新,觉得文章写得还可以的,可以加个关注!点个赞!谢谢!
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/519a72ace5d99fded6a966ebf7a89334.png#pic_center)