CSS三栏规划的完成要领总结（代码示例）【html5教程】

本篇文章给人人带来的内容是关于CSS三栏规划的完成要领总结（代码示例），有肯定的参考价值，有须要的朋侪能够参考一下，愿望对你有所协助。

关于前端来讲，规划也是必需控制的，一个好的规划能够让页面看起来更雅观。提到规划，那就不得不说CSS三栏规划。这是前端口试经常会问到的一个题目，算是基本题。所谓的三栏规划，平常是指摆布双方牢固中心自适应，或者是中心牢固摆布双方自适应。

摆布双方牢固中心自适应

圣杯规划

HTML构造设置

新建一个父元素，包括三个子元素：left、main、right（注重，main在写在前面，如许在页面衬着时会先加载中心，针对口试题优先加载中心部份）

style款式设置

1、父元素设置高度
2、三个元素均设置浮动
3、中心main部份定宽100%：width: 100%，摆布双方按产物需求设置宽高
4、左侧设置margin-left: -100%；右侧设置margin-right: -右盒子宽
5、父元素设置padding-left: 左盒子宽；padding-right: 右盒子宽
6、摆布盒子相对定位

<div class="container">
  <div class="main f">go aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead</div>
  <div class="left f"></div>
  <div class="right f"></div>
</div>
<style>
  body {
    min-width: 700px;
  }
  .container {
     height: 300px;
     padding: 0 200px 0 200px;
  }
  .f {
     float: left;
  }
  .main {
     width: 100%;
     height: 300px;
     background-color: cornflowerblue;
  }
  .left {
     width: 200px;
     height: 300px;
     background-color: indianred;
     margin-left: -100%;
     position: relative;
     left: -200px;
  }
  .right {
     width: 200px;
     height: 300px;
     background-color: lightgreen;
     margin-left: -200px;
     position: relative;
     right: -200px;
  }
</style>

该规划受内部元素影响而损坏规划的几率低，然则当浏览器屏幕减少的肯定水平时，摆布两侧的内容会掉下来，或发作堆叠征象。解决方案，给body加一个最小宽度（最少大于摆布两侧宽度之和）

双飞翼规划

与圣杯规划的思绪是一致的，只是有一些纤细的差异。

HTML构造设置

新建一个父元素，包括三个子元素：left、main、right（注重，main在写在前面，如许在页面衬着时会先加载中心，针对口试题优先加载中心部份）

style款式设置

1、父元素设置高度
2、三个元素均设置浮动
3、中心main部份定宽100%：width: 100%，摆布双方按产物需求设置宽高
4、中心main部份再加一个盒子inner，安排内容（与圣杯规划的不同点）
5、左侧设置margin-left: -100%；右侧设置margin-right: -右盒子宽
6、新增加盒子，inner，设置摆布padding或margin

<div class="container">
   <div class="main f">
      <div class=inner>go aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead</div>
   </div>
   <div class="left f"></div>
   <div class="right f"></div>
</div>
<style>
  .container {
     height: 300px;
  }
  .f {
     float: left;
  }
  .main {
     width: 100%;
     height: 300px;
     background-color: cornflowerblue;
  }
  .left {
     width: 200px;
     height: 300px;
     background-color: indianred;
     margin-left: -100%;
  }
  .right {
     width: 200px;
     height: 300px;
     background-color: lightgreen;
     margin-left: -200px;
  }
  .inner {
    padding: 0 200px 0 200px;
  }
</style>

本身浮动

HTML构造设置

新建三个元素：left、right、main（注重，main写在背面）

style款式设置

1、左盒子左浮动，右盒子右浮动
2、中心部份设置margin或padding值

<div class="left"></div>
<div class="right"></div>
<div class="main">我是中心内容我是中心内容我是中心内容我是中心内容我是中心内容我是中心内容我是中心内容我是中心内容我是中心内容我是中心内容</div>
<style>
    .main {
        margin: 0 200px 0 200px;
        background-color: red;
        height: 200px;
    }
    .left {
        float: left;
        width: 200px;
        background-color: blue;
        height: 200px;
    }
    .right {
        float: right;
        width: 200px;
        background-color: pink;
        height: 200px;
    }
