CSS3——浮动和定位

最新推荐文章于 2024-07-18 22:26:13 发布

脑袋不灵光的小白羊

最新推荐文章于 2024-07-18 22:26:13 发布

阅读量680

点赞数

分类专栏： HTML+CSS+JS 文章标签： html css 定位

本文链接：https://blog.csdn.net/qq_42588990/article/details/107580867

版权

HTML+CSS+JS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

定义

定义元素框相对于其正常位置应该出现的位置

position定位

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。
在这里插入图片描述
position定位
1.静态定位static
对偏移量不起作用。一般应用于去除定位
2.relative相对定位(自恋型)
相对于自己来偏移位置（相对于原来左上角的基点来便偏移）
通过便偏移来移动位置，但是原来所占的位置继续占有
3.absolute绝对定位
相对于整个浏览器来边偏移
如果发生边偏移，那么它不在占有空间
4.fixed固定定位

网页中大部分对象默认是占用文档流，也有一些对象是不占文档流的，比如表单中隐藏域。当然我们也可以让占用文档流的元素转换成不占文档流，这就要用到CSS中属性position、float、display来控制。默认情况下，所有元素都处在文档流中，四种情况将使得元素离开文档流：浮动float、绝对定位absolute、固定定位fixed、元素不显示display:none，这种情况不占文档流的空间，而普通元素的位置基于文档流。

z-index堆叠顺序

一旦修改了元素的定位方式，则元素可能会发生堆叠
可以使用z-index属性来控制元素框出现的重叠顺序
z-index仅能在定位的元素上生效
z-index属性：
值为数值，数值越大表示堆叠顺序越高，即离用户越近
可以设置为负值，表示离用户更远，一般不要设置
Z-index 仅能在定位元素上奏效

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>堆叠顺序</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            position: absolute;/*绝对定位*/
        }
        div:first-child{
            z-index: 1;
        }
        div:nth-child(2){
            background-color: orange;
            left: 30px;
            top: 30px;
            z-index: 2;
        }
        div:last-child{
            background-color: skyblue;
            left: 60px;
            top: 60px;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

在这里插入图片描述

居中总结

1.内容水平居中

 text-align:center

2.一行文字垂直居中

   line-height=height

3.盒子水平居中
例子：

 div{
      width: 200px;
      height: 200px;
      background-color: red;
      margin: 0 auto;
}

4.子元素在父元素中居中
1)弹性盒子
2)table-cell
3)绝对定位

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>居中总结</title>
    <style>
        .parent{
            width: 500px;
            height: 500px;
            background-color: red;
            position: relative;
        }
        .child{
            width: 200px;
            height: 200px;
            background-color: blue;
           position: absolute;
            left: 50%;
            top:50%;
            margin-left: -100px;
            margin-top: -100px;
        }
    </style>
</head>
<body>
    <div  class="parent">
        <div  class="child"></div>
    </div>
</body>
</html>

在这里插入图片描述

脑袋不灵光的小白羊

关注

0
点赞
踩
0

收藏

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

定义定义元素框相对于其正常位置应该出现的位置分类普通流定位浮动定位相对定位绝对定位固定定位浮动定位指将元素排除在普通流之外元素将不在页面中占据空间将浮动元素放置在包含框的左边或者右边浮动元素依旧位于包含框之内浮动的框可以向左或者向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止浮动元素的外边缘不会超过其父元素的内边缘浮动元素不会互相重叠浮动元素不会上下浮动行内元素浮动后会变为块级元素语法：float:none/left/right;当框1向左浮动时，它脱离文档流
复制链接

扫一扫