常见的CSS布局方法

常见的CSS布局方法

「1. 单栏布局」

常见的单列布局有两种：

• header,content 和 footer 等宽的单列布局
• header 与 footer 等宽,content 略窄的单列布局

header,content 和 footer 等宽的单列布局

​ 先通过对 header,content,footer 统一设置 width：1000px;或者 max-width：1000px(这两者的区别是当屏幕小于 1000px 时，前者会出现滚动条，后者则不会，显示出实际宽度);然后设置 margin:auto 实现居中即可得到。

<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>

.header{
    margin:0 auto; 
    max-width: 960px;
    height:100px;
}
.content{
    margin: 0 auto;
    max-width: 960px;
    height: 400px;
}
.footer{
    margin: 0 auto;
    max-width: 960px;
    height: 100px;
}

header 与 footer 等宽,content 略窄的单列布局

对于第二种，header、footer的内容宽度不设置，块级元素充满整个屏幕，但header、content和footer的内容区设置同一个width，并通过margin:auto实现居中。

<div class="header">
    <div class="nav"></div>
</div>
<div class="content"></div>
<div class="footer"></div>

.header{
    margin:0 auto;
    max-width: 960px;
    height:100px;
}
.nav{
    margin: 0 auto;
    max-width: 800px;
    height: 50px;
}
.content{
    margin: 0 auto;
    max-width: 800px;
    height: 400px;
}
.footer{
    margin: 0 auto;
    max-width: 960px;
    height: 100px;
}

「2. 两栏布局」

​ 两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式

float+overflow:hidden

​ 如果是普通的两列布局，浮动+普通元素的 margin便可以实现，但如果是自适应的两列布局，利用float+overflow:hidden便可以实现，这种办法主要通过 overflow 触发 BFC,而 BFC 不会重叠浮动元素。由于设置 overflow:hidden 并不会触发 IE6-浏览器的 haslayout 属性，所以需要设置zoom:1来兼容 IE6-浏览器。

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
        <p>right</p>
    </div>        
</div>

.parent {
  overflow: hidden;
  zoom: 1;
}
.left {
  float: left;
  margin-right: 20px;
}
.right {
  overflow: hidden;
  zoom: 1;
}

注意点:如果侧边栏在右边时，注意渲染顺序。即在HTML中，先写侧边栏后写主内容

Flex布局

Flex布局，也叫弹性盒子布局，区区简单几行代码就可以实现各种页面的的布局。

 flex 子项目占的份数: 分配剩余的空间（把父盒子里面的都分配完了之后，剩余的空间再拿来分）

//html部分同上
.parent {
  display:flex;
}  
.right {
  margin-left:20px; 
  flex:1;
}

flex属性 是 flex-grow、flex-shrink、flex-basis三个属性的缩写。

Grid布局

Grid布局，是一个基于网格的二维布局系统，目的是用来优化用户界面设计。

//html部分同上
.parent {
  display:grid;
  grid-template-columns:auto 1fr;
  grid-gap:20px
}