css常見(jiàn)布局面試題集

1.左列定寬，右列自適應(yīng)

浮動(dòng)：

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

絕對(duì)定位

<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.兩側(cè)定寬，中欄自適應(yīng)

 <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.右側(cè)定寬，左側(cè)自適應(yīng)

 <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; /* 交叉軸對(duì)齊方式（單行）*/
            justify-content:center;/* 主軸對(duì)齊方式*/
            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;/* 單獨(dú)為某元素設(shè)置對(duì)齊方式*/
            background: red;
}

超簡(jiǎn)單居中方法

<style>
.wrap{
            width: 500px;
            height: 400px;
            display: flex;
        }
        .box{
            background: red;
            margin: auto;
        }
</style>
 <div class="wrap">
        <div class="box">box</div>
</div>
這里介紹一下flex彈性盒子幾個(gè)屬性：
1.jpeg
2.jpeg
3.jpeg

詳細(xì)介紹可以參考30分鐘徹底弄懂flex布局

6.BFC

BFC，塊級(jí)格式化上下文,就是一個(gè)塊級(jí)元素的渲染顯示規(guī)則。具有 BFC 特性的元素可以看作是隔離了的獨(dú)立容器，容器里面的元素不會(huì)在布局上影響到外面的元素，并且 BFC 具有普通容器所沒(méi)有的一些特性。

  • 哪些會(huì)觸發(fā)BFC呢？

1.浮動(dòng)元素：float 不為none的屬性值；
2.絕對(duì)定位元素：position (absolute、fixed)
3.display為： inline-block、table-cells、flex
4.overflow 除了visible以外的值 (hidden、auto、scroll)

  • 實(shí)際用處
    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;/*觸發(fā)BFC*/
        }
    
    </style>
<div class="box1"></div>
<div class="wrap">
         <div class="box2"></div>
</div>

2.BFC清除浮動(dòng)

<div style="border: 1px solid #000;overflow: hidden;">
 <!-- overflow: hidden;觸發(fā)BFC -->
  <div style="width: 50px; height: 50px; background: #eee;float: left;"></div>
</div>

3.兩列自適應(yīng)布局

<style>
.left{
            width: 100px;
            background: red;
            float: left;     
}
.right{
            background: green;
            height: 400px;
           /* margin-left: 100px;*/
            overflow: hidden;/*觸發(fā)BFC*/
}
</style>
 <div class="left">left</div>
<div class="right">right</div>
正常情況下我們會(huì)用margin處理，這里用BFC就不用margin了。

7.清除浮動(dòng)

  • 子類添加額外空標(biāo)簽
<div style="clear:both;"></div>
  • 父級(jí)div定義 偽類
.clear:after {visibility:hidden;display:block;font-size:0;content:"";clear:both;height:0;}
.clear{zoom:1;}

8.display:none和visibility:hidden區(qū)別

1.display:none的元素不占用空間，而visibility: hidden的元素空間保留；
2.display: none會(huì)影響css3的transition過(guò)渡效果，visibility: hidden不會(huì)；
3.display: none隱藏產(chǎn)生重繪 ( repaint ) 和回流 ( relfow )，visibility: hidden只會(huì)觸發(fā)重繪；
4.株連性：display: none的節(jié)點(diǎn)和子孫節(jié)點(diǎn)元素全都不可見(jiàn)，visibility: hidden的節(jié)點(diǎn)的子孫節(jié)點(diǎn)元素可以設(shè)置 visibility: visible顯示。visibility: hidden屬性值具有繼承性，所以子孫元素默認(rèn)繼承了hidden而隱藏，但是當(dāng)子孫元素重置為visibility: visible就不會(huì)被隱藏。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。