小白入门前端必懂之盒子模型

yiyi爱编程 - 2021-08-17 22:06:37

---

你是不是开始入门前端的时候，总是对于网页布局有着神一样的向往，特别希望自己能赶紧做出像淘宝、京东等页面来，认为达到这种程度就离真正的前端不远了！

事实上呢，也确实是这样！?‍♀️

我们把一个初级入门的前端的能力，通常就定义为能不能完成主流网站的布局，这个事没问题了，再学上一点JS的能力，在那个时代你就是非常成熟的前端开发工程师了！

但是今天我们要讲的这话题到底跟布局有什么关系呢？
大家知道真正要实现布局，光靠HTML是远远不够的（当然上古时期有人用table布局的事咱们就不讨论了）
今天我们只需要搞懂两个问题就够了

问题一：首先什么是布局？
问题二：我们如何使用HTML+CSS实现网页的布局？布局是什么？

你应该知道，网页是网站开发者传递某些信息给用户的一种形式，比如B站的首页要有推荐视频、关注的人、广告、网站导航等等，这些信息想要通过一个页面显示出来，那么如何进行组织就是一个非常有学问的事了。

通常这个事一开始并不是由我们前端开发人员进行设计的，因为公司里面有个产品经理（没错就是老挨打的那个），他负责设计网页的基本信息，明确网站首页的基本结构。

然后交给UI/UE设计师，进行各个模块的整体设计和细节设计，达到用户真实看到的状态，这个过程就会形成设计稿，甚至很多公司还会做成高保真原型。（利用软件自动生成HTML网页，达到可以实际操作的水平，）听到这有同学就会害怕了，网页直接自动生成了，还要我干啥？

别担心，这些软件远远没有你聪明，他们生成的代码特别乱，执行效率也会特别低下，基本只靠演示使用，真正的网页还得你来做！
以上各个环节没问题，最终网页的布局也就确定了，每个模块该在什么位置，一清二楚。
以上就是网页布局的设计阶段！
那么接下来，就该你上场了！（什么？没搞错吧，说了这么多，才轮到我！）

盒子模型对布局的意义

我知道，这时候你肯定慌了！
WTF！！！
你们不会是要搞我吧~
哈哈，别担心，今天波哥就是要教你完成网页的布局，但是开始教你之前，还有两个事要说！
使用HTML+CSS实现网页布局有两种形式
一种是很古老的笨办法使用table进行布局，你肯定会说，这是什么鬼啊，table不是来做表格的吗？
是啊，没毛病，但是你想象下，如果把整个网页当成一个表格，表格套表格，是不是可以实现布局呢？
就像下面这样？

事实上，以前大家还真的就这么干，没办法，那时候条件艰苦啊！为了领到每个月的工资，再难也要上！

但是现在的你就不用有这个担心了，因为了后来出现了第二种办法，使用div布局。
听到这有的同学开始慌了！老师你再不讲盒子模型，我就不学了！哼！！！
好好好~
div布局其实就是利用盒子模型来进行布局，这样说你没有意见了吧！
但是丑话说在前头，只学会盒子模型对布局很有用，也很关键，但是要实现全部的布局，你还得学会浮动和定位两个技术才行哦！
这两个技术要看咱们后面的视频，记得关注收藏转发评论！关注我们领取《2021前端开发全套视频》

盒子模型的基本概念

首先你应该知道，DIV为代表的块级元素，他们默认应该是一个矩形，我们在进行网页布局的时候，无非就是通过控制网页中大大小小的矩形的摆放位置。
那么到底如何控制他们呢？我们看下这张图

你应该这么去理解：

绿色区域->外边距->margin属性->当前这个div距离其他元素的位置蓝色区域->边框->border属性->我们正常人理解的div矩形就是指这里黄色区域->内边距->padding属性->当前这个div距离内部元素的位置粉红区域->内容->content->div矩形里面的元素，可能只是一段文字，也可能是另一个div
为什么要这么划分？
接下来我们对比快递盒子本体和堆放的排列你就明白了！

你好好看看是不是一样一样的？

外边距->盒子距离外界元素的位置边框->纸箱的厚度内边距->盒子距离里面物品的位置内容->快递物件本身

我们再来看下把他们摆放起来是什么样子吧？
这不就是布局吗...（当然还需要用到浮动float）

记住盒子模型的属性和用法

基本上大家学到盒子模型的时候都已经掌握了border边框的用法，所以这里只说外边距和内边距就可以了！

margin的单独写法

margin-top: 10px;      /*距离顶部*/
margin-bottom: 30px;   /*距离底部*/
margin-left: 50px;     /*距离左边*/
margin-right: 100px;   /*距离右边*/

margin的简写方式

/* 简写方式：代表上下左右四个方向均设置成50px的间距 */
margin:50px;

/* 四个方向分别代表上、右、下、左，顺时针方向记住即可 */
margin: 50px 20px 10px 100px;

/* 控制四个方向，两组，上下和左右 */
margin: 50px 100px;

padding的单独写法

padding-top: 10px;      /*距离顶部*/
padding-bottom: 30px;   /*距离底部*/
padding-left: 50px;     /*距离左边*/
padding-right: 100px;   /*距离右边*/

padding的简写方式

/* 简写方式：代表上下左右四个方向均设置成50px的间距 */
padding:50px;

/* 四个方向分别代表上、右、下、左，顺时针方向记住即可 */
padding: 50px 20px 10px 100px;

/* 控制四个方向，两组，上下和左右 */
padding: 50px 100px;

总结

盒子模型只是解决了这div的间距和内边距的问题，只因为起了一个高大上的名字，迷糊了很多初学者！
以上只是对于盒子模型基本的概念，如果你对文中的内容有些许不了解，还可以看波哥关于盒子模型的直播视频。

https://www.bilibili.com/vide...

Tags 标签

前端html5css3javascripthtml

扩展阅读