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