【WebFrontEnd】一个页面的多种HTML结构与多种CSS布局

第一次写文章，巧紧张！！！

这是一个很简单的布局，不过是个值得深思的问题。对于这种布局，能够有多种HTML、CSS写法，那么到底能够有多少种写法呢？

个人思路是根据HTML的不一样布局，写不一样的CSS。这里为了效果，因此都给元素添加了固定的高度。

一、第一种页面结构

1-一、第一种CSS布局：

这种写法是一个清除了浮动的父元素含有两个向左浮动的子元素，子元素各设置了宽度。

这里必定要给aside一个右外边距，否则两个元素就会贴在一块儿了。

这种写法的缺点是不够灵活，父元素和子元素和右外边距都是固定写死的，

若是父元素container宽度改变，aside宽度不变，边距不变，那么main的宽度要相应调整。

 1-二、第二种CSS布局：

这种写法是一个清除了浮动的父元素含有一个向左浮动的子元素，另外一个元素向右浮动，子元素各设置了宽度。

这种写法也是不够灵活，与第一种布局同理，不过这种写法aside元素能够不用写间距。

 1-三、第三种CSS布局：

这种写法是一个清除了浮动的父元素含有一个向左浮动的子元素并设置了宽度和右外边距，main元素不用浮动也不用管宽度，只是设置了overflow:hidden; _zoo:1;。

这种写法相对于第1、第二中写法灵活，main元素能够不用考虑设置宽度，当父元素宽度改变时，main元素宽度会自适应。

1-四、第四种CSS布局：

这种写法是一个清除了浮动的父元素含有一个向左浮动的子元素并设置宽度，main元素不用浮动也不用管宽度，只是设置左外边距。

 这种写法也是比较灵活啊，有木有！main元素自适应宽度，不用担忧。

1-五、第五种CSS布局：

这种写法是父元素设置了相对定位，其中一子元素设置决定定位，main元素不用设置浮动和宽度。这种方法我常常使用在这种情景。我查看了360导航网页，例如：

 

二、第二种页面结构

有时咱们也会把右边的主体内容放在上边，侧栏内容放在下面，这样有利于重要内容先读取。

2-一、对于这种布局，我暂时只想到一种CSS写法：

这也是左右浮动的两个元素。

三、第三种页面结构

这种布局相对于前两种布局复杂一些。

3-一、第一种CSS布局：

这种写法是两栏等高布局的写法，不过这种方法在IE6下有bug，aside不显示了。

以上这些不一样的方法涉及很多布局的知识点：

浮动、清除浮动、包含块、BFC、定位机制等等。

我以为没有最好的布局，只有适合的布局。在不一样的状况选择不一样的方法呗。

【扣扣儿】