你知道网站上那些网页都是怎么排版的吗？为什么有的地方显示图片，有的地方却显示文字却不会乱吗?你知道做自己的网站我们需要哪些吗？关注我每天分享网页制作技巧.
说到网页制作，我们必须要知道网页布局的实质是什么其实就是摆放盒子的过程，那什么是盒子的摆放呢？网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列得整齐有序地展示在网站上呢？
认识盒子模型
我们都知道css学习三大重点： css 盒子模型 、 浮动 、 定位 盒子模型必须要懂不然你很难布局出一个网页 ，比如下面我截取的百度图片首页的网页布局 ，如果盒子模型被改变，那么整个网页就会错乱.
这是一个正常的百度图片网页
改变盒子模型和样式网页图文就会乱掉
所以我们如果要做好自己的网页就要看透网页布局的本质：
1. 首先利用CSS设置好盒子的大小，然后摆放盒子的位置。
2. 最后把网页元素比如文字图片等等，放入盒子里面。
只要知道了盒子模型的本质那我们就能随心所欲地，做出让我们满意的网页，随意搭配.
看完上面的对比我们明白了，盒子是网页布局的关键点，所以我们更应该弄明白 这个盒子有什么特点。
所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
这就是网页中的hemox
盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。盒子里面的文字和图片等元素是 内容区域盒子的厚度 我们成为 盒子的边框盒子内容与边框的距离是内边距（类似单元格的 cellpadding)盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）(1)盒子边框（border）
边框常用的样式有这三种分别是：
border-width ：盒子边框的宽度
border-style ： 盒子边框的样式 ， 实线(solid) ， 虚线(dashed) ， 点线(dotted) ，没有边框即忽略所有边框的宽度（默认值 none）
border-color: 边框的颜色
平时我们写边框样式的时候，可以简写：border: 5px solid red,这代表了一个宽度是5像素而且是红色的实线边框.
给一个宽高200的盒子加边框看看
在网页上就显示出一个红色5px的边框
注意：边框不一定四边都要显示，在实际的需求中，我们可能只显式三边，(top bottom left right)上边框不显示border-top-width设置为0,把上边框设置为0或none,就代表没有宽度，然后我们在网页上就看不到了.
(2)内边距（padding）
padding属性用于设置内边距。 是指 边框与内容之间的距离。当我们给盒子指定padding值之后， 发生了2件事情：
1. 内容和边框 有了距离，添加了内边距。
2. 盒子会变大了。
padding也是可以单独设置上下左右(top bottom left right)的值 比如 padding-left 只设置左边内边距
注意 padding ： 10px ； 表示的是上右下左都是10px ，padding: 10px 20px ； 表示的是上下各加10px ， 左右各加20px .
准备两个一模一样的200px的正方形盒子 , 一个给他加上内边距 ， 一个不加边距对比一下就会发现盒子会被内边距撑大
两个一模一样的盒子
盒子1加了padding比盒子2要大
盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框 所以我们设计网站盒子的时候要注意 , 如果美工给我们提供的是200像素的正方形盒子,我们就不能直接写width200 height200的样式,边框每边都是是5 内边距每边都是10 那盒子应该写成width170 和 height170的盒子170+5*2+10*2=200
主意:如果没有给一个盒子指定宽度width， 此时，如果给这个盒子指定padding， 则不会撑开盒子。
(3)外边距（margin）
margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离 , 不会影响盒子本身的大小 .
margin也是可以单独设置上下左右(top bottom left right)的值 比如 margin-left 左边外间距
注意 margin： 10px ； 表示的是上右下左都是10px ，margin: 10px 20px ； 表示的是上下各加10px ， 左右各加20px .
给盒子2(box2)加上边距10px
两个盒子中间就分开10px大小的间距
盒子模型只要知道这几点 , 那我们在制作自己的网站时就不会出现里面的内容乱掉,而是会整整齐齐,按照你想要的间隔 , 大小 ,去显示.
感谢关注,一起学习,一起交流.
如果觉得《要制作自己的网站这些你必须知道》对你有帮助，请点赞、收藏，并留下你的观点哦！
