定位布局方式

最新推荐文章于 2023-09-20 17:46:52 发布

徐云飞

最新推荐文章于 2023-09-20 17:46:52 发布

阅读量378

点赞数 4

文章标签： css 前端 html

本文链接：https://blog.csdn.net/2203_76039230/article/details/130141109

版权

1、盒子布局

元素框的总宽度 = 元素（element）的width + padding + margin +border；

元素框的总高度 = 元素（element）的height + padding +margin +border。

CSS中的宽（width）=内容（content）的宽

CSS中的高（height）=内容（content）的高

CSS中的宽（width）=内容（content）的宽+（border+padding）

CSS中的高（height）=内容（content）的高+（border+padding）

2、元素分类

块级元素：display属性取block、table、flex、grid和list-item的元素。

行内级元素：display属性取inline的元素。

行内块级元素：display属性取inline-block、inline-table、inline-flex和inline-grid的元素 .

3、浮动布局

浮动，顾名思义就是指像素上下左右移动，其周围的元素也会重新排列，大多用于图像。

float: left | right | none | inherit

消除浮动 clear属性，其值为left | right | both。

<style>
        .main{
            width: 600px;
            height: 600px;
            border: 1px solid black;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
            top: 200px;
            left: 200px;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: red;
            clear: left;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: green;
            clear: none;
        }
    </style>
</head>
<body>
 <div class="main">
    <div class="box1">arknight1</div>
    <div class="box2">arknight2</div>
    <div class="box3">arknight3</div>
 </div>
</body>

4、定位布局

1相对定位

1.元素根据其在当前文档流所在位置作为参考系，进行偏移。

2.设置相对定位之后原来元素在文档流中的位置会被空出来，不会被其他元素所占据。

2绝对定位

1.元素会将其带有position为非static的祖先元素作为参考系进行偏移。

2.如果祖先元素里没有带有position为非static的，则会以body作为参考系。

3.定位后，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。

<style>
        .flex-contain{
            height: 500px;
            width: 500px;
            border: 1px solid black;
            background-color: aqua;
            display: inline-flex;
            justify-content: space-around;
            align-items: center;
            align-content: left;
            /* flex-direction: column-reverse; */
        }
        .flex-item{
            height: 100px;
            width: 100px;
            background-color: azure;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="flex-contain">
        <div class="flex-item">ark1</div>
        <div class="flex-item">ark2</div>
        <div class="flex-item">ark3</div>
    </div>
</body>

徐云飞

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
定位布局方式

3.定位后，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。元素框的总高度 = 元素（element）的height + padding +margin +border。CSS中的高（height）=内容（content）的高+（border+padding）CSS中的宽（width）=内容（content）的宽+（border+padding）CSS中的宽（width）=内容（content）的宽。
复制链接

扫一扫