前言
一顿操作猛如虎，到头一看二百五。基础不牢固，项目不爱你。这话说的确实挺对，这篇文章会讲到我碰到的两个让人头疼的问题，网页布局不合理，梦里盒子缠着你。
提示：以下是本篇文章正文内容，下面案例可供参考
一、网页布局
这个项目主要用到的就是单列布局，单列布局基本分为上中下三个部分：head区域常用于放置logo图片，搜索框，导航栏；main区域放置主要的展示内容，包含图片，文字等等；footer区域是网页的最底部区域， 一般情况下，footer会包含网站创作者的名称和联系方式，以及版权所属、工商局备案信息，以方便浏览者快速找到需要的内容。
单列布局（示例图）
二、盒子模型
css盒子模型本质上是一个盒子，封装周围的html元素，它包括：border边框、margin外边距、padding内边距和content实际内容。
1.border边框
以项目底部的版权信息区域为例，如果想要实现以下图片中的锯齿状效果，可以这样设置，上边框为一个5像素的白色虚线。
代码如下（示例）：
border-top: 5px dashed #fff;
效果如下（示例）：
2.margin外边距
margin属性用于设置外边距，即控制盒子和盒子之间的距离。以项目中的人物展示为例，想要每个人物中间都保持一样的间隔距离，就可以给其设置外边距。
代码如下（示例）：
/* 给上排后面两个盒子设置 */
margin-left: 50px;
/* 给所有6个盒子设置 */
margin-bottom: 20px;
效果如下（示例）：
3.padding内边距
padding属性用于设置内边距，即边框与内容之间的距离。以项目的表单为例，中间的表格部分内容和外面边框的距离这样设置。
代码如下（示例）：
padding-left: 42px;
padding-right: 21px;
padding-top: 50px;
padding-bottom: 64px;
效果如下（示例）：
总结
例如：以上就是今天要讲的内容，提醒一句：
盒子使用需谨慎，类命千万要规范，
padding和margin，一定别弄混，
papa男主内，很强壮，盒子有宽要撑开，
mama女主外,痴心人，一人只钟情一盒。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/6306.html
