CSS3布局模型分析

CSS布局模型实例分析

布局模型中经典布局有：

三栏或者二栏布局中主内容自适应宽度且侧栏主栏可随意换位置，本文将针对这个需求进行分析。

这次布局模型将从absolute+margin–>float+margin–>圣杯布局–>双飞翼布局–>flex弹性盒子布局

需要注意的点：在此说明一下。

1. 由于搜索引擎从上到下搜索的形式，所以建议把main放到aside前面去，主内容优先显示。
2. 注意清除浮动

html部分

<div class="wrap">
    <header>headerheader>
    <div id="content">
        <main>
            main<br>主栏
        main>
        <aside>aside<br>中文如果超过宽度会换行，对于连续的英文和数字超过不会自动换行。需要加上break-word:break-all;aside>
    div>
    <footer>footerfooter>
div>

1.absolute+margin

方法步骤

利用相对定位实现主栏和侧栏的位置。

aside设置position:absolute，相对于父元素#content定位。

aside{
  position:absolute;
  left:0;
  top:0;
  width:200px;
  background:green
}

main设置margin-left/right:210px;，为aside留出空间。main元素还是块级元素，宽度自动填充100%,自适应。

main{
    margin-left:210px;
    background:green;
}

以上是侧栏在左情况，若侧栏在右同样可以，只需css稍微改变。

aside{
  position:absolute;
  right:0;
  top:0;
  width:200px;
  background:green
}
main{
    margin-right:210px;
    background:green;
}

严重缺点：

absolute脱离文档流，不影响上下文，所以无法撑起父元素#content的高度，如果侧栏内容多于主栏内容（侧栏高度低于主栏高度），侧栏则会溢出父元素#content，这个问题无法修复。如下图所示：

2.float+margin

方法步骤

aside设置float

aside{
    float:left;
    width:200px;
    background:blue;
    word-break: break-all;/*连续的英文和数字不会自动换行，此处控制自动换行*/
}

main设置margin-left/right，为aside留出空间。main元素还是块级元素，宽度自动填充100%,自适应。

main{
    margin-left:210px;
    background:green;
}

敲完代码，查看结果，把aside放在右边也是一样，这并不是我们想要的，请看：

这个就是浮动换行问题，浮动元素必须放在正常元素的前面，所以html代码需要改。

<div class="wrap">
    <header>headerheader>
    <div id="content">
      <aside>aside<br>中文如果超过宽度会换行，对于连续的英文和数字超过不会自动换行。需要加上break-word:break-all;aside>  
      <main>
           main<br>主栏
      main>
    div>
    <footer>footerfooter>
div>

缺点：

不能实现主内容优先，因为浮动元素需放前，不然会浮动换行。

3.圣杯布局 float+负margin

以下以循循渐进方式讲述圣杯布局。

推导步骤

给aside和main都设成float;left； main宽度设成100%。

main{
    float:left;
    background:green;
    width:100%;
}
aside{
    float:left;
    width:200px;
    background:blue;
}

这样aside和main就成为了两行显示，main独占一行。

为aside设置负margin-left!!!

aside设 margin-left:-100%会上升到main栏左侧。margin-left:-210px；会上升到main栏右侧。

aside{
    float:left;
    width:200px;
    background:blue;
    margin-left:-100%;/*这里负margin要好好理解，-200就是上升在最右边，-100%就是上升在最左边。*/
}

但是你会发现侧栏挡住了主栏。

你想设置main的margin？那可不行，main的宽度100%，设置margin自己就跑出去了。

那么把main的父元素设置padding吧。

#content{
    margin-bottom:10px;
    padding-left:210px;
}

可是你发现aside也跟着空出位置来了，因为他也是#content的子元素，不是我们想要的。

给aside设置position:relative；相对自身进行位移。

aside{
    float:left;
    width:200px;
    background:blue;
    margin-left:-100%;/*这里负margin要好好理解，-200就是在最右边，-100%就是在最左边。*/
    position:relative;
    left:-210px;
}

把侧栏和主栏换位置也是可以的，只需改动css

#content{
    margin-bottom:10px;
    padding-right:210px;
}
aside{
    margin-left:-200px;/*这里负margin要好好理解，-200px就是在最右边，-100%就是在最左边。*/
    position:relative;
    right:-210px;
}

总结

圣杯布局可以实现主内容优先显示，也可以主栏、侧栏变位置，当然也可以防止溢出父元素。

1. main和aside全部float，aside宽度固定，main宽度自适应100%；
2. aside利用margin-left:-100%实现上升到main一栏的左侧，如果margin-left:-aside宽度 实现上升到main一栏的右侧。
3. 给父元素加（aside在左侧）padding-left:aside宽度;（aside在右侧）padding-right:aside宽度；
4. aside利用relative自身定位，相对自己移位。
5. 注意如果是三栏布局必须给body设置最小宽度，如果宽度小于一定值，右栏会掉下去的。min-width:2*左栏+右栏；

4.双飞翼布局

双飞翼布局为了实现以上效果，多加一个标签，即给main包裹了一个div，给div设置padding，让main留出位置给aside，这样aside就不用自身定位了，父元素也不用padding了。

    <div id="content">
        <main>
            <div id="inner">main<br>主栏div>
        main>
        
        <aside>aside<br>中文如果超过宽度会换行，对于连续的英文和数字超过不会自动换行。需要加上break-word:break-all;aside>
    div>

css代码：

#inner{
    margin-left:210px;
    background:green;
}

5.flex弹性盒子

如果你想让main和aside一样高怎么办呢？如图：

用flex弹性盒子解决。

给main和asdie父元素设display:flex;和flex-flow 给main设置flex:1,合理分配剩余空间。

#content {
    display: flex;
    flex-flow: row-reverse;/*如果是row(默认值)，则侧栏在右*/
}
main{
    flex: 1;/*按比例缩小或者放大，如果没有这一项就会是按照内容宽度显示*/
    background:green;
    margin-left:10px;
}
aside{
    width:200px;
    background:blue;
}

盒子满足以上所有优点，但是需要考虑兼容性问题。
在线演示
全部详细代码