盒子模型

2024-03-07 07:57:38

盒子实际大小=内容宽度和高度+内边距+边框

盒子的上下左右：with,height,style,color都是可以分别赋值的

合并单元格：我们在创建表格的时候感觉边框很粗，这是因为表格th，td之间没有合并，叠在在一起，此时我们可以通过css设置collapse让他们之间合并单元格：

table, th, td{
	boder: 1px solid pink;
	boder-collapse: collapse;
}

内边距（padding）

内边距指的是盒子到边框的距离，也就是内容与边框的距离

padding: 20px//代表左右上下都是20px
padding: 10px 20px//代表上下10px，左右20px
padding: 10px 20px 30px//代表上10  左右20		下30
padding：10px 20px 30px 40px//代表顺时针上右下左

设置了盒子的宽和高，padding会将盒子撑大，如果没没设置盒子的高和宽，而设置了盒子的父级标签的宽度，padding不会讲该盒子撑大，而只会压缩内容

小练习
如果一个盒子宽度为100，padding为10，边框像素为5，这个盒子实际宽度为：
100（本身宽度）+20（padding把盒子撑大10，但是左右撑大为20）+5（像素撑大10，但是左右撑大为10）=130

外边距（margin）

行内元素要照顾兼容性，尽量只设置左右外边距，因为上下有的浏览器会不起作用

相邻元素垂直外边距的合并问题：左右合并直接叠加，但是垂直方向的合并，如图所示，上面设置bottom为20px，下面盒子top设置10px，此时我们呈现的效果是相距20px。
说明了：垂直方向的合并，取两个值中的较大者