关于css:CSS三栏布局圣杯布局双飞翼布局和flex布局

三栏布局就是两边宽度固定, 两头自适应的布局.

扭转浏览器的宽度, 两边的宽度不会变, 只会两头区域的宽度变长变短.

实现三栏布局的办法有圣杯布局、双飞翼布局和 flex 布局

圣杯布局

成果:

html 代码:

<header>header</header>
<div class="main clear-fix">
    <div class="center"> 玩亚索 </div>
    <div class="left"> 睡觉 </div>
    <div class="right"> 吃饭 </div>
</div>
<div class="bottom">bottom</div>

这里把 center 区域放在第一位是为了让浏览器先加载 center 区域.

css 代码:

* {color: #fff;}
header {background-color: blue;}
.main {
    background-color: orange;
    padding: 0 100px; /* 左右两边的 padding 来搁置 left 和 right 区域 */
}
.left,.center,.right {float: left;}
.center {
    background-color: purple;
    width: 100%; /* 这会把 left 和 right 挤到下一行 */
}
.left {
    background-color: red;
    width: 100px;
    margin-left: -100%; /* 把 left 挪动到和 center 同一行并且右边对齐 */
    position: relative;
    left: -100px; /* 再向左挪动到 main 的 padding 区域, 就不会挡住 center 了 */
}
.right {
    background-color: grey;
    width: 100px;
    margin-left: -100px; /* 把 left 挪动到和 center 同一行并且左边对齐 */
    position: relative;
    left: 100px; /* 向右挪动到左边的 padding 区域 */
}
footer {background-color: pink;}
/* 革除浮动 */
.clear-fix::after {
    content: "";
    display: block;
    clear: both;
}

负边距 margin-left: 只会在包围住你的父元素外部进行挪动

position 联合 left: 是在元素原来地位的根底上挪动, 有可能挪动到浏览器显示区域的内部.

双飞翼布局

成果:

html 代码:

  <header>header</header>
  <div class="first">
    <div class="content"> 玩亚索 </div>
  </div>
  <div class="second"> 睡觉 </div>
  <div class="third"> 吃饭 </div>
  <div class="footer">bottom</div> 

css 代码:

.first,.second,.third {float: left;}
/* 用这个 div 把主内容包起来之后, 主内容就可应用 margin 空出两边的区域了 */
.first {
    width: 100%;
    background-color: purple;
}
.content {margin: 0 100px;}
.second {
    width: 100px;
    background-color: red;
    margin-left: -100%; /* 作用和圣杯一样 */
}
.third {
    width: 100px;
    background-color: grey;
    margin-left: -100px; /* 作用和圣杯一样 */
}
.footer {
    background-color: pink;
    clear: both; /* 革除 footer 下面元素的浮动 */
}

flex(举荐)

flex 布局学习请参考: https://www.ruanyifeng.com/bl…

成果:

html 代码:

  <header>header</header>
  <div class="flex-box">
    <div class="flex-center"> 玩亚索 </div>
    <div class="flex-left"> 睡觉 </div>
    <div class="flex-right"> 吃饭 </div>
  </div>
  <footer>footer</footer>

css 代码:

* {color: #fff;}
header {background-color: blue;}
.flex-box {display: flex;}
.flex-center {
    background-color: purple;
    flex-grow: 1;
}
.flex-left {
    background-color: red;
    order: -1;
    flex: 0 0 100px;
}
.flex-right {
    background-color: green;
    flex: 0 0 100px;
}
footer {background-color: pink;}