总结CSS应用

padding-top 是相对父的宽度计算的;

top是相对最近relative的高度，left是对最近relative的宽度计算的；

margin-top 是相对父的宽度计算的，不过不算入盒模型高度，所以用inner可以用padding-top画等高宽比。

CSS中的float和margin的混合使用

float: left | right | none | inherit

当然最常用的还是前面两个：向左浮动和向右浮动

浮动最主要的特点：脱离标准流，处于更加高级的层面，影响父元素和后面元素的布局，这里就不具体介绍了。

margin属性

这里主要讲margin-left和margin-right

margin-left: 设置元素的左外边距。margin-right: 设置元素的右外边距。

具体实例可以参考：www.cnblogs.com/xyf724/p/13…

CSS 画一个大小为父元素宽度一半的正方形？

<div class="outer">
  <div class="inner"></div>
</div>

.outer {
    width: 400px;
    height: 600px;
    background: red;
  }

  .inner {
    width: 50%;
    padding-bottom: 50%;
    background: blue;
  }

CSS实现自适应正方形、等宽高比矩形

双重嵌套，外层 relative，内层 absolute

outer是正方形，padding-top或者padding-bottom可以等宽高比矩形

.outer {
    padding-top: 30%;
    height: 0;
    background: #ccc;
    width: 30%;
    position: relative;
  }

  .inner {
    position: absolute;
    width: 50%;
    height: 50%;
    top: 0;
    left: 0;
    background: blue;
  }

padding-top或者padding-bottom

.outer {
    width: 200px;
    height: 300px;
    background: blue;
  }
.inner {
    width: 100%;  //相对于父
    height: 0;
    padding-bottom: 100%;
    background: red;
}

相对于视口 VW VH

.inner {
    width: 10vw;
    height: 100vw;
    background: blue;
}

伪元素设置 margin-top

.inner {
    width: 100px;
    overflow: hidden; // 一定要有，不然inner高度是0，导致页面不显示蓝色
    background: blue;
}

.inner::after {
    content: "";  //一定要有，不然after就不存在了
    margin-top: 100%;  // 此元素调整高宽比
    display: block;  //一定要有，不然高宽都是0
}

实现两栏布局的方式

<div class="aside">a</div>
<div class="main">b</div>

假设div是100，不设置就按照a和b占据的位置

 div {
    height: 100px;
  }

左 float，然后右 margin-left

  .aside {
    width: 300px;
    float: left;
    background: yellow;
  }

  .main {
    background: aqua;
    margin-left: 300px;
  }

右 float，margin-right

.aside {
    width: 300px;
    float: right;
    background: yellow;
}

.main {
    background: aqua;
    margin-right: 300px;
}

BFC + float

.aside {
    width: 300px;
    float: left;
    background: aqua;
}

.main {
    overflow: hidden; // 加上它，aside就不会在main上面，宽度就是父-aside宽度，否则是父的宽度
    background: aqua;
}

float + 负 margin

<div class="left"><p>hello</p></div>
<div class="right"><p>world</p></div>

.left {
  width: 100%;
  float: left;
  background: #f00;
  margin-right: -200px;
}

.right {
  float: left;
  width: 200px;
  background: #0f0;
}

圣杯布局实现两栏布局

<div class="container">
  <div class="left">你好</div>
  <div class="right">我好</div>
</div>

.left {
    float: left;
    width: 100%;
    background: #0f0;
}

.right {
    float: left;
    width: 300px;
    margin-left: -300px;  //如果没有它，会到下一行
    background: #00f;
}

flex 实现两栏布局

<div class="container">
  <div class="left">你好</div>
  <div class="right">我好</div>
</div>
.container {
    display: flex;
}
// flex-grow 默认值是0  flex-shrink 默认值是1
.left {
    flex: 0 0 200px;
    background: #0f0;
  }

  .right {
    flex: 1 1;
    background: #00f;
  }

实现三列布局的方式

position + margin-left + margin-right

<div class="box">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

div {
      height: 300px;
  }
  .box {
    position: relative;
  }

  .left {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    background: green;
  }

  .right {
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    background: red;
  }

  .middle {
    margin-left: 200px; // 这样才能缩小左边的长度
    margin-right: 200px;
    background: black;
  }

float + margin

<div class="box">
  <div class="left">left</div>
  <div class="middle">middle</div>
  <div class="right">right</div>
</div>
 .left {
    float: left;
    width: 200px;
    height: 200px;
    background: green;
  }

  .right {
    margin-left: 200px;
    margin-right: 200px;
    background: black;
    height: 200px;
  }

  .middle {
    float: right;
    width: 200px;
    height: 200px;
    background: red;
  }

圣杯布局

<div class="container">
  <div class="content">中间内容</div>
  <div class="left">左侧区域</div>
  <div class="right">右侧区域</div>
</div>
 .container {
    padding: 0 300px 0 200px;
    border: 1px solid black;
  }

  .content {
    float: left;
    width: 100%;
    background: #f00;
  }

  .left {
    width: 200px;
    background: #0f0;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -200px;
  }

  .right {
    width: 300px;
    background: #00f;
    float: left;
    margin-left: -300px;
    position: relative;
    right: -300px;
  }

双飞翼布局

注意float和margin，它就是左边显示的margin很大，固定到左边

<div class="main">
  <div class="content">hello world</div>
</div>
<div class="left">你好</div>
<div class="right">哈哈</div>

.main {
    float: left;
    width: 100%;
    background: #f00;
  }

  .main .content {
    margin-left: 200px;
    margin-right: 300px;
  }

  .left {
    width: 200px;
    background: #0f0;
    float: left;
    margin-left: -100%; // 如果很小会挤到下一行
  }

  .right {
    width: 300px;
    background: #00f;
    float: left;
    margin-left: -300px;
  }

flex布局

 <div class="container">
  <div class="content">hello world</div>
  <div class="left">你好</div>
  <div class="right">王鹏浩</div>
</div>

.container {
    display: flex;
}
.content {
    flex: 1 1;
    order: 2;
    background: #f00;
}
.left {
    flex: 0 0 200px;
    order: 1;
    background: #0f0;
}

.right {
    flex: 0 0 300px;
    order: 3;
    background: #00f;
}