CSS之难点学习

最新推荐文章于 2023-03-02 19:24:18 发布

雪卉栗子

最新推荐文章于 2023-03-02 19:24:18 发布

阅读量157

点赞数

本文链接：https://blog.csdn.net/xuehuilizi/article/details/98888296

版权

其实很早就接触前端了，但是一直对某些问题还有疑惑，所以今天决定写一篇博客，以便自己日后学习。
CSS定位
CSS定位有三种机制：普通流，浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
普通流：

</head>
<style>
    .div1{
        background-color: yellow;
        width:200px;
        height: 100px;
    }
    .div2{
        background-color: #007bff;
        width: 200px;
        height: 100px;
    }
    .div3{
        background-color: red;
        width: 200px;
        height: 100px;
    }
</style>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

</body>
</html>

在这里插入图片描述
CSSposition属性（绝对定位）
1.static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
2.fixed
元素框会固定，不会随着鼠标条滚动。
3.relative
相对于其本身的位置会有一个变化。故叫相对位置。

 .div2{
        position: relative;
        background-color: #007bff;
        width: 200px;
        height: 100px;
        top:10px;
        left:30px;
    }

在这里插入图片描述
4.absolute
会根据其父元素的position有一个绝对位置，若它父元素没有设置position，则依据body而设置绝对位置。

 .div3{
        position: absolute;
        background-color: red;
        width: 200px;
        height: 100px;
        left:30px;
        top:0px;

    }

在这里插入图片描述
CSS绝对定位和float两者不可兼用。
CSS重叠
z-index:可用于将一个元素放在另一个元素之后。
z-index的值越小，优先级越低。
通常是-1。

雪卉栗子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之难点学习

其实很早就接触前端了，但是一直对某些问题还有疑惑，所以今天决定写一篇博客，以便自己日后学习。CSS定位CSS定位有三种机制：普通流，浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。普通流：</head><styl...
复制链接

扫一扫