四种定位分析

会整活的小李
186 阅读5分钟
  • 定位的常见应用场景
  • 不同定位方式的特点
  • 子绝父相完成元素水平垂直案例
  • 三种常见的 光标类型（cursor）
  • 圆角边框 属性完成 正圆和胶囊按钮效果
  • display 和 visibility 让 元素本身隐藏 的区别 及应用

定位

定位应用场景

应用场景:

1 解决盒子之间的层叠(叠加)问题,可以层叠到其它盒子上面

2 页面滚动,盒子固定在页面某个位置不动.

定位的使用步骤:

1 设置定位的方式

2 设置偏移值

定位语法


    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 
        定位使用步骤
            1.1 设置定位方式
            1.2 设置偏移值
        */
        div {
            width: 300px;
            height: 300px;
        }

        .red {
            background-color: red;
        }

        .blue {
            /* 1.1 设置定位方式 */
            position: absolute;
            /* 1.2 设置偏移值 */
            top: 150px;
            left: 150px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="red"></div>
    <div class="blue"></div>
</body>

静态定位 (看看就行基本不用)

position: static; 特点: 1 静态定位就是普通的标准流 2 静态定位设置偏移值无效.


    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        div {
            width: 300px;
            height: 300px;
        }

        .red {
            background-color: red;
        }

        .blue {
            /* 定位方式 */
            /* 静态定位 */
            position: static;
            /* 偏移值 */
            left: 10px;
            top: 10px;
            background-color: blue;
        }

        /* 
        特点
        静态定位就是之前的标准流,不能通过方位属性来移动位置
        */
    </style>
</head>

<body>
    <div class="red"></div>
    <div class="blue"></div>
</body>

相对定位

position: relative; 特点: 1 .需要配合方位属性来移动位置 2 .想对于自身原来的位置进行移动 3 .在页面中占位置-没有脱标


    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        div {
            width: 300px;
            height: 300px;
        }

        .red {
            background-color: red;
        }

        .green {
            /* 相对定位 */
            position: relative;
            left: 20px;
            top: 40px;
            background-color: green;
        }

        .blue {
            background-color: blue;
        }

        /*  
            特点
            1 需要配合方位属性来移动位置
            2 相对于自己原来的位置进行移动
            3 没有脱标
        */
    </style>
</head>

<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
</body>

绝对定位(用的最多!)

position: absolute; 特点 1 需要配合方位属性来移动位置 2 祖先元素如果没有定位,默认相对于浏览器进行移动;祖先元素有定位,相对于最近一级带有定位的祖先元素移动位置. 3 在页面中不占位置-已经脱标

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .father {
            position: relative;
            width: 600px;
            height: 600px;
            background-color: blue;
        }

        .son {
            /* 相对定位 */
            /* position: relative; */
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .sun {
            /* 绝对定位 */
            position: absolute;
            right: 0;
            bottom: 0;
            width: 100px;
            height: 100px;
            background-color: green;
        }

        /* 
            绝对定位到底相对于谁进行移动
            1 祖先元素没有定位,默认以浏览器的可视区域进行移动
            2 祖先元素有定位,以最近一级带有定位的祖先元素移动位置
        */
    </style>
</head>

<body>
    <div class="father">
        <div class="son">
            <div class="sun"></div>
        </div>
    </div>
</body>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        div {
            width: 300px;
            height: 300px;
        }

        .red {
            background-color: red;
        }

        .green {
            /* 绝对定位 */
            position: absolute;
            left: 150px;
            top: 150px;
            background-color: green;
        }

        .blue {
            background-color: blue;
        }

        /*  
            特点
            1 需要配合方位属性实现移动
            2 默认相对于浏览器的可视区域进行移动位置
            3 不占位置 脱标
        */
    </style>
</head>

<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
</body>

子绝父相(很重要!!)

子绝父相:

子元素用绝对定位,父元素使用相对定位,让子元素相对于父元素进行移动.那父元素是相对定位,对网页的布局影响比较小.

子绝父绝:

实际开发中在子绝父相的时候,发现父元素有绝对定位,此时父元素里面的孩子直接子绝即可.

绝对定位的盒子水平垂直居中

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .father {
            position: relative;
            width: 600px;
            height: 600px;
            background-color: red;
            margin: 0 auto;
        }

        .son {
            /* 绝对定位 */
            position: absolute;
            /* 1 先让子盒子往右移动父盒子的一半*/
            left: 50%;
            /* 先让子盒子往下移动父盒子的一半 */
            top: 50%;
            /* 2 再让子盒子往左移动自身宽度的一半  margin负值*/
            /* 再让子盒子往上移动自身高度的一半 margin负值*/
            /* margin-left: -100px;
            margin-top: -100px; */

            /* 优化做法 transform 后期移动端会详细讲解 有兼容性问题 pc端建议大家使用margin负值*/
            /* transform: translateX(-50%);
            transform: translateY(-50%); */
            /* 注意 x和y之间一定要用逗号隔开 */
            /* transform: translate(x,y); */
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 绝对定位的盒子不能使用 margin: 0 auto; */ }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

固定定位

position: fixed; 特点 1 需要配合方位属性来移动位置 2 相对于浏览器的可视区域进行移动位置 3 不占位置-脱标

    <style>
        .box {
            /* 固定定位 */
            position: fixed;
            /* left: 10px;
            top: 20px; */
            right: 10px;
            top: 50px;
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        /* 
        特点
        1 需要配合方位属性来移动位置
        2 相对浏览器的可视区域移动位置
        3 在页面不占位置 脱标
        */
    </style>
</head>
<body>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
    <div class="box"></div>
    <p>测试固定定位测试固定定位</p>
    <p>测试固定定位测试固定定位</p>
</body>

</html>

定位特殊性(超重要!!!)

行内元素加了绝对/固定定位可以设置宽高

块级元素加了绝对/固定定位,如果不给宽高,宽高由内容撑开

嵌套块级元素加了绝对/固定定位,不会有塌陷问题.

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        span {
            /* 绝对定位 */
            /* position: absolute; */
            /* 固定定位 */
            position: fixed;
            left: 10px;
            top: 20px;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        /* div {
            position: absolute;
            right: 20px;
            top: 30px;
            background-color: blue;
        } */
        .father {
            position: relative;
            width: 400px;
            height: 400px;
            background-color: pink;
        }
        .son {
            position: fixed;
            left: 0;
            margin-top: 50px;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        /* 行内元素加了绝对/固定定位可以设置宽高 */
        /* 块级元素加了绝对/固定定位,如果不给宽高,宽高由内容撑开 */
        /* 嵌套块级元素加了绝对/固定定位,不会有塌陷问题. */
    </style>
</head>

<body>
    <!-- <span>行内元素</span>
    <div>块级元素</div> -->
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

元素层级(!)

不同布局方式元素的层级关系：

标准流 <浮动 <定位

定位元素之间的层级关系相同(相对定位 绝对定位 固定定位)

(默认情况下 定位的盒子,后来者居上)

z-index属性可以修改定位元素之间的层级关系

z-index: 数字(默认值是auto);

z-index属性的属性值千万不要加单位

数字越大,层级越高.只有定位的盒子才有 z-index属性

小结

子绝父相

子元素用绝对定位,父元素使用相对定位,让子元素相对于父元素进行移动.那父元素是相对定位,对网页的布局影响比较小.

垂直对齐方式(时常会用到的问题!!)

场景:解决行内/行内块元素垂直对齐问题

vertical-align属性只对行内或行内块元素有效.(因为块级不存在对齐问题)

​ /* 默认值 基线对齐 */

​ vertical-align: baseline;

​ /* 底部对齐 */

​ vertical-align: bottom;

​ /* 中线对齐 */

​ vertical-align: middle;

​ /* 顶部对齐 */

​ vertical-align: top;

光标类型

    <style>
        ul li:nth-child(1) {
            cursor: default;
        }
        ul li:nth-child(2) {
            cursor: pointer;
        }
        ul li:nth-child(3) {
            cursor: zoom-in;
        }
        ul li:nth-child(4) {
            cursor: zoom-out;
        }
        ul li:nth-child(5) {
            cursor: move;
        }
        ul li:nth-child(6) {
            cursor: text;
        }
        ul li:nth-child(7) {
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <ul>
        <li>鼠标形状默认值 箭头</li>
        <li>鼠标形状 小手</li>
        <li>鼠标形状 放大 后期搭配js一起使用</li>
        <li>鼠标形状 缩小 后期搭配js一起使用</li>
        <li>鼠标形状 移动</li>
        <li>鼠标形状 文本</li>
        <li>鼠标形状 禁止</li>
    </ul>
</body>

边框圆角

border-radius:数值(百分比)

    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 50px auto;
            /*  */
            /* border-radius: 10px; */
            /* 从左上角开始赋值 如果没有赋值看对角 */
            border-radius: 10px 40px;
            border-radius: 10px 40px 60px;
            /* 左上角 右上角  右下角  左下角  顺时针 */
            border-radius: 10px 40px 60px 90px;
            border-radius: 0 50%;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

overflow溢出部分显示效果

场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……

    <style>
        .box {
            /* 溢出部分显示效果 */
            /* 默认值 溢出部分可见 */
            overflow: visible;
            /* 溢出部分隐藏 */
            overflow: hidden;
            /* 无论是否溢出都显示滚动条 */
            overflow: scroll;
            /* 根据是否溢出,自动显示滚动条 */
            overflow: auto;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝年少不知龙哥好,错把村花当成宝
    </div>
</body>

定位的盒子慎用 overflow: hidden;

文字溢出显示

    <style>
        .box {
            width: 160px;
            height: 20px;
            font-size: 16px;
            background-color: pink;
            /* 如果文字显示不开 自动换行 */
            white-space: normal; 
            /* 1 让换行的文字强制在一行显示 */
            white-space: nowrap;
            /* 2 溢出的部分隐藏 */
            overflow: hidden;
            /* 3 文字溢出显示用省略号 */
            text-overflow: ellipsis;
        }
        .box1 {
            /* 多行文本溢出显示省略号 */
            overflow: hidden;
            text-overflow: ellipsis;
            /*京东页面copy即可 参数三行*/
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            width: 170px;
            height: 66px;
            background-color: red;
        }
        /* 
        多行文本溢出必须有固定的高度
        有兼容性问题,ie浏览器不支持
        希望后端大哥来完成多行文字溢出功能.
        */
    </style>
</head>
<body>
    <div class="box">升降桌的体验天花板？9am智能升降桌Robin体验</div>
    <hr>
    <div class="box1">EOPN品牌 羽绒服男女装大鹅狼毛领2021冬季新款户外工装情侣派克服厚重4.5斤外套 石墨灰 M</div>
</body>

元素本身隐藏

 /* 隐藏元素本身 占位置 */
visibility: hidden; /visible;
 /* 隐藏元素本身 不占位置*/
 display: none;/block;'

    <style>
        div {
            width: 200px;
            height: 200px;
        }
        .box1 {
            /* 隐藏元素本身 占位置 */
            /* visibility: hidden; */
            /* 隐藏元素本身 不占位置*/
            display: none;
            background-color: red;
        }
        .box2 {
            background-color: purple;
        }
        .father {
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        /* 1 让son盒子隐藏 */
        .son {
            display: none;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        /* 2 鼠标经过father盒子后让son显示出来 */
        .father:hover .son {
            display: block;
        }
    </style>
</head>
<body>
    <div class="box1">乔治</div>
    <div class="box2">小猪佩奇</div>
    <hr>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

元素整体透明度

opacity:0.5; 属性值：0~1之间的数字 1：表示完全不透明 0：表示完全透明 opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……

细线边框(表格会用到!)

border-collapse: collapse;

css画三角形(炫技 其实没什么用!)


    <style>
        .box {
            /* width: 300px;
            height: 300px; */
            width: 0;
            height: 0;
            /* background-color: pink; */
            /* transparent 清澈 透明的 */
            border-top: 50px solid transparent;
            border-bottom: 50px solid green;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

链接伪类选择器(用的比较多 主要用于提升用户体验顺序是lvha)

    <style>
        a {
            text-decoration: none;
        }
        /* 1 未访问过的状态 */
        a:link {
            color: red;
        }
        /* 2 访问之后的状态 */
        /* 0001+0010 =0011 */
        a:visited {
            color: blue;
        }
        /* 3 鼠标悬停时候的状态 */
        a:hover {
            color: green;
        }
        /* 4 鼠标按下未弹起时的状态 */
        a:active {
            color: orange;
        }
        /* 伪类选择器权重是10 */
        /* 如果要实现以上4种伪类选择器生效 必须遵循顺序 LVHA的写法 */
    </style>
</head>

<body>
    <a href="#">百度一下</a>
</body>

</html>

焦点伪类

获得焦点的状态

只对表单元素有效

input:focus {
            background-color: pink;
        }

属性选择器(js中用的比较多!)

通常借助html属性来选择元素,通常用于input标签

选择具有att属性的E元素。

E[att]{}

选择具有att属性且属性值等于val的E元素。

E[att="val"]{}

    <style>
        /* 选中input标签都具有type属性选择出来 */
        /* input[type] {
            width: 300px;
            height: 50px;
            border: 3px solid red;
        } */
        /* 选中input标签都具有type属性并且属性值是text才选择出来 */
        /* 0001+0010= 0011 */
        input[type="text"] {
            width: 300px;
            height: 50px;
            border: 3px solid red;
        }
        /* 属性选择器的权重是10 */
    </style>
</head>
<body>
    <input type="text">
    <input type="password">
</body>

</html>
avatar
文章
阅读
粉丝