定位、圆角属性

最新推荐文章于 2024-08-16 23:06:16 发布

@西楚霸王

最新推荐文章于 2024-08-16 23:06:16 发布

阅读量115

点赞数

分类专栏：定位、圆角属性文章标签： css html5

本文链接：https://blog.csdn.net/qq_41027812/article/details/108190320

版权

定位、圆角属性专栏收录该内容

1 篇文章 0 订阅

订阅专栏

定位、圆角属性

定位的应用场景和基本原理

定位的原理

在本文流中 , 任何一个标签都被文本流所限制了自身的位置 , 但是通过 CSS 我们依然使得这些标签可以改变自己的位置 , 我们可以通过 float 来让标签浮动 , 我们也可以通过 margin 来让标签产生位置移动。 CSS 定位属性，允许定义标签框相对于其正常位置应该出现的位置，或者相对于父标签、另一个标签甚至浏览器窗口本身的位置。标签可以使用顶部、底部、左侧和右侧属性定义具体的位置

position

static 默认静态定位
- 默认的定位位置，不写就是静态定位
relative 相对定位
- 相对于自己本身移动
absolute 绝对定位
- 子绝父相（当找不到父标签有相对定位的时候，就会继续向上找）
- 相对于父标签（父标签相对定位，子标签绝对定位）
fixed 固定定位
- 相对于浏览器窗口
- 不会随着滚动条滚动

position各个属性值的对比

定位是否脱标参考点参数
static 否无
relative 否自己本身 left,right,top,bottom
absolute 是父标签（子绝父相） left,right,top,bottom
fixed 是浏览器窗口 left,right,top,bottom

定位	是否脱标	参考点	参数
static	否	无
relative	否	自己本身	left,right,top,bottom
absolute	是	父标签（子绝父相）	left,right,top,bottom
fixed	是	浏览器窗口	left,right,top,bottom

定位的技巧与层级关系

居中技巧

1、方案 1 margin 负间距
（1）必需知道该 div 的宽度和高度；
（2）然后设置位置为绝对位置；
（3）距离页面窗口左边框和上边框的距离设置为 50%，这个 50% 就是指盒子左上角顶点距离页面左、上边界的 50%；
（4）最后将该 div 分别左移和上移，使整个盒子居中，左移和上移的大小就是该 DIV( 包括 border 和 padding) 宽度和高度的一半

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 300px;
            height: 200px;
            background-color: red;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -100px;
            margin-left: -150px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

2、方案 2 margin:auto 实现绝对定位元素的居中（该方法兼容 ie8 以上浏览器）。此方案代码关键点：
（1）上下左右均 0 位置定位；
（2）margin: auto。

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 300px;
            height: 200px;
            background-color: red;
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

定位标签的层级属性 z-index

1、标签的定位与文档流无关，所以它们可以覆盖页面上的其它标签；
2、z-index 属性指定了一个标签的堆叠顺序；
3、具有更高堆叠顺序的标签总是在较低的堆叠顺序标签的前面；
4、如果两个定位标签重叠，没有指定 z - index，那么默认值都是 0，最后定位在 HTML 代码中的标签将被显示在最前面。数值越大，层级越高。
5、只有加了定位，z-index才可以生效

圆角属性

.box {
            width: 300px;
            height: 300px;
            background-color: red;
            /*border-radius 圆角属性 */
            border-radius: 10px; 
            /*四个角*/
            border-radius: 10px 50px; 
            /*左上右下、右上左下*/
             border-radius: 10px 50px 100px; 
             /*左上、右上左下、右下*/
             border-radius: 10px 30px 50px 70px; 
              /*左上、右上、右下、左下*/
            /* 当一个正方形设置圆角为50%，就是一个正圆形*/
            border-radius: 50%;
        }

半圆

 .box {
          width: 400px;
          height: 200px;
          background-color: red;
          border-radius: 200px 200px 0 0 ;
      }

@西楚霸王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定位、圆角属性

定位、圆角属性定位的应用场景和基本原理定位的原理在本文流中 , 任何一个标签都被文本流所限制了自身的位置 , 但是通过 CSS 我们依然使得这些标签可以改变自己的位置 , 我们可以通过 float 来让标签浮动 , 我们也可以通过 margin 来让标签产生位置移动。 CSS 定位属性，允许定义标签框相对于其正常位置应该出现的位置，或者相对于父标签、另一个标签甚至浏览器窗口本身的位置。标签可以使用顶部、底部、左侧和右侧属性定义具体的位置positionstatic 默认静态定位默认
复制链接

扫一扫

专栏目录