页面布局

1、固定盒子

使用20％的padding-bottom使得框等于其宽度的20％的高度。与视口宽度无关，子元素的div将保持其宽高比（100％/ 20％= 5:1）2

.container {
  height: 0;
  padding-bottom: 20%;
  position: relative;
}

.container div {
  border: 2px dashed #ddd;  
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

 2，

怎么让一个 div 水平垂直居中

< div class= "parent" >

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

1、div.parent { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

2、div.parent { 
    position: relative;
}
div.child { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}
div.child {
    width: 50px;
    height: 10px; 
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -5px;
}
.child{
    width:50px;
    height: 50px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom:0;
    margin: auto;
}

3、
.parent{
    display: grid;
    .child{
        justify-self: center;
        align-self: center;
    }
}

4、
.parent{
    font-size: 0;
    text-align: center;
    &::before {
        content: '',
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
    }
    .child {
        display: inline-block;
        vertical-align: middle;
    }
}