CSS：css 常见的布局（笔）面试题（*****五颗星）

1.左右定宽，中间自适应

1.flex实现(口诀：中间 flex = 1, 宽用百分比，左右固定宽，父元素 display:flex)

html：

<div class="container">
        <div class="left"></div>
        <div class="mid"></div>
        <div class="right"></div>
    </div>

css:

  		.container {
            display:flex;
        }
        .left{
            width:100px;
            height: 100px;
            background: rosybrown;
        }
        .mid{
            flex:1;
            width:100%;
            height: 100px;
            background: rgb(15, 185, 43);
        }
        .right{
            width:100px;
            height: 100px;
            background: rgb(85, 15, 184);
        }

2.float实现（关键点用一个口诀记住：中间加 margin，左右加 float，先加左右，后加中间。）

css:

html,body{
            margin: 0;
            padding: 0;
        }
        .left{
            float: left;
            width:100px;
            height: 100px;
            background: rosybrown;
        }
        .mid{
            width:100%;
            height: 100px;
            background: royalblue;
            margin-left: 100px;
            margin-right: 100px;
        }
        .right{
            float: right;
            width:100px;
            height: 100px;
            background: cadetblue;
        }

html:

<div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="mid"></div>
    </div>

2.等分布局

一句口诀记住，父元素 display:flex，子元素 flex:1

html:

<div class="container">
        <div class="left"></div>
        <div class="mid"></div>
        <div class="right"></div>
    </div>

css:

.container {
            display: flex;
        }
        .left{
            flex:1;
            height: 100px;
            background: