CSS——水平布局和垂直布局

最新推荐文章于 2024-08-09 16:30:00 发布

花里梦雨

最新推荐文章于 2024-08-09 16:30:00 发布

阅读量3.8k

点赞数

分类专栏： CSS 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_37369201/article/details/121382984

版权

布局样式

没有开启定位时：
- - 1. 水平布局
  - 2. 垂直布局
开启了定位position之后：
- - 1. 水平布局
  - 2. 垂直布局

没有开启定位时：

1. 水平布局

子元素在其父元素中水平方向的位置由以下几个属性共同决定：
在这里插入图片描述
为了理解方便理解画了个图，图上一共有子元素的七个属性，而这七个元素的和则必须等于父元素的width

<head>
    <meta charset="UTF-8">
    <title>Surymy</title>
    <style>
        .box1{
   
            width:280px;
            height:200px;
            background-color:rgb(204, 220, 243);

        }
        .box2{
   
            width:200px;
            height:100px;
            background-color:rgb(235, 201, 247);
            padding:20px;
            border:10px orange solid;
            margin:0 20px;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2">Surymy</div>
    </div>
</body>