css常见布局面试题集

1.左列定宽，右列自适应

浮动：

<div class="left">left</div>
<div class="right">right</div>
<style>
.left{
        width: 100px;
        background: red;
        float: left;
}
.right{
        background: yellow;
}
</style>

绝对定位

<div  class="wraper">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<style>
.wraper{
        width: 100%;
        position: relative;
}
.left{
        width: 100px;
        background: red;
}
.right{
        position:absolute;
        background: yellow;
        left:100px;
        right:0;
        top:0;
}
</style>

<div  class="wraper">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<style>
.wraper{
        width: 100%;
        position: relative;
}
.left{
        width: 100px;
        background: red;
        position:absolute;
}
.right{
        margin-left:100px;
        background: yellow;
}
</style>

flex

<div class="wrap">
        <div class="left">left</div>
        <div class="right">right</div>
</div>
<style>
        .wrap{
            display: flex;
        }
        .left{
            width: 200px;
            background: red;
        }
        .right{
            flex:1;
            background: yellow;
        }
 </style>

2.两侧定宽，中栏自适应

 <div class="wrap">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="middle">middle</div>
    </div>
<style>
       .left{
            width: 200px;
            float: left;
            background: red;
        }
        .right{
            width: 200px;
            float:right;
            background: red;
        }
        .middle{
            margin:0 200px;
            background: yellow;
        }
    </style>

flex

 <div class="wrap">
        <div class="left">left</div>
        <div class="middle">middle</div>
       <div class="right">right</div>
</div>
 <style>
.wrap{
       display: flex;
}
.left,.right{
        width: 200px;
        background: red;
}
.middle{
        flex:1;
        background: yellow;
}
 </style>

3.右侧定宽，左侧自适应

 <div class="right">right</div>
 <div class="left">left</div>
<style>
 .left{
            margin-right: 200px;
            background: red;
}
.right{
            float: right;
            width: 200px;
            background: yellow
}
</style>

flex布局

 <div class="wrap">
            <div class="left">left</div>
            <div class="right">right</div>
 </div>
<style>
.wrap{
        display: flex;
}
.left{
        flex:1;
        background: red;
}
.right{
        width: 200px;
        background: yellow;
}
</style>

4.上中下，左中右

<style>
        .top{
            position: absolute;
            width: 100%;
            height: 100px;
            top:0;
            left: 0;
            right:0;
            background: red;
        }
        .center{
            position: absolute;
            top:100px;
            bottom:100px;
            width: 100%px;
            height: auto;
            left:0;
            right:0;
        }
        .center .left{
            width: 100px;
            height:100%;
            background: green;
            float: left;
        }
        .center .right{
            width: 100px;
            height:100%;
            background:blueviolet;
            float: right;
        }
        .center .middle{
            margin: 0 100px;
            height:100%;
            background:yellow;
        }
        .bottom{
            position:absolute;
            bottom: 0;
            left: 0;
            right:0;
            height: 100px;
            width: 100%;
            background: blue;
        }
    </style>
<div class="top">top</div>
    <div class="center">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="middle">middle</div>
    </div>
    <div class="bottom">bottom</div>

flex布局

