CSS布局与定位

这个章节我个人认为最重要的一个章节。毕竟是关于整体方向的设计，所以，整好这一章势在必得！

文章整体布局

其中有三种方式交织而行，分别是文档流、浮动定位、层定位。
我们需要借助其来帮助实现网页的整体布局

文档流

总共有三个属性：block、inline、inline-block
接下来进行特点和应用的介绍

block

block元素的基本特性：

介绍一下标签是block元素的：

inline

inline元素的特性：

标签为inline元素的： span、a

inline-block

inline-block元素的特点以及常用标签 img

属性之间的转换display

如果想要将div区域水平排序，那么div明显是block元素，其为单行排序，此时我们该怎么办呢？
display会助你解决这个问题

仅仅需要加上
display:inline 或者 display:inline-block即可
但注意差别：inline不可设置width和height

简单应用

在进行a标签设计的过程中，总会有一些间隙

更正后为
使用的方法是在div标签上加上 font-size:0;

浮动定位

大概意思与上面将div区域水平排列效果相同，但其内容相对简单。

属性

使用float属性进行设计，操作较简单，所以看应用例子即可

应用

其实这一章我个人理解是很重要的，放个图来说明下。


对应一下博客的界面，是不是有种亲切的感觉
如上，我们可以利用浮动定位设置出一定的区域，即盒子。
应在规定的区域进行设计，如此可以提高效率和美观程度。同时每个区域之间应有一定的间距，此时可以使用margin外边距进行设计。

上图的代码为

css中的部分为
#container{
width:605px;
height:500px;
margin:0 auto;
/background-color:#6cf;/
}
#aside{
float:left;
width:150px;
height:500px;
background-color:#6cf;
}
#content{
float:right;
height:500px;
width:450px;
background:#cff;
margin-left:5px;
}

html的部分为：
<div id="container">
<div id="header" class="one">header</div>
<div id="main" >
	<div id="aside" class="two">aside</div>
	<div id="content" class="two">content</div>
</div>
<div id="footer" class="one"> footer</div>
</div>

一般都会有一个container，或者直接将网页看为也成。
接着是aside，通常为浏览菜单。放置在left
content为内容，放置在右半部分即可

层定位

层定位分为三类：固定定位、相对定位以及绝对定位

以及直接有left、right、top、bottom属性来进行网页内容位置的确定

固定定位

顾名思义，网页的内容会随着网页位置的变化而变化，例如下滑页面
而固定定位会将设计的内容固定在网页的位置

相对定位

直接相对于浏览器的定位，与绝对定位可以形成图片中镶嵌文字的等效果

绝对定位

相对于上一个非static元素的定位，即通常为relative元素的定位

应用

例二，仅需要将图片设置为相对定位，对文字采取绝对定位即可。

#box1{
position:relative;
width:350px;
height:300px;
margin:5px auto;
}
#box2{
position:absolute;
color:red;
font-size:30px;
bottom:0;
left:100px;
}

小结

这周学习的内容都是精华，挺受用的，后面慢慢学习的都是很有用的东西，希望自己越来越牛皮吧！
哈哈哈