盒模型的理解

Posted 2021-03-08 woniu-1

　　转眼已经是2020年的二月下旬了，一场疫情，改变了我之前的生活节奏。年过完了，疫情任然没有结束。在家隔离的这段时间，对我来说也是一个机会，因为不能出门反而使我能够静下心来安心认真的学习，学习充实了我的生活。最近我学习了盒模型，想和大家分享下对盒模型的理解，希望通过和大家的交流来补充自己的不足之处。

　　盒模型是css中一个重要的概念，是网页布局的基石，想要写好一个web项目，那就必须深入了解盒模型。

　　盒模型主要是由：

　　内容（content）、内填充（padding）、边框（border）、外填充（margin）这些属性而组成的

　　注：padding不能为负值

　　　　如果想让盒子保持原有的大小，需要在宽高的基础上减掉padding

　　　　如果一个盒子没有固定大小（背内容撑开），添加padding 不用减

 

　　盒模型计较类似于日常生活中的盒子，盒子有高度（height）、宽度（width）：

　　padding是内填充，就好像是快递盒子里包裹物品的泡沫或者塑料膜，填充物有大有小；

　　border是外面的边框，边框有大小和颜色，就好像盒子的厚度和颜色；

　　margin是外边距，就是盒子与盒子之间的距离。

　　

　　例如：
　　　　.box{
　　　　　　width: 200px;
　　　　　　height: 200px;
　　　　　　background: #ccc;
　　　　　　padding: 50px 100px;
　　　　　　border: 5px solid red;
　　　　　}

 　　　　　　　　　　　　

　　盒子的边框是5px，上下填充为50px，左右填充为100px，计算一个盒子模型的实际大小：
　　盒子模型的实际宽度:width+左右padding+左右border（width=200+2*100+2*5）
　　盒子模型的实际高度:hight+上下padding+上下border（hight=200+2*50+2*5）

　　最后：

　　2020年开端一个特殊的时间，疫情面前，我们要保持好心态，重防护、勤消毒，减少出门和聚会，保护好自己和家人，一起共渡难关、逆战到底！同时，向一直奋斗在一线的医护人员致敬，你们辛苦了，武汉加油，中国加油！