@HTML+CSS基础之一个简单页面的布局
HTML+CSS基础训练之做一个简单页面的布局
为了更好的学习WEB前端开发技术，本人将根据专业课所学以及自学的成果进行总结整理并实时更新分享！！
俺只是一名大二的小️第一次写文章 请大家多多海涵。
下面进入正题：布局是网页设计的基础中的基础，一个好的布局可以让人一目了然，一个失败的布局会让协同人员抓狂。所以前端开发，从布局开始。
一、任务介绍
如图所示：一个比较基础的居中布局。Body指的是窗口，contianer(红色线框)是真正页面的内容，让container保持在页面的居中的位置，可以假装在大屏幕和小屏幕保持一致，是目前页面布局的一种方法，目前还有使用这种布局方式有，腾讯网，新浪首页等。
二、分析布局
首先分析一下图片的布局 ，分析各个色块之间的嵌套关系
如图所示：红色的框包含的是整个页面的内容container，其中包含header、main 、footer 这三大部分（绿框）
header部分里包含logo部分
main在侧边有sider部分
三、HTML代码实现
根据以上的划分，我们已经知道这个页面的大概布局以及这个页面由 container、header 、main、footer、logo、sider六个元素构成。接下来就是html代码实现啦～
在这里我用的是div元素标签。
div可定义文档中的分区或节（division/section）。
div 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
html代码如下：
<body style="background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);">
<div class=" container ">
<div class="header ">
<div class=logo>logo
</div>
header</div>
<div class="main ">
<div class="sider ">sider</div>
</div>
<div class="footer ">footer</div>
</div>
</body>
四、CSS美化布局
代码如下：
.container {
height: 500px;
width: 600px;
margin: auto;
}
.header {
height: 100px;
background-color: #beebe9;
text-align: center;
line-height: 100px;
}
.logo {
height: 50px;
width: 80px;
background-color: #8ac6d1;
margin: 30px;
position: absolute;
text-align: center;
line-height: 50px;
}
.main {
height: 330px;
background-color: #fffdf9;
}
.sider {
width: 150px;
height: 330px;
background-color: #ffe3ed;
text-align: center;
line-height: 300px;
}
.footer {
height: 70px;
background-color: #8ac6d1;
text-align: center;
line-height: 100px;
}
1.其中用到了margin这一属性调整logo的位置并使container水平居中
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
例如：margin：auto
p
{
margin:2cm 4cm 3cm 4cm;
}
2.绝对定位和相对定位
在使用margin想让 logo在 header 垂直居中或者和header的上边界有一定距离，我一开始使用的magrin-top ：30px 但是并没有达到预想的样子，使用谷歌开发者工具，看到了此时的margin-top ：30px指的是logo到整个页面顶端的距离为30px，而不是我想要的到header顶端的距离。
解决方法：使用绝对定位。
相对定位：该元素相对于自己原有位置，偏移一定距离。相对的是自己。
绝对定位：该元素相对于其父元素，偏移一定距离。相对的是父元素，重点是这个父元素也需要是设置了position属性。从最近的父元素开始找，直到找到body位置为止。
而我的想法正好是logo元素相对于他的父元素header发生了偏移 ，所以使用绝对定位成功解决。
五、总结
以上主要是对完成任务过程的一个记录以及总结，文章比较浅显，希望随着以后的深入学习不断进步，如有错误尽请指正。
