css3布局

来源：互联网发布：麻林涛知乎编辑：程序博客网时间：2024/05/20 23:38

两栏布局

左侧固定宽高，右侧自适应

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>两栏布局</title>  <style type="text/css">    *{      margin: 0;      padding: 0;    }    html,body{      height: 100%;    }    #left{      width: 300px;      height: 100%;      background-color: red;      float: left;    }    /*!  方法一    #right{      height: 100%;      margin-left: 300px;      background-color: indianred;    }    */    /*方法二*/    #right{      height: 100%;      overflow: hidden;      background-color: indianred;    }  </style></head><body><div id="left"></div><div id="right"></div></body></html>

页面效果

这里写图片描述

方法三

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>两栏布局</title>  <style type="text/css">    * {      margin: 0;      padding: 0;    }    .container:after, .container:before {      content: "";      display: table;    }    .container:after {      clear: both;      overflow: hidden;    }    .main-wrap {      float: left;/*很重要*/      width: 100%;/*很重要*/    }    .main-content {      margin-left: 240px;/*sidebar width + margin-right*/      background-color: #F2F2E6;      height: 350px;    }    .sidebar {      width: 220px; /*左边栏宽度，可自行修改*/      height: 350px;      background-color: #E7DBD5;      float: left; /*侧栏居左*/      margin-left: -100%;/*容器container的宽度*/      position: relative;    }  </style></head><body>  <div class="container">    <div class="main-wrap">      <div class="main-content"><h2>Main Content</h2></div>    </div>    <div class="sidebar"><h2>Sidebar Content</h2></div>  </div></body></html>

页面效果

这里写图片描述

三栏布局

两边固定，中间自适应

1、流体布局

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>流体布局</title>  <style type="text/css">    *{      text-align: center;    }    .left{      margin-right: 20px;      float: left;      height: 200px;      width: 100px;      background-color: red;    }    .right{      margin-left: 20px;      width: 200px;      height: 200px;      background-color: blue;      float: right;    }    .main{      height: 200px;      background-color: rosybrown;    }    /**  BFC三栏布局    .main{      height: 200px;      overflow: hidden;      background-color: rosybrown;    }     */  </style></head><body>  <div class="container">    <div class="left">left</div>    <div class="right">right</div>    <div class="main">main</div>  </div></body></html>

页面效果
这里写图片描述

2、BFC三栏布局

BFC区域不会与浮动元素重叠，所有左右部分设置的margin值有效，缺点是主体内容无法最先加载，当页面内容较多时影响用户体验
代码与流体布局大体相似
页面效果
这里写图片描述

3、双飞翼布局

利用浮动元素的margin负值的应用，主体内容可以优先加载

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>双飞翼布局</title>  <style type="text/css">    *{      text-align: center;    }    .container{      float: left;      width: 100%;    }    .main{      height: 200px;      margin-left: 110px;      margin-right: 220px;      background-color: rosybrown;    }    .left{      float: left;      height: 200px;      width: 100px;      margin-left: -100%;      background-color: red;    }    .right{      width: 200px;      height: 200px;      float: right;      margin-left: -200px;      background-color: blue;    }  </style></head><body>  <div class="container">    <div class="main">main</div>  </div>  <div class="left">left</div>  <div class="right">right</div></body></html>

页面效果
这里写图片描述

4、圣杯布局

优先加载主体内容
基本思路是：让中间部分在结构中位于最前面，先让中间层100%宽度，占满同一高度的空间，此时左右两层被挤至下层，然后给左右盒子设置负边距，将左右栏拉回与主体部分同一水平高度。这时主体部分有一部分被遮挡住了，给包含三个盒子的父盒子设置margin或padding，给左右边栏留出位置，再接着将左右边栏设置相对定位，将它们移到对应的空白位置。

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>圣杯布局</title>  <style type="text/css">    *{      text-align: center;    }    .container{      margin-left: 120px;      margin-right: 220px;    }    .main{      float: left;      width:100%;      height:200px;      background-color: rosybrown;    }    .left{      float:left;      width:100px;      height:200px;      margin-left:-100%;      position:relative;      left:-120px;      background-color: red;    }    .right{      float:right;      width:200px;      height:200px;      margin-left:-200px;      position:relative;      right:-220px;      background-color: blue;    }  </style></head><body> <div class="container">   <div class="main">main</div>   <div class="left">left</div>   <div class="right">right</div> </div></body></html>

页面效果
这里写图片描述

5、flex布局

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>flex</title>  <style type="text/css">    *{      text-align: center;    }    .container{      display: flex;    }    .main{      flex-grow: 1;      height: 300px;      background-color:rosybrown;    }    .left{      order: -1;      flex:0 1 100px;      margin-right: 20px;      height: 300px;      background-color: red;    }    .right{      flex:0 1 200px;      margin-left: 20px;      height: 300px;      background-color: blue;    }  </style></head><body>  <div class="container">    <div class="main">main</div>    <div class="left">left</div>    <div class="right">right</div>  </div></body></html>

页面效果
这里写图片描述

6、Table布局

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Table</title>  <style type="text/css">    /*设置margin无效*/    *{      text-align:center;    }    .container{      display: table;      width:100%;    }    .left,.main,.right{      display: table-cell;    }    .left{      width:100px;      height:200px;      background-color: red;    }    .right{      width:200px;      height:200px;      background-color: blue;    }    .main{      background-color: rosybrown;    }  </style></head><body>  <div class="container">    <div class="left">left</div>    <div class="main">main</div>    <div class="right">right</div>  </div></body></html>

页面效果
这里写图片描述

7、绝对定位布局

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>绝对定位</title>  <style type="text/css">    *{      text-align: center;    }    .container{      position: relative;    }    .main{      height:200px;      margin: 0 120px;      background-color: rosybrown;    }    .left{      position: absolute;      width:100px;      height:200px;      left:0;      top:0;      background-color: red;    }    .right{      position:absolute;      width:100px;      height:200px;      background-color: blue;      right:0;      top:0;    }  </style></head><body><div class="container">  <div class="main">main</div>  <div class="left">left</div>  <div class="right">right</div></div></body></html>

页面效果
这里写图片描述

阅读全文

0 0