前端菜鸟的自学之路（二）——CSS网页布局

基础教程
HTML+HTML5
CSS+CSS3
文中涉及到的具体属性已添加参考手册中的相关说明，查看有助于理解记忆。

课程
网页布局基础
本文类似于课程笔记、课程回顾，最好结合视频一起食用，口味更佳。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>CSS Box Model</title>
 <style>
  #wrap{
   background-color:#7794C9;
   height: 1500px;
   margin: 0 auto;
   border: 1px solid #E85A90;
  }
 </style>
</head>
<body>
 <div id="wrap"></div>
</body>
</html>

代码平台
敲了代码无法预览，需要在浏览器和文本编辑器之间来回切换，下面介绍一个在线制作测试页面的网站——CodePen

页面自动居中一列布局

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS Layout</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrap">
  <header>
  </header>
  <nav>
  </nav>
  <div class="mainbody">
  </div>
  <aside>
  </aside>
  <footer>
  </footer>
</div><!--wrap-->
</body>
</html>

HTML页面的架构，包括头部、导航栏、主体、侧栏、页脚

/*
* 页面居中
*/
#wrap{
  background-color: #B0B1C7;
  width: 700px;
  height: 1300px;
  margin: 0 auto; /*根据浏览器的宽度自动设置两边的外边距 */
}
/*
* 页头部分的布局
*/
header{
  background-color:#144199;
  height:50px;
}
/*
* 导航栏的布局
*/
nav{
  background-color:#E85A90;
  height:60px;
}

/*
* 网页内容的布局
*/
.mainbody{
  background-color:#5D76B0;
  height:950px;
}

/*
* 侧边栏的布局
*/
aside{
  background-color:#2C72C7;
  height:200px;
}

/*
* 页脚的布局
*/
footer{
  background-color: #B33D5A;
  height: 40px;
}

1、将所有元素放进一个div里统一设置width跟margin属性
2、给各个元素分别设置width、margin属性
因为找的实例里有分别设置属性，暂时不明白为什么分开写。

横向两列布局
常见的布局，关键是float浮动属性 + overflow属性，float属性值指定浮动位置，overflow属性值hidden将溢出部分修剪隐藏。

之前的练习中为各个元素指定高度，在不添加内容时能直观的显示网页的布局。但是在有实际内容时，我们不需要指定高度，内容的高度就是容器的高度。在HTML文档mainbody中添加两个div块，分别设置css属性，浮动在容器的左右两侧，并在mainbody中添加关键属性overflow设置值hidden。

overflow:hidden;

多列布局：
利用margin属性设置间距。

清除浮动：

clear:both;

clear属性：清除元素左侧或右侧的浮动，适用于紧邻元素之间。

绝对定位布局
利用position属性来定位布局，position属性值有static静态的、relative相对的、 absolute绝对的、 fixed固定的。

position:relative;
top: 50px;
left: 50px;

相对偏移具有自身原有位置进行偏移、处于标准文档流、拥有偏移属性和z-index属性的特点。添加3个div块，设置box1的属性值

.box2{
  background-color: green;
  position:absolute;
}

设置绝对定位，不设置偏移量。
盒子的大小为内容大小。特点：建立以包含块为基准的定位，脱离标准文档流，拥有z-index属性和偏移属性。

设置偏移量

有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照基准
无已定位祖先元素，以html为参照基准

box2有已相对定位的祖先元素box1，设置偏移量

  position:absolute;
  top:20px;
  left: 20px;

无已定位的祖先元素
注意：如若祖先元素是静态定位，仍已html元素为基准进行偏移。

使用absolute实现横向两列布局
常用于一列固定宽度，另一列宽度自适应的情况。

父元素相对定位
自适应宽度元素绝对定位
注意：固定列的高度 > 自适应列的高度

.mainbody{
  background-color:#5D76B0;
  overflow:hidden;
  position:relative;
}

.box1{
  width: 450px;
  height: 50px;
  background-color: red;
  position: absolute;
  left: 250px;
}