关于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;
}