css布局

css布局

两列布局&三列布局

两列布局和三列布局指的是：

两列布局，一列固定，一列自适应

三列布局，两侧固定，中间自适应

两列布局可以在三列布局的基础上改。

三列布局

1. float + margin

html代码：

<div id="bd">
    <div class="main">main: this is some words.</div>       
    <div class="sub">Sub: this is some words.</div>
    <div class="extra">Extra: This is some words.</div>
</div>

css代码：

.sub {
    float: left;
    width: 100px;
    background-color: antiquewhite;
}

.extra {
    float: right;
    width: 200px;
    background-color: aquamarine;

}

.main {
    margin-left: 100px;
    margin-right: 200px;
    background-color: blueviolet;
} 

这是最直接的想法，通过浮动实现，左边栏左浮动，右边栏右浮动。 再对中间块添加边缘。

注意点：

书写顺序，先写两侧栏，再写主面板。

2. 圣杯布局

css代码：

.main {        
    float: left;       
    width: 100%;
    background-color: antiquewhite;   
 }  
 .sub {       
    float: left;        
    width: 190px;        
    margin-left: -100%;    /*sub是子元素， 当margin的值为百分数时，取决于父元素的宽度。*/           
    position: relative;  /*设置为relative再进行移动*/
    right: 190px;  /*再向左移动元素宽度的大小*/
    background-color: aquamarine;
}   
.extra {        
    float: left;        
    width: 230px;        
    margin-left: -230px; /*右移到边框位置，这里是因为父元素存在一个padding*/ 
    position: relative; 
    right: -230px;  /*通过相对移动到侧边位置*/
    background-color: violet;
 }
#bd {        
    padding: 0 230px 0 190px;   /*设置左右侧栏大小的padding*/
 } 

圣杯布局的核心在于，通过给父元素添加padding，通过设置margin来实现侧边栏的效果。其中涉及到的重点是，margin的使用方法：深入理解css中的margin属性

3. 双飞翼布局

圣杯布局的缺点是，当窗口缩小太多时，布局被破坏。

html代码：

<div class="main-wrap">
      <div class="main">#main</div>
</div>
<div class="sub"></div>        
<div class="extra"></div>

css代码：

.main-wrap {        
    float: left;       
    width: 100%;   
 }  
 .sub {       
    float: left;        
    width: 190px;        
    margin-left: -100%;   
    background-color: antiquewhite; 
}   
.extra {        
    float: left;        
    width: 230px;        
    margin-left: -230px; 
    background-color: aquamarine;
 }
.main {    
    margin: 0 230px 0 190px;
    background-color: violet;
} 

给main设置一个单独的内容块。相对于圣杯布局，省掉了相对布局的设定。

4. flex布局

html代码：

<div id="bd">
    <div class="main">main: this is some words.</div>       
    <div class="sub">Sub: this is some words.</div>
    <div class="extra">Extra: This is some words.</div>
</div>

css代码：

.bd {
    display: flex; /*父元素设置display*/
}
.main {
    flex: 1;  /*设置为填满*/
}
.aside {
    width: 200px; /*固定大小的侧边设置大小*/
}

参考代码：

CSS布局十八般武艺都在这里了

知乎问题：CSS布局中圣杯布局与双飞翼布局的实现思路差异在哪里？