CSS相关的面试题

1. 浮动布局

方式： 固定的盒子设置固定宽度和浮动，自适应盒子设置浮动

原理： div 默认是占满一整行，让其左浮动，就会自动拥有减去固定宽度盒子的宽

<div class="div1">
    <div class="left"></div>
    <div class="right"></div>
</div>

.div1{
    overflow: hidden;
}
.div1 .left{
    width:200px;
    height:300px;
    background:#f90;
    float:left;
}
.div1 .right{
    height:300px;
    background:#f00;
    margin-left:200px;
}

2. 使用 CSS 函数 calc 计算宽度

方式： 固定宽度的盒子设置定宽，自适应的盒子通过 calc 计算获得宽，然后通过浮动让元素成一行显示

原理： calc 可以计算出 100% 宽度减去固定盒子宽的宽，来达到自适应效果

<div class="div2">
    <div class="left"></div>
    <div class="right"></div>
</div>

.div2{
    width:100%;
    height:300px;
    overflow: hidden;
}
.div2 .left{
    width:200px;
    height:300px;
    background:#f90;
    float:left;
}
.div2 .right{
    height:300px;
    width:calc(100% - 200px); /*calc中运算符两边必须要有空格*/
    background:#FF0000;
    float:right;
}

3. flex 布局实现(需考虑兼容性)

方式： 父级盒子设置为弹性盒(display:flex)，固定盒子设置宽度，自适应盒子设置 flex:1;

原理： 通过 flex 将元素呈现一行显示，并且自适应元素设置 flex:1，让其自动拥有铺满剩下宽度的特性

<div class="div3">
    <div class="left"></div>
    <div class="right"></div>
</div>

.div3{
    width:100%;
    display: flex;
}
.div3 .left{
    width:200px;
    height:300px;
    background:#f90;
}
.div3 .right{
    flex:1;
    height:300px;
    background: #ff0000;
    left:200px;
    top:0;
}

4. table 布局

方式： 父级元素设置为表格盒子，宽度 100%，子元素设置 display:table-cile，固定宽度盒子设置宽

原理： 该方法运用了表格的特性

<div class="div4">
    <div class="left"></div>
    <div class="right"></div>
</div>

.div4{
    display: table;
    width:100%;
}
.div4 .left{
    width:200px;
    height:300px;
    background: #f90;
    display: table-cell;
}
.div4 .right{
    background:#FF0000;
    height:300px;
    display: table-cell;
}

以上四种方法仅是我个人了解到的，肯定实现方式不止四种