CSS浮动和定位

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

故事雾于盛夏

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

阅读量33

点赞数 2

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_64776251/article/details/131792914

版权

脱离标准文档流影响规范

浮动导致父级盒子塌陷,解决方式：

1.父级盒子价高(不能自己撑开,高固定)

2.父级盒子加overflow: hidden (自动撑开但会导致溢出的部分无法显示)

3.加一个空盒子(属性值:clear:both) 必须无意义无宽高

4.父盒子加伪类属 ::after{content:"" display:block clear:both} 添加无意义空盒子的效果且不受影响

定位

相对定位

绝对定位

设置堆叠顺序的

固定定位

粘性定位

脱离标准文档流影响规范

影响: 1.破坏了布局,导致布局错乱

2.文字不会脱离(不脱离文本流)

规范:同级之间,一个加float 其余也加


<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            border: 10px solid yellow;
            /* 1.父级盒子价高(不能自己撑开,高固定) */
            /* height: 100px; */
        }
        li{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            float: left;
            list-style: none;
        }
        
    </style>
</head>
<body>
    <ul class="clear">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>

父级盒子加overflow: hidden (自动撑开但会导致溢出的部分无法显示)

ul{
            border: 10px solid yellow;
            /* 2.父级盒子加overflow: hidden (自动撑开 但会导致溢出的部分无法显示) */
            overflow: hidden;
        }

加一个空盒子(属性值:clear:both) 必须无意义无宽高

<ul class="clear">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <!-- 3.加一个空盒子(属性值:clear:both) 必须无意义 无宽高 -->
        <div style="clear: both;"></div>
    </ul>

父盒子加伪类属 ::after{content:"" display:block clear:both} 添加无意义空盒子的效果且不受影响

/* 父盒子加伪类属 ::after{content:"" display:block clear:both} 添加无意义空盒子的效果且不受影响 */
        .clear::after{
            content: "";
            display: block;
            clear: both;
        }

定位

相对定位

相当于自身定位

position: relative;

绝对定位

1.相对浏览器窗口定位


position: absolute;
top: 0;
left: 0;

2.如果父盒子有定位属性那么就相对父盒子相对

子绝父相子类加绝对定位那么父盒子要有相对定位属性

逐级向上找相对碰到第一个有定位属性的父盒子定位如果都都没有那就相对浏览器定位

position: absolute;

设置堆叠顺序的

.默认为z-index: 1 数字越大越靠前显示

z-index: 1;

固定定位

不管页面如何滚动他都永远固定在那里相对浏览器窗口定位

position: fixed;

粘性定位

最初被当作relative 相对于原来的位置进行偏移一旦超过阙值会被当做fixed定位

position: sticky;

故事雾于盛夏

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS浮动和定位

脱离标准文档流影响规范浮动导致父级盒子塌陷,解决方式：1.父级盒子价高(不能自己撑开,高固定)2.父级盒子加overflow: hidden (自动撑开但会导致溢出的部分无法显示)3.加一个空盒子(属性值:clear:both) 必须无意义无宽高4.父盒子加伪类属 ::after{content:"" display:block clear:both} 添加无意义空盒子的效果且不受影响定位相对定位绝对定位设置堆叠顺序的固定定位粘性定位。
复制链接

扫一扫