CSS的position定位布局

补充学习记录
标记语言:
特点:
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.当两个数值一正一负时,直接想加

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值