css 重新学习

css中减法的使用

width: calc(100px - 20px);

div中的内容居中

.div1{
    height: 100px;
    width: 100px;
    background-color: rgb(14, 151, 231);
    text-align: center;//水平居中
    line-height: 100px;//垂直居中

}

div水平居中

    margin: 0  auto;//上下为0，左右为auto

div垂直水平居中

.div1{
    height: 100px;
    width: 100px;
    background-color: rgb(14, 151, 231);
    position: relative;
    left: 50%;
    top:50%;
    margin: -50px 0 0 -50px;//向上移动自身的50%，向左移动自身的50%
}

.div1{
    height: 100px;
    width: 100px;
    background-color: rgb(14, 151, 231);
    position: relative;
    left: 50%;
    top:50%;
    transform: translate(-50%, -50%);//向上移动自身的50%，向左移动自身的50%
}

 

父元素中的子元素垂直水平居中

.div1{
    width:300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(230, 119, 119);
}
.div2{
    width:100px;
    height: 100px;
    background-color: rgb(8, 68, 231);

}

flex:1;中的1指的是系数，将空间按子元素个数均分，每个占1份。

一个子元数flex:1;另一个子元数flex:2;将空间均分3份，第1个子元数占1份，第2个子元数占2份。