浅析css几种布局

浅析以下几种常见的布局方式：

一、左右布局

1、最简单的一种写法：

<div class="block1"></div>
<div class="block2"></div>

body{
    max-width:800px;
    margin:auto;
  }
.block1{
    border:1px solid black;
    height:500px;
    width:48%;
    float:left;
  }
.block2{
    border:1px solid black;
    height:500px;
    width:48%;
    float:right;
  }

暂时写一种，后面再补充！



二、左中右布局

1、方法一

    <div class="block1"></div>
    <section></section>
    <div class="block2"></div>

body{
    max-width:800px;
    margin:auto;
    margin-top:100px;
  }
  section, .block1, .block2{
      box-sizing: border-box;
  }
  .block1{
    border:1px solid black;
    height:100px;
    width:25%;
    float:left;
  }
  .block2{
    border:1px solid black;
    height:100px;
    width:25%;
    float:right;
  }
  section{
    float:left;
    border:5px solid red;
    height:200px;
    width:40%;
    margin-left:40px;
    margin-right:40px;
  }

虽然完成左中右布局，但页面缩放时块却不能很好的自适应窗口。

2、方法二

  <main>
    <div class="tableRow">
    <section class="article1">
      <p>假装很多字假装很多字假装很多字假装很多字</p>
    </section>
    <section class="article2">
      <p>假装很多字假装很多字假装很多字假装很多字假装很多字假装很多字假装很多字假装很多字假装很多字假装很多字假装很多字假装很多字</p>
    </section>
    <section class="article3">
      <p>假装很多字假装很多字假装很多字假装很多字假装很多字假装很多字假装很多字假装很多字</p>
    </section>
    </div>
  </main>

body{
margin:0;
}
main{
display:table;
margin:10px;
border-spacing:10px;
}
.tableRow{
display:table-row;
}
section{
display:table-cell;
vertical-align:top;
border:1px solid black;
padding:10px;
}
.article1{
width:20%;
}

这个方法则无论窗口大小，左边块依然占屏幕20%，右两边块也能很好的收缩。

3、页面小广告

<div id="advertising">
  <a href="https://wallhaven.cc/w/dgoxdo" target="_block"><img src="./wallhaven-dgoxdo.jpg" height=250px width=350px></a>
    </div>

body{
    margin:0;
  }
  section{
    border:1px solid red;
    height:1000px;
    
  }
  #advertising{
    position:fixed;
    left:0px;
    bottom:0;
    border:none;
  }

无论放大缩小，或滚动页面，广告始终在左下角。