网页布局过程：
1：准备好相关的网页元素，也就是大大小小的盒子 2：利用CSS设置好盒子样式，将对不同的盒子摆放到对应的位置 3：将内容填充到对应的盒子中
盒子模型：
将html页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的html元素，它包括：边框，外边距，内边距，和文字内容
如下图所示：
边框：
border可以设置元素的边框，边框由三部分组成：边框宽度(粗细),边框样式，边框颜色
语法:
border：border-width||border-style||border-color
举例：
<style> div { border-width: 5px; border-color: blueviolet; } </style> </head> <body> <div>今天是2022年12月2日</div> </body>
注意：类似于上述实例中的这种指定盒子模型的方法是不对的，没有指定盒子的样式，其他指定的颜色和宽度也不会被显示出来。
修改上述，将盒子的边框设置为实线型：
border-style: solid;
显示如下：
对于边框的样式CSS提供了非常多：
none: 默认无边框 dotted: 定义一个点线边框 常用 dashed: 定义一个虚线边框 常用 solid: 定义实线边框 常用 double: 定义两个边框。 两个边框的宽度和 border-width 的值相同 groove: 定义3D沟槽边框。效果取决于边框的颜色值 ridge: 定义3D脊边框。效果取决于边框的颜色值 inset:定义一个3D的嵌入边框。效果取决于边框的颜色值 outset: 定义一个3D突出边框。 效果取决于边框的颜色值
边框的复合属性：
我们之前学过字体的复合属性写法，这种写法在边框属性设置过程中，同样适用。
边框复合属性写法：
border：边框宽度[单位是px] 边框样式 边框颜色;
这三个的属性值是没有先后顺序的，无论谁在前都不会影响最终的显示效果。
边框单边的设置：
语法：
border-top:设置上边框 border-right:设置右边框 border-left: 设置左边框 border-bottom: 设置下边框
举例：
<head> <style> div { border-top:antiquewhite 10px solid; border-right:blueviolet 15px dashed; border-left: chartreuse 5px dotted; border-bottom: 20px fuchsia inset; } </style> </head> <body> <div>今天是2022年12月2日</div> </body>
显示如下：
设置其中一条边框：该操作与层叠性有关
举例：
错误写法：
div { border-top:antiquewhite 10px solid; border:10px forestgreen dotted; }
显示如下：
样式被覆盖。
正确写法：
将要设置的边框写在下面，这样才能避免被覆盖掉要设置的样式
div { border:10px forestgreen dotted; border-top:antiquewhite 10px solid; }
显示如下：
设置表格的边框：
举例：
<head> <style> table{ width: 500px; height: 249px; } table,td{ border: 1px solid greenyellow; } </style> </head> <body> <table align="center"> <tr> <td></td> <td>周一</td> <td>周二</td> <td>周三</td> </tr> <tr> <td>早上</td> <td></td> <td></td> <td></td> </tr> <tr> <td>中午</td> <td></td> <td></td> <td></td> </tr> <tr> <td>晚上</td> <td></td> <td></td> <td></td> </tr> </table> </body>
显示如下：
在外观上，该表格基本达到了我们要设置的要求，但是仔细看，显示出来的单元格之间存在着空隙，那么我们怎么消除这种空隙呢？
这就要使用到border-collapse属性，它是用来控制浏览器绘制表格边框的方式，它控制相邻单元格的边框
语法：
border-collapse：collapse;//可将相邻边框合并在一起，产生1+1=1的效果
修改代码：
table,td{ border: 1px solid greenyellow; border-collapse: collapse; }
显示如下：
边框会影响盒子实际的大小：
边框会额外增加盒子的实际大小：
举例：
下述实例，我们设置div盒子的宽度为500px,高度为180px，对此盒子，我们给予的边框为10px:
div{ width: 500px; height: 180px; background-color: coral; border: 10px solid slateblue; }
通过调试工具测量该盒子的大小如下图所示，盒子的大小在初始设置的基础上还增加了边框的宽度。
因此，我们在测量盒子大小的时候，不需要去量边框，否则最终值会偏大，或者就是将边框也测量，最终使用width/height减去边框宽度
内边距(padding):
padding属性用于设置内边距，即边框与内容之间的距离：
举例：
还是上述实例，我们给div增加两个属性的设置：
div{ width: 500px; height: 180px; background-color: coral; border: 10px solid slateblue; padding-left:10px ; padding-top: 10px; }
显示如下：
文字举例盒子的左边和上边的距离都是10px
为了简化代码的量，padding也可以进行简写模式，不过和前面所讲的关于border以及font的复合属性值写法略有不同。
padding属性（简写属性）可以有1到4个值：
padding也会影响盒子的实际大小：
前面我么说到边框会影响盒子的实际大小，同样的，内边距也会影响盒子的实际大小
上述实例中，设置了内边距为上下是5px，而左右边距是10px：
div{ width: 500px; height: 180px; background-color: coral; border: solid slateblue; padding:5px 10px; }
此时我们通过调试工具去查看盒子实际的大小会发现，它在设置的width和height的基础上，还增加了padding的大小。
注意:左右被设置为10px,盒子在增加的时候，增加的是2*10，因为既包含左内边距也包含右内边距，上下同样也是
那么盒子被加大的这种现象，我们需要解决吗？
当然需要，目前是少数的盒子显示在同一个页面上，好像看不出来有什么缺点，但是，当页面涉及的盒子多了，如果多个盒子被无限的放大，那么就很有可能导致盒子放不下等现象，但是为了美观，我们想保留盒子的内边距，那么解决方案只有调整盒子的width和height，使用设置了的值减去内边距，这样就可以保证效果的完美展示，注意在减的时候，不要只顾左不顾右，顾上不顾下，四个内边距都应该被考虑进去。
设置padding的优点：
虽然padding会影响盒子的大小，但这并不是一件绝对的坏事，例如：
在网页的导航栏位置，不同的导航条中的文字个数并不是相同的，如果设置相同的宽度就会因为盒子中文字数量的不同导致显示出来的效果将会有所差异，如何保证不同文字个数的盒子内容也能居中显示在盒子中呢？此时，我们就需要用到padding属性。
方法就是不需要设置盒子宽度，直接设置padding的大小即可
padding在某些情况下并不会影响盒子的大小：
如果盒子本身没有指定width/height属性，则此时padding不会影响盒子的大小
未指定宽度：
举例：
div{ height:300px; background-color: blueviolet; padding: 10px; }
显示如下：
padding影响height属性的值，并未影响width的值，简单的说即为padding只影响设置了值的属性。
子元素并不会继承父元素的height属性：
举例：
<head> <style> div{ width:300px; height:300px; background-color: blueviolet; padding: 10px; } div p{ padding: 10px; background-color: bisque; } </style> </head> <body> <div><p></p></div> </body>
显示如下：
我们并未给div的子元素p标签设置width和height，但是通过显示效果发现，它继承了父元素的width,但并未继承父元素的height。
