CSS第八天

最新推荐文章于 2024-07-20 21:01:09 发布
404的又一天
最新推荐文章于 2024-07-20 21:01:09 发布
阅读量25
点赞数
文章标签： css css3 html
本文链接：https://blog.csdn.net/m0_61418777/article/details/129591166
版权
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*相对定位 都有 只生效 left top */
        /*  1.绝对定位 托标 不占位置
            2.具备行内块特点（一行共存 宽高生效）
        先找已经定位的父级，如果又这样的父级就以这个父级为
        参照物进行定位，有父级但父级没有定位，以浏览器窗口为参照物进行定位 */
        .box {
            /* position: relative;
            left: 100px;
            top: 50px;
            right: 200px;
            bottom: 200px; */
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }

        /* 盒子居中 绝对定位不能使用 auto居中*/
        .box1 {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            background-color: skyblue;

            /* margin-left: -100px;
            margin-top: -100px; */
            position: absolute;
            left: 50%;
            top: 50%;
            /* 位移：自己高度宽度的一半 */
            transform: translate(-50%, -50%);

        }

        /* 定位 子绝父相 */
        .bg {
            position: relative;
            margin: 0 auto;
            width: 1226px;
            height: 600px;
        }


        .pp {

            width: 1226px;
            height: 150px;
            position: absolute;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.3);

        }

        /* 光标cursor pointer小手  可以点击 text 文本 可复制 move 提示用户可移动 */

        /*  vertical-align: top贴紧边缘 */
        .op {
            width: 300px;
            height: 100px;
            background-color: aqua;
            /* cursor: pointer; */
            /* cursor: text; */
            cursor: move;
        }

        input {
            vertical-align: top;
        }

        /* 圆角边框 */
        .two {
            position: relative;
            left: 50%;
            transform: translate(-50%);
            width: 200px;
            height: 200px;

            background-color: blue;
            box-sizing: border-box;
            /* 圆  取宽高一半 或值50%*/
            border-radius: 50%;
            /* border-radius: 20px 30px 50px 90px; */

        }

        .three {
            width: 400px;
            height: 200px;
            background-color: red;
            border-radius: 100px;
            /* border-radius: 50%; */
        }

        /* overflow溢出 hidden隐藏 scroll显示滚动条 auto根据是否溢出自动像是或隐藏滚动条 */
        .four {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            /* overflow: hidden; */
            /* overflow: scroll; */
            overflow: auto;
        }

        /* visibility: hidden占位隐藏
             display: none;不占位隐藏*/
        .a {
            width: 100px;
            height: 100px;
            background-color: chartreuse;
            /* visibility: hidden; */
            display: none;
        }

        .b {
            width: 100px;
            height: 100px;
            background-color: rgb(0, 225, 255);
        }

        /* 三角形 */
        .five {
            margin: 0 auto;
            width: 0px;
            height: 0px;
            /* background-color: chartreuse; */
            border-top: 100px solid red;
            border-bottom: 100px solid transparent;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;

        }

        .six {
            position: absolute;
            left: 50%;
            transform: translate(-50%);
            /* background-color: chartreuse; */
            border-top: 100px solid transparent;
            border-bottom: 100px solid transparent;
            border-left: 100px solid transparent;
            border-right: 100px solid orange;

        }

        /* 焦点伪类选择器 */
        .seven input:focus {
            background-color: aqua;
        }

        /* 属性选择器 */
        .eig input[type='text'] {
            background-color: aqua;
        }

        .eig input[type='password'] {
            background-color: orchid;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <p> 定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
    <p> 定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
    <p> 定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
    <p> 定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
    <p> 定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
    <p> 定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
    <div class="box1">定位居中</div>
    <div class="bg">
        <img src="./images/bg.jpg" alt="">
        <div class="pp">1111</div>
    </div>
    <div class="op">
        <input type="text">
    </div>

    <div class="two">

    </div>
    <div class="three"></div>
    <div class="four">
        测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出测试溢出
    </div>
    <div class="a"></div>
    <div class="b"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven">
        <input type="text"><input type="password"><input type="button">
    </div>
    <div class="eig">
        <input type="text"><input type="password">
    </div>

</html>