CSS的position定位布局

最新推荐文章于 2024-09-22 20:00:51 发布

Ann1223

最新推荐文章于 2024-09-22 20:00:51 发布

阅读量175

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/Ann1223/article/details/107772821

版权

补充学习记录
标记语言：
特点：
1.只能被读取，本身不具有逻辑能力和行为能力
脚本语言：javascript
console.log(1+1);//2
特点：
1.本身具有逻辑能力和行为能力
2.需要解析执行：需要js解析器解析执行

编译语言：
java:
system.out.print(1+1);//2
特点：
本身具有逻辑能力和行为能力
需要编译运行
.java–>.class

定位布局

position:
static:静态布局
absolute:绝对定位
特点：
1.脱离默认文档流
2.不占据定位前空间
3.默认情况下，绝对定位元素根据body元素左上角进行定位
4.当父元素具有定位属性时，子定位元素根据父元素左上角进行定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
        }
        article{
            width: 500px;
            height: 300px;
            border: 1px solid red;
            margin: 10px;
            position: sticky;
        }
        
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 10px;   
        }
        div:nth-child(2){
            background-color: blue;
            margin: 0;
            position: absolute;
            top: 0;
            left: 0;
            /* 绝对定位的特点 1.脱硫文档流 
            2.不占据定位前空间 
            3.默认情况下以body的左上角为起始点移动 
            4.当父类有相对定位时以父类的左上角为基准进行移动 */
        }
    </style>

</head>
<body>
   <article>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
 </article>
</body>
</html>

relative:相对定位
特点：
1.默认情况下，元素根据元素本身的位置进行定位
2.不脱离默认文档流
3.占据定位前空间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        article{
            width: 500px;
            height: 300px;
            border: 1px solid black;
            position: relative;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 10px;
        }

        div:nth-child(2){
            background-color: royalblue;
            position: relative;
            left: 10px;
            top: 10px;
        }
        /* 静态定位的特点：1。不脱离文档流 2.占据定位前的位置
           2.默认情况下以自己本身的位置为基准 */
    </style>
</head>
<body>
    <article>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    </article>
</body>
</html>

fixed:固定定位
特点和绝对定位相似
使用了固定定位的元素，不会随着滚动条的滚动而滚动

sticky:粘滞定位
relative+fixed
元素在到达固定点之前，使用relative定位，在到达固定点之后，使用fixed定位

配合属性：
top
left
right
bottom

外边距合并问题：
1.父子级
1.给父元素添加边框属性
2.给父元素/子元素添加浮动属性
3.给父元素/子元素添加position:absolute属性
4.给父级元素设置overflow:hidden属性
5.给父子级添加display:inline-block属性
6.将本应该设置给子元素的外边距设置给父元素的内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: rgb(33, 0, 219);
            /* border: 1px solid red; */
            /* float: left; */
            /* display: inline-block; */
            /* overflow: hidden; */
            /* position: absolute; */
        }
        p{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 30px;
            
            
            
        }

        /* 父子级的外边距塌陷的决解办法
        1.给父元素设置外框
        2.给父元素/子元素添加浮动元素、
        3.给父元素/子元素添加display：inline-block属性
        4.给父元素添加overflow：hidden属性
        5.将设置给子元素的外边距设为父元素的内边距
        6.给父元素或子元素添加position: absolute属性 */
        
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

2.兄弟级
解决：将本应该设置给两个元素的外边距设置给一个元素

合并规则：
1.两个数值均为正数时，取较大一个
2.两个数值均为负数时，取较小的一个
3.当两个数值一正一负时，直接想加