[前端]Web前端常用布局

Flex布局(弹性布局)

(https://www.runoob.com/w3cnote/flex-grammar.html)
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

注意:为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 主轴与侧轴呈十字关系

Flex常用属性:

1.Flex实现水平垂直居中布局

<div class="father">
    <div class="child"></div>
</div>

.child{
   
    height:200px;
    width: 200px;
    background-color: red;
}
.father{
       
    display: flex;
    justify-content: center;
    align-items:center;
    width: 100%;
    height: 800px;
    background-color: yellow;
}

2.Flex实现两列布局

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

*{
   
    margin: 0;
    padding: 0;
}
.parent{
   
    display:flex;
    height:300px;
}
.left{
   
    flex:0 0 auto;
    background-color:red;
    width:700px;
}
.right{
   
    flex:1 1 auto;
    background-color:#484;
}

3.Flex实现三列布局

<div class="parent">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
 </div>

.parent{
   
    height: 300px;
    display: flex;
}

.left,.right{
   
   flex: 0 0 auto;
    background-color: red;
    width: 200px;
    
} 
.center{
   
    flex: 1 1 auto;
    background-color: green;
    width: 200px;
}

————————————————————————————

其它常规方式实现布局

1.水平-垂直布局

1.1 水平居中布局

(1)方案一： 优点：浏览器兼容性比较好 缺点：text-algin属性具有继承性，导致父级元素的文本也居中显示

<div class="father">
    <div class="child"> </div>
</div>

.father{
   text-align: center;}
.child{
   display: inline-block;} /*将自己变为文本类元素*/

(2) 方案二：

优点：只需对子级元素进行设置就可以实现水平方向居中效果
缺点：如果子级元素脱离文档流（定位或浮动），那么margin属性值就无效了。

<div class="father">
    <div class=</