边框与内容之间的距离叫内边距
非连写格式:padding-top、padding-right、padding-bottom、padding-left
连写格式:padding: 上 右 下 左;
可以省略:
注意点:
- **当指定一个 CSS 元素的宽度和高度属性时,设置的只是内容区域的宽度和高度。**如果给标签设置了内边距,那么整个标签所占高度和宽度也会发生变化
- 给标签设置了内边距后,内边距部分也会有背景
4 外边距
什么是外边距?
标签与标签之间的距离就叫外边距。HTML中行内元素间按了一个或多个空格或回车会有一个空格的效果,但那不是外边距
非连写格式:margin-top、margin-right、margin-bottom、margin-left
连写格式:margin: 上 右 下 左; 连写时省略的话和内边距一样
**注意点:**margin的合并现象
-
两个相邻行内块级元素的距离是左右外边距离相加的
-
两个相邻块级元素距离是上下两个元素外边距中大的那个
-
行内级元素设置 margin: top; 无效
-
上下margin的传递:
-
margin-top传递(需要掌握)
- 如果块级元素的顶部线和父元素的顶部线重叠,那么这个块级元素的margin-top值会传递给父元素
-
margin-bottom传递(了解即可)
- 如果块级元素的底部线和父元素的底部线重叠,并且父元素的高度是auto,那么这个块级元素的margin-bottom值会传递给父元素
-
如何防止出现传递问题?
- 给父元素设置 padding-bottom/padding-top
- 给父元素设置border
- 触发BFC: 设置父元素overflow为auto
-
建议:
- margin:用来设置兄弟元素之间的间距
- padding:用来设置父子元素之间的间距
5 块级元素的水平居中问题
text-align: center; 的作用:
- 给盒子设置,设置后盒子中储存的 文字/图片/超链接 等行内级元素水平居中
- 行内级元素包括:行内非替换元素(span/a…) + 行内替换元素(img/video/input…)+ inline-block
块级元素水平居中(块级元素默认占父元素的整行):
- margin: 0 auto; (相当于左右两边的 margin 都为 auto,浏览器就会把剩余空间平均分给 左右两边)
6 内容的宽度和高度
设置内容是通过宽度和高度设置的:
- 宽度设置: width
- 高度设置: height
注意: 对于行内级非替换元素来说, 设置宽高是无效的!
另外我们还可以设置如下属性:
- min-width:最小宽度,无论内容多少,宽度都大于或等于min-width
- max-width:最大宽度,无论内容多少,宽度都小于或等于max-width
- 移动端适配时, 可以设置最大宽度和最小宽度;
元素/盒子的宽度和高度
宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
高度 = 上边框 + 上内边距 + height + 下内边距 + 下边框
元素空间的宽度和高度
宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框 + 左外边距 + 右外边距
高度:同理
盒子的宽度和高度是除了margin以外的
关于 box-sizing:
CSS3中新增的一个属性,这个属性可以保证我们给盒子新增 padding 和 border 以后盒子元素的宽度和高度不变
- border-box 增加 padding 或 border 之后想要保证盒子元素的宽高不变,就必须减去内容部分的宽高。当属性设置为这个时,就是这么实现的
- content-box 默认情况下就是这种(设置 padding 或 border 会影响)
注意:
background设置的背景颜色包括整个盒子的宽度和高度部分(及除了margin以外的部分,你设个边框为dashed,再设置background就能看到background包含了border)
练习:大盒子宽度为500,小盒子宽度为300,让小盒子在大盒子中间
/*方法一*/
.box1{
width: 500px;
height: 500px;
background-color: red;
/* 增加内边距的同时设置 box-sizing */
padding: 100px;
box-sizing: border-box;
}
.box2{
width: 300px;
height: 300px;
background-color: blueviolet;
}
/*方法二*/
.box1{
width: 300px;
height: 300px;
![img](https://img-blog.csdnimg.cn/img_convert/2944e7866d0ef020f26f2300c9033525.png)
![img](https://img-blog.csdnimg.cn/img_convert/d2b07f7e56e27e93dd7d322ba73f9a0a.png)
![img](https://img-blog.csdnimg.cn/img_convert/85f1c52adc3d7c51d35be4248431488f.png)
**既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!**
3X-1725766372846)]
[外链图片转存中...(img-43tIS1zh-1725766372846)]
[外链图片转存中...(img-NX0yJNhX-1725766372846)]
**既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!**