八股（自己整理）CSS篇11.两栏布局的实现 ①float+margin 左边栏宽度固定向左浮动右边设margin-

1.两栏布局的实现

①float+margin

左边栏宽度固定向左浮动右边设margin-left 宽度自适应

.left{
    float:left;
    width:200px;
}
.right{
   margin-left:200px;
   width:auto;
}

②flex布局

一边固定宽度，另一边flex给1继承其余宽度

.wrap{
    display:flex;
    height:200px;
}
.left{
    width:200px;
    height:100%;
}
.right{
   flex:1;
   height:100%;
}

③grid布局

.wrap{
    display:grid;
    grid-template-columns:200px 1fr;
    height:200px;
}
.left{
    height:100%;
}
.right{
   height:100%;
}

2.BFC

块格式化上下文(Block Formatting Context)

BFC是个独立的布局环境，可以理解为容器

在这个容器中按照一定规则摆放物品，不会影响其他环境中的物品

如果一个元素符合触发BFC的条件，BFC的元素布局不受外部影响

触发BFC的条件：

float:left/right(非none)

position:absolute/fixed

display:

overflow:hidden/auto/scroll

BFC的特点：

BFC中上下相邻的两个容器的margin会重叠

计算高度时需计算浮动元素的高度

BFC区域不会和浮动的容器发生重叠

BFC的作用：

解决margin重叠的问题：把两个元素变成两个BFC

解决高度塌陷的问题：

在对子元素设置浮动后，父元素会高度塌陷，高度为0

给父元素设置overflow:hidden

创建自适应两栏布局

3.CSS中的单位

①px

像素单位

是页面布局的基础，一个像素表示终端屏幕所能显示的最小区域

像素分为css像素和物理像素

css像素是在css中使用的一个抽象单位

物理像素只与设备有关，是固定的

②em

文本相对长度单位，相对于父元素

③rem

相对单位，相对于根元素font-size大小

④vw/vh

相对于视图窗口的宽高

vmin:vw和vh中的较小值

vmax:vw和vh中的较大值

⑤%百分比

相对于父容器

使用场景：

只需适配少部分移动设备且分辨率对页面影响不大的，使用px即可

需要适配各种移动设备如iPhone和iPad等分辨率差别大的设备，使用rem

4.三栏布局

①flex布局

父元素设display:flex

左右子元素正常设置宽度中间子元素设flex:1

②grid布局

.wrap{
     height:200px;
     display:grid;
     grid-template-columns:200px 1fr 200px;
}

③float+margin

.left{
    float:left;
    width:200px;
}
.right{
    float:right;
    width:200px;
}
.content{
    margin-right:200px;
    margin-left:200px;
}

④圣杯布局

float+margin负值+position:relative

在html代码里把content放在最上面，优先加载

把三个子元素都改为左浮动

给父元素加上两边的内边距，导致left right换行下移

给left加上margin-left:100%让它跑到父容器的最左边

再让它向左移动自身的宽度200px即相对自身距离右边200px

给right加上margin-left:200px

此时再让他相对自身右移200px即可。也就是距离左边200px。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            height: 200px;
            padding: 0 200px 0 200px;
        }
        .left {
            width: 200px;
            height: 100%;
            background-color: aqua;
            float: left;
            margin-left: -100%;
            position: relative;
            right: 200px;
        }
        .right {
            width: 200px;
            height: 100%;
            background-color: blue;
            float: left;
            margin-left: -200px;
            position: relative;
            left: 200px;
        }
        .content {
            float: left;
            width: 100%;
            height: 100%;
            background-color: red;
        }
        
    </style>
</head>
<body>
    <div class="wrap clear">
        <div class="content">content</div>
        <div class="left">left</div>
        <div class="right">right</div>  
    </div>
</body>
</html>

⑤双飞翼布局

和圣杯布局类似

不同之处，给中间的content套了层容器包裹

.wrap {
      height: 200px;
}
.container {
      height: 100%;
      width: 100%;
      background-color: red;
      padding: 0 200px 0 200px;
      box-sizing: border-box;
      float: left;
}
.left {
      width: 200px;
      height: 100%;
      background-color: aqua;
      float: left;
      margin-left: -100%;
 }
 .right {
      width: 200px;
      height: 100%;
      background-color: blue;
      float: left;
      margin-left: -200px;
}