重学css系列

上一章# CSS学习系列(二) --- padding,border,margin

布局

float 布局

脱离文档流，不脱离字符流, 浮动时会尽量向上向左或右，并且形成bfc,父元素会塌陷，解决父元素塌陷的两种方式，clear:both; BFC

.content {
  width: 400px;
  border: 1px solid black;
}
.left {
  background-color: red;
  float: left
}
.right {
  background-color: blue;
  float: right
}
.box {
  height: 100px;
  width: 50px;
  border: 1px solid #00eeff;
}
footer{
  background-color: gray;
  height: 20px;
  width: 400px;
}

<section class="content">
    <div class="box left">1</div>
    <div class="box left">2</div>
    <span class="box right">3</span>
    <span>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.Morbi tris
    </span>
</section>
<footer>this is footer</footer>

• clear: both 在父元素上加入一个伪类

.content::after{
    content: "";
    display: block;
    clear: both;
}

• BFC 形成一个块级作用域上下文

.content{
    overflow: hidden;
}

flex 布局

grid 布局

定位

position

水平居中

垂直居中

手写实现

三栏布局-两边固定中间自适应

• 圣杯
• 双飞翼
• flex
• grid

BFC 的理解与应用