了解box-model的重要性

了解box-model的重要性

可以把它想成一种容器,它可以容下多少物品的数量多寡或物品装在箱子里的概念。

  • width 宽
  • height 高
  • content 内容
  • padding 内距
  • margin 外距
  • border 框线

奇怪为什麽变大了是怎麽回事

实际宽高(WH)+左右padding的值2与上下padding值2
同理如设定border也是一样会去加上同样的公式

如想维持实际宽度,使用box-sizing

Content-box预设值

Border-box
加上padding 值与border的值 = 会去符合实际宽度(WxH)

参考文献

深入理解 CSS Box Model ( 盒子模型 )


<<:  Day 29-制作购物车之Redux 4

>>:  Day16 - 快速回顾 Finite State Machine, State Chart + 浅嚐 XState

创建App-讯息界面

创建App-讯息界面 今天进行讯息界面,本界面会使用Button、Text Field等基本UI来建...

Python for回圈

今天要来教大家for回圈,for回圈在Python也是常常会用到的一种语法,有时候我们会希望让程序中...

【DAY 20】数据分析没有这麽难,透过 Microsoft Power BI ,让你事半功倍!(更多共享 Power BI 仪表板技巧)

哈罗大家好~ 昨天我们初步了解如何制作一个简单的 Power BI 视觉化报表,让我们可以针对想要了...

聊系统文字工具与服务日志可视性浅谈的缘由

这系列只是这两年自己的工作学习笔记 内容相当的杂, 但希望藉由这次的铁人赛期间顺便复习 一开始会复习...

网路的小技巧-2

//兴趣记录一下~希望退休以後可以回味,各位别嫌弃,感谢各位!! //// //VLAN重要性,实作...