前端:margin、padding、float一篇文章彻底理解

时间:2023-02-20 12:56:57


系列文章目录

文章目录

  • ​​系列文章目录​​
  • ​​margin —— 意思是 边距​​
  • ​​margin的4个取值​​
  • ​​padding —— 意思是填充​​
  • ​​float —— 意思是浮动​​
  • ​​总结 —— 这些玩意要自己敲一下,然后去谷歌浏览器里面调一调就很好理解了​​

margin —— 意思是 边距

前端:margin、padding、float一篇文章彻底理解


正常情况下盒子之间实惠互相重叠在一起的

我们还可以根据谷歌浏览器自带的调试工具看到margin、padding的具体值,注意浏览器一般都会有默认的或者容错值

前端:margin、padding、float一篇文章彻底理解


前端:margin、padding、float一篇文章彻底理解


前端:margin、padding、float一篇文章彻底理解


前端:margin、padding、float一篇文章彻底理解


前端:margin、padding、float一篇文章彻底理解

margin的4个取值

前端:margin、padding、float一篇文章彻底理解

padding —— 意思是填充

前端:margin、padding、float一篇文章彻底理解


其实就是跟它的名字一样,就是填充

前端:margin、padding、float一篇文章彻底理解


前端:margin、padding、float一篇文章彻底理解


前端:margin、padding、float一篇文章彻底理解

float —— 意思是浮动

意思就是让盒子浮起来

如下

前端:margin、padding、float一篇文章彻底理解


前端:margin、padding、float一篇文章彻底理解

总结 —— 这些玩意要自己敲一下,然后去谷歌浏览器里面调一调就很好理解了