你知道网站上的那些页面是如何布局的吗？为什么有的地方显示图片，有的地方显示文字不混乱？你知道我们制作自己的网站需要什么吗？我每天关注分享网页制作技巧。
说到网页制作，一定要知道网页布局的本质是什么，其实就是放盒子的过程。那么什么是盒子摆放呢？在网页的布局中，我们如何根据美工给我们的效果图，将网页中的文字和图片整齐有序的排列起来？
认识盒子模型
我们都知道css学习的三个关键点:css盒子模型，浮动定位盒子模型。否则你很难布局一个网页，比如我下面拍的图片首页的网页布局。如果改变了盒子模型，整个网页就会紊乱。
这是一个正常的图片网页改变盒子模型和样式网页图文就会乱掉所以要想把自己的网页做好，就要看透网页布局的本质:
1.首先用CSS设置盒子的大小，然后放置盒子的位置。
2.最后将文字图片等网页元素放入框中。
只要了解了盒子模型的本质，就可以随意做出令自己满意的网页。
看了上面的对比，我们明白了，盒子是网页布局的重点，所以要搞清楚这个盒子有什么特点。
所谓盒子模型:HTML页面中的布局元素被视为一个长方形的盒子，也就是内容的容器。
这就是网页中的he'mo'x该模型由元素的内容、边界、内边距和外边距组成。框内的文字、图片等元素就是内容区域，也是框的粗细。我们成为盒子的边框，盒子内容与边框的距离就是盒子边框的内边距。
有三种常见的边框样式，即:
Border-width:方框边框的宽度。
边框样式:方框边框、实线、虚线、点线的样式。如果没有边框，所有边框的宽度都将被忽略。
边框颜色:边框的颜色。
我们平时写边框样式的时候，可以缩写为:border: 5px solid red，表示宽度为5个像素的实心边框，颜色为红色。
给一个宽高200的盒子加边框看看在网页上就显示出一个红色5px的边框注意:边框不必显示在所有的四边。在实际需求中，我们可能只显式显示三个面。如果border-top-width设置为0，上边框设置为0或者无，就意味着没有宽度，然后我们在网页上就看不到了。
内部边距
Padding属性用于设置内部边距。指边框和内容之间的距离。在我们将填充值分配给盒子后，发生了两件事:
1.内容和边框之间有距离，加内边距。
2.盒子会变得更大。
填充也可以分别设置上下左右。例如，padding-left仅设置左内边距。
注意填充:10px表示上、右、下、左为10px，填充:10px 20px意思是上下加10px左右加20px。
准备两个相同的200px方形盒子，一个有内边距，一个没有边距。对比之后，你会发现盒子会被内边距放大。
两个一模一样的盒子盒子1加了padding比盒子2要大框的实际大小=内容的宽度和高度+内边距+边框。所以我们在设计网站盒子的时候，要注意。如果美工给我们提供一个200像素的方盒子，我们就不能直接写出widtp00 height200的样式。边框每边5，内边距10。盒子应该写成一个宽170，高170的盒子。170+5*2+10*2=200.
思路:如果没有指定一个盒子的宽度，这个时候，如果为这个盒子指定了padding，这个盒子就不会被打开。
边缘
Margin属性用于设置外部边距。边距是控制方框之间的距离，不会影响方框本身的大小。
边距也可以独立设置上、下、左、右，比如边距-左左外间距。
注意边距:10px表示上、右、下、左都是10px，边距:10px 20px意思是上下加10px左右加20px。
给盒子2加上边距10p'x两个盒子中间就分开10px大小的间距只要模型知道了这几点，那么当我们制作自己的网站时，里面的内容就不会乱七八糟，而是会按照你想要的间距和大小整齐的展示出来。
谢谢大家的关注，一起学习，一起交流。
