CSS布局

一栏布局

定宽+水平居中
html:

<div>demo</div>

css:

div{
  height: 50px;
  width: 90vw;
  background-color: red;
  margin: 0 auto;
}

---

双栏布局

特点： 一栏固定宽度， 另外一栏自适应撑满
浮动元素 + 普通元素margin
html:

<div class="content">
      <div class="right">demo1</div>
      <div class="left">demo2</div>
      <div style="height:50px;background:green;">123</div>
</div>

css:

//不清楚浮动的话父元素无法包裹子元素
.content::after{
  content: '';
  display: block;
  clear: both;
}
.left{
  height: 50px;
  width: 10vw;
  background-color: red;
  float: left;
}
.right{
  height: 100px;
  margin-left: 0vw;
  background-color: blue;
}

浮动元素一定要在普通元素的前面，因为当元素设置浮动之后，会脱离当前文档流，使之后的元素占领他本来的位置，如果浮动元素写在了块级元素后面，脱离文档流就没有任何意义。

---

三栏布局

特点： 左右两栏固定宽度， 中间主要区块自适应撑满
思路与两栏布局相似，两个浮动元素，一个普通元素，普通元素在两个浮动元素后面
html:

<div class="content">
      <div class="left">demo1</div>
      <div class="right">demo2</div>
      <div class="main">main</div>
</div>

css:

.content::after{
  content: '';
  display: block;
  clear: both;
}
.left{
  height: 100px;
  width: 10vw;
  background-color: red;
  float: left;
}
.right{
  height: 100px;
  width: 10vw;
  margin-left: 0vw;
  background-color: blue;
  float: right;
}
.main{
  height: 200px;
  background: green;
  margin: 0 11vw 0 11vw;
}

---

使用flex布局

两栏布局和三栏布局都可以使用flex布局，十分简单
以三栏布局为例
html:

<div class="main">
      <div>1</div>
      <div>2</div>
      <div>3</div>
</div>

css:

.main{
  display: flex;
  justify-content: space-between;  //两端对齐，项目之间的间隔都相等。
}
.main>div{
  width: 30vw;
  height: 50px;
  background: red;
}