CSS基础布局

CSS基础布局

左右布局

1、左边子元素加float:left，右边子元素加float:right，父元素加clearfix

<main class="clearfix">
  <div class="left"></div>
  <div class="right"></div>
</main>

.clearfix:after {
    content: '';
    display: block;
    clear: both;
}
.left{
    float:left;
}
.right{
    float:right;
}

2、flex布局

<main>
    <div></div>
    <div></div>
</main>

main{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
main div{
    width: 100px;
    height: 100px;
    border: 1px solid red;
}

左中右布局

1、左右固定宽度，中间自适应

2、flex布局

<main>
    <div></div>
    <div></div>
    <div></div>
</main>

main{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
main div{
    width: 100px;
    height: 100px;
    border: 1px solid red;
}
main div:nth-child(2){
    flex: 1;
}

水平居中

1、块级元素

div写上宽度，然后添加margin:0 auto

div{
    width: 600px;
    margin: 0 auto;
}

或者

div{
    width: 300px;
    height:200px;
    border:1px solid red;
    position:absolute;
    left:50%;
    transform:translateX(-50%)
}

2、内联元素

给父级元素加text-align: center

<div><span>demo</span></div>

div{
    text-align: center;
}

垂直居中

1、文字垂直居中，加同样的height和line-height

div{
    height: 30px;
    line-height:30px;
}

2、文字垂直居中

span{
    padding: 20px 0;
}

2、div垂直居中，flex布局

<main><div></div></main>

main{
    height: 500px;
    display: flex;
    align-items: center;
    border: 1px solid red;
}
main div{
    width: 200px;
    height: 200px;
    border: 1px solid red;
}

或者

main{
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content:center;
    border: 1px solid red;
}
main div{
    width: 200px;
    height: 200px;
    border: 1px solid red;
}

或者

main{
    height: 500px;
    border: 1px solid red;
    position:relative;
}
main div{
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%)
}