CSS常用的布局

1.常用的居中方法

1.1水平居中

inline元素：对父元素设置text-align:center

定宽block元素：设置左右margin为auto

不定宽block元素：设置子元素为display:inline，然后父元素：text-align:center

通用方案：flex布局，对父元素设置：

display：flex；

justify-content:center;

1.2 垂直居中

父元素一定，子元素为单行inline文本：设置父元素height = line.height;

父元素一定，子元素为多行inline文本：设置父元素display:table-cell / inline-block，再设置vertical-align:middle

扫描二维码关注公众号，回复： 5492694 查看本文章

block元素：position：fixed（absolute）然后设置 margin:auto

通用方案：flex布局，父元素{display:flex; align-items:center}

2.单列布局

特征：定宽，水平居中

a. header , content , footer宽度相同，一般不会占满浏览器宽度，会自动适应

<div class="layout">
   <div id="header"></div>
   <div id="content"></div>
   <div id="footer"></div>
</div>
layout{
   max-width:960px;
   margin:0 auto;
}

b. header , footer是浏览器宽度，content和footer以及header里的内容不会占满浏览器。

<div id="header">
 <div class="layout"></div>
</div>
<div id="content" class="layout"></div>
<div id="footer">
 <div class="layout"></div>
</div>
.layout
{
  max-width:960px;
  margin:0 auto;
}

2. 二列&三列布局

二列布局：侧栏固定宽度，主栏自适应

三列布局：两侧两列固定，中间列自适应

a.float+margin
  <div id="content">
    <div class="sub"></div>
    <div class="extra"></div>
    <div class="main"></div>
  </div>

.sub{
   width:100px;
   float:left;
}
.extra{
   width:200px;
   float:right;
}
.main{
  margin-left:100px;
  margin-right:200px;
}

b.position+margin
 <div class="sub"></div>
 <div class="main"></div>
 <div class="extra"></div>
 
.sub,extra{
   position:absolute;
   top:0;
   width:200px;
  }
.sub{
  left:0;
}
.extra{
  right:0;
}
.main{
 margin:0 200px;
}

c.圣杯布局(float+负margin+padding+position)
<div id="bd">
  <div class="main"></div>
  <div class="sub"></div>
  <div class="extra"></div>
</div>

.main{
      float:left;
      width:100%;
}
.sub{
     float:left;
     width:190px;
     margin-left:-100%;
     position:relative;
     left:-190px;
}
.extra{
    float:left;
    width:230px;
    margin-left:-230px;
    position:relative;
    right:-230px;
}
#bd{padding:0 230px 0 100px;}

d.双飞翼布局(float+负margin+margin)
  <div id="main-wrap" class="column">
     <div id="main"></div></div>
  <div class="sub"></div>
  <div class="extra"></div>

.main-wrap{
  float:left;
  width:100%;
}
.sub{
  float:left;
  width:190px;
  margin-left:-100%;
{
.extra{
  float:left;
  width:230px;
  margin-left:-230px;
}
.main{
  margin: 0 230px 0 190px;}

以上布局的flex实现：

<div class="layout">
    <aside class="layout__aside">侧边栏宽度固定</aside>
    <div class="layout__main">主内容栏宽度自适应</div>
</div>
<div class="layout">
    <div class="layout__main">主内容栏宽度自适应</div>
    <aside class="layout__aside">侧边栏宽度固定</aside>
</div>
<div class="layout">
    <aside class="layout__aside">左侧边栏宽度固定</aside>
    <div class="layout__main">主内容栏宽度自适应</div>
    <aside class="layout__aside">右侧边栏宽度固定</aside>
</div>
<div class="layout">
    <aside class="layout__aside">第1个侧边栏宽度固定</aside>
    <aside class="layout__aside">第2个侧边栏宽度固定</aside>
    <div class="layout__main">主内容栏宽度自适应</div>
</div>
<div class="layout">
    <div class="layout__main">主内容栏宽度自适应</div>
    <aside class="layout__aside">第1个侧边栏宽度固定</aside>
    <aside class="layout__aside">第2个侧边栏宽度固定</aside>
</div>

.layout {
    display: flex;
}
.layout__main {
    flex: 1;
}
.layout__aside {
    width: 200px;
}

猜你喜欢