CSS—三种对齐方式(align)

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对其</title>
    <link rel="stylesheet" type="text/css" href="Align.css">
</head>
<body>
      <div class="m1"></div>
      <div class="m2"></div>
      <div class="m3"></div>
</body>
</html>

CSS代码

*{
    margin: 0px;
}
/*这里的*也是通配符的意思,将默认的外边距全部去掉*/

.m1{
    width: 75%;
    height: 100px;
    background: cornflowerblue;
    margin: 50px auto;
}
/*margin-left和right分别控制左右边距,margin第一个属性代表上下,后面代表左右*/

.m2{
    width: 75%;
    height: 75px;
    background-color: deepskyblue;
    position: absolute;
    left: 0px;
}

.m3{
    width: 75%;
    height: 100px;
    background-color:firebrick;
    float: right;
}

效果:

猜你喜欢

转载自blog.csdn.net/qq_42036616/article/details/81666516
今日推荐