昨天写了公司官网的主页，有了UI图，接下来就是自己去实现。当时嘴贱，提了一手自适应，后面想到代码量太大，于是呼连忙拒绝，声称下次再加。
程序猿的人生可怜可悲，我只是一个实习生，在公司却拿来当web前端用，公司规模较小，只有我一个人搞web，重担自然落在我一人身上。
想想上月发了350大洋的工资，属实寒心，话不多说，这可能就是命，也不吐糟了。
这次的官网没有做自适应，下面来介绍其中的某些部分怎么做的：
1、清除内容和浏览器间留下的小空白：
body{
margin: 0;
}
2、解决相对定位relative盒子问题（对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。）：
margin-top: -40px; //取消相对定位relative，改用margin来控制盒子，这样就不会出来使用相对定位relative文档流中的位置仍然保留的问题。
3、解决Swiper轮播插件底部滚动条占用的问题（div代码和轮播图js初始化代码都要删除干净）：
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
4、对于内容部分使用百分比，缩小屏幕后小盒子内容溢出的问题（最外层盒子仍旧使用百分比，然后里面的内容套上一个固定宽度的盒子，再在里面的小盒子再进行百分比布局，这样在缩小屏幕的时候，里面的内容就不会跟这着屏幕缩小而导致内容溢出问题）：
<div class="footer-center1"> //宽度百分百，全屏背景颜色
<div class="footer1"> //设置固定宽度，使用margin: auto;居中
<div class="footer1-center1"> //小盒子百分比，并设置浮动
<div class="footer-logo">
公司LOGO
</div>
</div>
<div class="footer1-center2"> //小盒子百分比，并设置浮动
行行行行行行行<br />
公司名称：行行行行行行<br />
联系电话：嘻嘻嘻嘻<br />
客服邮箱：嘻嘻嘻嘻@163.com<br />
客服热线：行行行行行行行行行行<br />
公司地址：贵州省行行行行行行行行行行行行行1号楼6层2号、6号、7号房间<br />
</div>
<div class="footer1-center3"> //小盒子百分比，并设置浮动
关注我们
<div class="footer1-center3-1">
二维码
</div>
扫一扫关注我们
</div>
</div>
</div>
5、解决div内部div居中问题（对子盒子设定一个固定宽度，在不影响子盒子内容的情况下，用margin: auto;进行居中）：
width: 100px;
margin: auto;
6、解决文字内容居中（设置盒子的高宽，使用text-align: center;实现水平居中，使用 line-height: 100px;实现垂直居中，这是单行文本解决垂直居中的方法，文本的行高等于盒子的高度即可。）：
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
7、解决多行文本垂直居中的问题（table布局：利用display:table+display:table-cell的方法，父盒子设置display: table; 属性，子盒子设置display: table-cell;和vertical-align:middle;属性来进行文本的垂直居中）：
/*父盒子设置display: table; 属性*/
.middle-box{
display: table;
}
/*子盒子设置display: table-cell;和vertical-align:middle;属性来进行文本的垂直居中*/
.middle-inner{
display: table-cell;
vertical-align:middle;
text-align:center;
}
8、解决padding属性对宽高的影响（在对盒子使用padding之前，对盒子使用box-sizing: border-box;属性，这样设置的padding值只会在内部显示，不影响外部的大小）。
box-sizing: border-box; /*设置的padding值会在内部显示,不会影响外部大小*/
padding-top: 20px;
总体来讲页面没有什么难的，最简单的布局。