</style>

CSS3新特征：flex

HTML构造设置

新建一个父元素，包括三个子元素：left、main、right（注重，main写在中心）

style款式设置

1、父元素设置宽度为100%，display: flex；
2、摆布两则按产物需求设置宽高
3、中心部份设置flex: 1；

<div class="container">
  <div class="left"></div>
  <div class="main">我是中心内容我是中心内容我是中心内容我是中心内容我是中心内容我是中心内容我是中心内容我是中心内容我是中心内容我是中心内容</div>
  <div class="right"></div>
</div>
<style>
    .container {
       width: 100%;
       height: 200px;
       display: flex;
   }
   .main {
       flex: 1;
       background-color: red;
       height: 200px;
   }
   .left {
       width: 200px;
       background-color: blue;
       height: 200px;
   }
   .right {
       width: 200px;
       background-color: pink;
       height: 200px;
   }
</style>

另有其他的写法，这里就不逐一赘述，只是列举了一些比较经常使用的，以及口试可能会问到的状况。CSS3另有许多好玩的特征，在工作和进修的过程当中值得深入研究。

中心牢固摆布双方自适应

浮动 + 负边距 （圣杯规划）

HTML构造设置

新建一个父元素，包括三个子元素：left、main、right（注重，main写在中心）

style款式设置

1、摆布双方各占50%的宽度
2、左侧负边距 margin-left 占中心p宽度的一半
3、右侧负边距 margin-right 也占中心p宽度的一半

 <div class="container">
   <div class="left"></div>
   <div class="main">我是中心内容</div>
   <div class="right"></div>
 </div>
 <style>
    .main {
        width: 100px;
        text-align: center;
        float: left;
        background-color: lightgreen;
        height: 300px;
    }
    .left {
        height: 300px;
        float: left;
        width: 50%;
        margin-left: -50px;
        background-color: pink;
    }
    .right {
        height: 300px;
        float: right;
        width: 50%;
        margin-right: -50px;
        background-color: cornflowerblue;
    }
 </style>

CSS3新特征：flex

HTML构造设置

新建一个父元素，包括三个子元素：left、main、right

style款式设置

1、父元素设置display: flex；flex-direction: row；
2、摆布设置flex-grow: 1，中分盈余空间

 <div class="container">
   <div class="left"></div>
   <div class="main">我是中心内容</div>
   <div class="right"></div>
 </div>
 <style>
    .container {
        display: flex;
        flex-direction : row;
    }
    .main {
        width: 200px;
        height: 300px;
        text-align: center;
        background-color: lightgreen;
    }
    .left {
        height: 300px;
        flex-grow: 1;
        background-color: pink;
    }
    .right {
        height: 300px;
        flex-grow: 1;
        background-color: cornflowerblue;
    }
 </style>

CSS3特征 calc(四则运算)

用于动态计算长度值。须要注重的是，运算符前后都须要保存一个空格，比方：width: calc(100% - 50px)。

HTML构造设置

新建一个父元素，包括三个子元素：left、main、right

style款式设置

1、父元素设置100%宽；
2、摆布设置width: calc(50%, - 中心宽/2)

 <div class="container">
   <div class="left"></div>
   <div class="main">我是中心内容</div>
   <div class="right"></div>
 </div>
 .container {
     width: 100%;
     height: 300px;
 }
 .f {
     float: left;
 }
 .main {
     width: 100px;
     text-align: center;
     background-color: lightgreen;
     height: 300px;
 }
 .left {
     height: 300px;
     background-color: pink;
     width: calc(50% - 50px);  /*中分中心部份的宽度*/
 }
 .right {
     height: 300px;
     background-color: cornflowerblue;
     width: calc(50% - 50px);  /*中分中心部份的宽度*/
 }

路漫漫其修远兮，没有他人聪明，那就锲而不舍努，置信功在不舍。天天提高一点点，总有一天会迈进一大步。

以上就是CSS三栏规划的完成要领总结（代码示例）的细致内容，更多请关注ki4网别的相干文章！