<style>
        body,html{
            height: 100%;
            font-size:10px;
            padding: 0;
            margin: 0;
        }
        .wrap{
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        .top{
            width: 100%;
            height:100px;
            background: red;
            font-size: 2rem;
        }
        .center{
            display: flex;
            width: 100%;
            flex: 1;
        }
        .center .left{
            width: 100px;
            background: blueviolet;
        }
        .center .middle{
            flex: 1;
            background: blue;
        }
        .center .right{
            width: 100px;
            background: green;
        }
        .bottom{
            width: 100%;
            height:100px;
            background: yellow;
        }
    
    </style>
<div class="wrap">
        <div class="top">top</div>
        <div class="center">
            <div class="left">left</div>
            <div class="middle">middle</div>
            <div class="right">right</div>
        </div>
        <div class="bottom">bottom</div>
    </div>

5.元素居中

元素已知宽高

<div class="wrap">
        <div class="box"></div>
</div>
<style>
        .wrap{
            width: 500px;
            height: 500px;
            position: relative;
            border: 1px solid yellow;
        }
        .box{
            width: 100px;
            height: 100px;
            position: absolute;
            left: 50%;
            top:50%;
            margin-left: -50px;
            margin-top: -50px;
            background: red;
        }
    </style>

元素未知宽高(利用translate)

 <div class="wrap">
        <div class="box">box</div>
 </div>
<style>
.wrap{
            width: 500px;
            height: 400px;
            position: relative;
            border: 1px solid yellow;
        }
        .box{
            position: absolute; 
            left: 50%; 
            top: 50%;   
            transform: translate(-50%, -50%);
            background: red;
        }
</style>

利用flex

 <div class="wrap">
        <div class="box">box</div>
</div>
<style>
.wrap{
            width: 500px;
            height: 400px;
            display: flex;
            align-items: center; /* 交叉轴对齐方式（单行）*/
            justify-content:center;/* 主轴对齐方式*/
            border: 1px solid yellow;
}
.box{
            background: red;
}    
</style>

或者

 .wrap{
            width: 500px;
            height: 400px;
            display: flex;
            justify-content:center;
            border: 1px solid yellow;
}
.box{
            align-self: center;/* 单独为某元素设置对齐方式*/
            background: red;
}

超简单居中方法

<style>
.wrap{
            width: 500px;
            height: 400px;
            display: flex;
        }
        .box{
            background: red;
            margin: auto;
        }
</style>
 <div class="wrap">
        <div class="box">box</div>
</div>

这里介绍一下flex弹性盒子几个属性：

1.jpeg

2.jpeg

3.jpeg

详细介绍可以参考30分钟彻底弄懂flex布局

6.BFC

BFC，块级格式化上下文,就是一个块级元素的渲染显示规则。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

哪些会触发BFC呢？

1.浮动元素：float 不为none的属性值；
2.绝对定位元素：position (absolute、fixed)
3.display为： inline-block、table-cells、flex
4.overflow 除了visible以外的值 (hidden、auto、scroll)

实际用处
1.margin边距重叠

<style>
        .box1{
            width: 100px;
            height: 100px;
            background: red;
            margin-bottom: 20px;
        }
        .box2{
            width: 100px;
            height: 100px;
            background: yellow;
            margin-top: 30px;
        }
        .wrap{
            overflow: hidden;/*触发BFC*/
        }
    
    </style>
<div class="box1"></div>
<div class="wrap">
         <div class="box2"></div>
</div>

2.BFC清除浮动

<div style="border: 1px solid #000;overflow: hidden;">
 <!-- overflow: hidden;触发BFC -->
  <div style="width: 50px; height: 50px; background: #eee;float: left;"></div>
</div>

3.两列自适应布局

<style>
.left{
            width: 100px;
            background: red;
            float: left;     
}
.right{
            background: green;
            height: 400px;
           /* margin-left: 100px;*/
            overflow: hidden;/*触发BFC*/
}
</style>
 <div class="left">left</div>
<div class="right">right</div>

正常情况下我们会用margin处理，这里用BFC就不用margin了。

7.清除浮动

子类添加额外空标签

<div style="clear:both;"></div>

父级div定义伪类

.clear:after {visibility:hidden;display:block;font-size:0;content:"";clear:both;height:0;}
.clear{zoom:1;}

8.display:none和visibility:hidden区别

1.display:none的元素不占用空间，而visibility: hidden的元素空间保留；
2.display: none会影响css3的transition过渡效果，visibility: hidden不会；
3.display: none隐藏产生重绘 ( repaint ) 和回流 ( relfow )，visibility: hidden只会触发重绘；
4.株连性：display: none的节点和子孙节点元素全都不可见，visibility: hidden的节点的子孙节点元素可以设置 visibility: visible显示。visibility: hidden属性值具有继承性，所以子孙元素默认继承了hidden而隐藏，但是当子孙元素重置为visibility: visible就不会被隐藏。