web前端第四天总结

标签：web color 前端 transform height width background 第四天 Document

案例1：盒子模型

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            padding-left: 4px;
            border: 3px solid red;
            margin: 50px;
        }
        /* padding：内边距
        margin：外边距 */
    </style>
</head>

<body>

    <div>
        cfdaffshydghjgdjdnjjjjjjjjjjjjjjj
    </div>
</body>

</html>

案例2：内边距

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 600px;
            height: 600px;
            background-color: pink;
            /* padding-top: 20px;
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 20px; */
            padding: 30px;
            padding: 30px 50px;
            padding: 10px 60px 90px;
            /* 上，左右，下 */
            padding: 10px 30px 60px 90px;
            /* 上    右     下         左 */
        }
    </style>
</head>

<body>
    <div>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque quae possimus temporibus! Rem, eius
        voluptatibus? Veniam voluptas voluptatem inventore eaque dolorum repellat non quam. Numquam temporibus nobis
        facere pariatur mollitia?
        Beatae pariatur itaque at tenetur dolor nulla sapiente quam nemo! Animi praesentium labore qui esse delectus
        expedita suscipit corrupti vitae, possimus est eos voluptate quos recusandae aliquid eveniet dolorem explicabo?
        Vero quisquam animi reiciendis, ab velit laboriosam placeat tempore temporibus eligendi, asperiores, adipisci
        molestias! Saepe modi mollitia nobis velit ipsum aspernatur accusamus perspiciatis minima nemo delectus beatae
        cumque, vero voluptatem.
    </div>
</body>

</html>

案例3：外边距

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li {
            list-style: none;
            background-color: pink;
            margin-bottom: 30px;
        }

        span {
            display: inline-block;
            width: 50px;
            background-color: pink;
            margin-right: 5px;
            margin: 40px;
            margin: 40px 30px;
            margin: 40px 30px 23px;
            margin: 40px 2px 34px 40px;
        }
    </style>
</head>

<body>
    <ul>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
    </ul>


    <span>1</span><span>2</span><span>3</span><span>4</span>

</body>

</html>

当只指定一个值时，该值会统一应用到全部四个边的外边距上。
指定两个值时，第一个值会应用于上边和下边的外边距，第二个值应用于左边和右边。
指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的外边距。
指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的外边距。

案例4：外边距塌陷问题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 800px;
            height: 800px;
            background-color: aquamarine;
            /* border: 1px solid red; */
            padding: 5px;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* margin-bottom: 20px; */
            overflow: hidden;
        }

        .son2 {
            margin-top: 10px;
        }

        .son3 {
            margin-top: 10px;
        }

        .son1 {
            margin-top: 300px;
        }

        /* margin塌陷问题
        父元素的第一个子元素的margin-top值会被父元素抢走
        给父元素添加边框
        overflow:hidden;  -------偏方
        */
        /* padding: 10px 20px 40px 50xp   顺时针 */
    </style>
</head>

<body>
    <div class="father">
        <div class="son son1">1</div>
        <div class="son son2">2</div>
        <div class="son son3">3</div>

    </div>
    <span>cnidsjkjcdscndskcm</span>
</body>

</html>

案例5：文本溢出

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 800px;
height: 800px;
background-color: pink;
overflow: auto;
/* overflow: hidden; */
/* overflow: visible; */
}
</style>
</head>

<body>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed reiciendis veritatis iure provident mollitia
dignissimos quia, facilis facere quasi enim. Hic quam velit quaerat nihil illum inventore consequatur, odio
consequuntur?
Minima error est nulla nesciunt facere deserunt, delectus deleniti velit dolores rem sint autem repudiandae
impedit molestiae a quaerat praesentium quisquam eos ad quibusdam ipsa voluptate ducimus dolorum. Magni,
repudiandae.
Hic quas illum totam, perferendis dolorem fugiat laudantium accusantium mollitia saepe cupiditate iure illo
dolor veritatis sed, odit velit. Et laboriosam consequatur eius unde vel odio pariatur velit in fugit.
Eligendi veniam non quo, voluptatem rerum minus maxime aliquid dolore ullam est alias quibusdam natus unde porro
officiis possimus recusandae qui suscipit. Labore a corporis explicabo tempore iusto ullam aliquid!
Suscipit accusamus eaque culpa corporis expedita incidunt nemo distinctio atque harum inventore sequi ratione
magni, laboriosam, repellendus iusto illum unde omnis, quisquam officiis esse dolore fugit consequuntur?
Veritatis, omnis soluta?
Impedit, voluptatum! Necessitatibus dignissimos eum adipisci veritatis reprehenderit voluptates possimus nemo
rerum amet ratione! Corrupti voluptates unde mollitia quaerat placeat, repudiandae, autem earum nemo minima
atque laudantium soluta inventore veniam.
Excepturi veniam animi quas voluptatem dicta voluptates, voluptate laborum incidunt dolorem recusandae fugiat,
illum nesciunt vel repellendus hic aspernatur suscipit vitae commodi similique iure est quo nisi. Sunt, eius
impedit!
Distinctio, beatae voluptatem accusantium quas necessitatibus esse enim quos sed ad error commodi, consectetur
aut optio eum ipsum voluptates, iusto nemo aperiam! Quidem corporis dignissimos veniam consequatur
necessitatibus error dolorum.
Id labore deserunt inventore voluptatem. Voluptatibus alias veniam possimus recusandae, consequuntur quia
voluptatum magni id laborum tempore quas harum perspiciatis iste voluptates ea? Neque consectetur id, quo
quisquam natus doloremque?
Nam perspiciatis illum rem nemo esse, odio ullam corrupti at et harum nesciunt? Quod cupiditate optio eaque
aliquid, similique incidunt omnis minus aut odio sit reiciendis possimus nihil? Pariatur, fugiat!
Inventore sed laudantium laborum adipisci, id repellat quasi officiis, voluptatibus debitis tempora sapiente
doloremque eaque expedita illo recusandae explicabo molestiae quaerat optio, accusantium odit? Quidem quisquam
ab quasi voluptates reiciendis.
Laudantium, odit veniam. Itaque culpa tenetur atque. Voluptates iusto assumenda facere quidem eos. Magnam nihil
sed ut nisi quaerat, itaque eum exercitationem quidem laboriosam sit illum illo amet placeat quasi.
Delectus, hic ad unde molestias dignissimos quibusdam reprehenderit itaque sed molestiae assumenda ipsa ullam
exercitationem voluptatum corporis explicabo non nemo neque modi, labore error tenetur. Possimus sint aut non
dolore.
Expedita architecto dolorum non libero facere distinctio quia eaque dolores, recusandae iure. Deserunt quibusdam
vel et asperiores, sunt, ut repellat laborum delectus vitae eveniet commodi. Blanditiis quibusdam voluptates
doloribus facere!
Aspernatur dolorem enim labore soluta, minima, cum tenetur provident mollitia optio magni, unde explicabo natus
voluptatibus excepturi nam. Optio quo veniam, commodi harum dolorem error nobis sint amet deleniti! Numquam.
Dignissimos nulla ullam facere perspiciatis consectetur dolores qui. Est quidem quas, veritatis fugiat vel culpa
aperiam. Quas nostrum excepturi amet? Magni explicabo eum error atque, nostrum delectus dolorum maiores
veritatis.
Officia, cum. Voluptate earum autem laudantium nulla sunt obcaecati assumenda nostrum hic, iste quas expedita
omnis debitis facilis excepturi cum quisquam porro. Dolorem porro, magnam saepe sed quae tenetur vero!
Explicabo nemo saepe quas iure dicta magni aliquid ipsa magnam. Est reprehenderit quam, odit non molestiae
corrupti molestias vero assumenda et incidunt, nesciunt laboriosam optio ipsum. Pariatur minus iste placeat!
Similique corporis aperiam, modi vitae distinctio facere atque, aut aliquid consequuntur ullam, beatae autem.
Distinctio, sint excepturi! Tempore recusandae in delectus placeat sed enim voluptates ad illum magnam,
repellendus accusamus?
Corporis unde, minima iure suscipit fugiat architecto adipisci nobis animi alias aspernatur in molestiae
repellat veniam, ut dolores labore vero aperiam. Sequi ratione nobis, eius quibusdam sed accusantium quo
doloremque.
Soluta exercitationem est fuga aliquid autem expedita sequi iusto molestias explicabo! Delectus maiores
perferendis atque quaerat eligendi quisquam neque quasi beatae officia fugiat! Possimus molestiae soluta alias
consectetur officiis maiores.
Nam architecto consequatur reiciendis, sequi ratione similique eligendi qui cupiditate repellat officia
asperiores omnis. Alias accusamus nobis eum saepe blanditiis, provident quam nesciunt, sed nihil doloremque
excepturi autem itaque maxime?
Repellendus nemo voluptas esse? Excepturi cum labore non aperiam, laborum, quas facilis officia at voluptates
obcaecati dolorum beatae hic expedita, saepe temporibus sed. Dolor eveniet, ipsum quo cumque rem expedita!
Iusto iste, beatae delectus ipsa voluptatem consectetur expedita quam voluptate suscipit porro, sequi quae
tempore, corrupti excepturi quisquam! Autem inventore accusantium ullam doloribus cupiditate eos quo iste
quisquam porro asperiores?
Officia tempora rerum dignissimos. Fugit voluptatibus officiis tempora optio ratione! Id velit amet, illo dolor,
voluptatum quo deserunt natus corrupti reiciendis voluptatibus iusto voluptates atque delectus ex et incidunt
minus!
Reiciendis temporibus quia accusamus reprehenderit ipsum saepe quidem doloribus. Reprehenderit, repellendus.
Illum quibusdam sit aut aliquid! Laborum vitae minus sequi optio, placeat id, molestias at adipisci dolorem
beatae nostrum fugiat.
Pariatur tenetur iste dolore illum, adipisci veniam repellendus! Rem cumque esse nulla fugit saepe ea nesciunt,
id suscipit hic et! Molestiae id consequatur magnam facere accusamus nobis temporibus porro veniam!
Iure non praesentium sed eveniet, quo voluptatibus animi molestias itaque voluptatem magni iste suscipit omnis
unde nihil ipsum ex sint id pariatur minus aut est? Obcaecati ipsam excepturi vitae necessitatibus!
Animi sapiente vitae ex aperiam maiores placeat sint debitis, et labore velit, ut asperiores! Repellendus odit
provident facilis tempora, adipisci est cum consequuntur explicabo cupiditate voluptatum placeat temporibus fuga
aperiam!

</div>
</body>

</html>

案例6:样式继承

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            text-decoration: none;
            color: #807474;
        }

        /* div,
        div span,
        div a {
            font-size: 40px;
        } */

        div {
            font-size: 50px;
            color: #807474;
            /* padding: 13px; */
        }

        /* css样式的继承性
        不是所有样式都继承，只有改变之后对布局无影响的样式，才会继承
        a链接最好在自身更改样式
         */
    </style>
</head>

<body>
    <div>
        杀手锏得看懂开始<br>
        <span>我是经常都是</span><br>
        <a href="#">；的策略模式的流程的</a>
        <i>cdjckdd </i>
    </div>

</body>

</html>

案例7:解决padding影响盒子大小问题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            padding: 40px;
            border: 2px solid red;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore quisquam aliquam dolores eligendi neque illo
        velit facere deleniti nam, laboriosam quasi, ut nisi qui quae rerum. Atque ea excepturi deleniti.
    </div>
</body>

</html>

案例8:flex布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 800px;
            height: 800px;
            background-color: pink;
            display: flex;
            /* 排列方式 */
            flex-direction: row-reverse;
            flex-direction: column;
            flex-direction: column-reverse;
            flex-direction: row;
            /* 让flex布局变为多行 */
            flex-wrap: wrap;
            /* flex-wrap: nowrap; */
            /* flex-wrap: wrap; */
            /* 主轴上的布局 */
            justify-content: center;
            justify-content: end;
            justify-content: space-around;
            justify-content: space-evenly;
            justify-content: space-between;

            /* 侧轴 */
            /* align-items   单行的   align-content：多行的*/
            align-items: center;
            /* align-items: end; */
            align-items: start;

            align-content: start;
            align-content: end;
            align-content: center;
            align-content: space-between;
            align-content: space-around;
            align-content: space-evenly;

        }

        .son {
            width: 170px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>

<body>

    <div class="father">
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">2</div>
        <div class="son">3</div>
        <div class="son">3</div>
        <div class="son">3</div>
        <div class="son">3</div>
        <div class="son">3</div>

    </div>
</body>

</html>

案例9:flex

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            display: flex;
            width: 800px;
            height: 800px;
            background-color: pink;
            justify-content: space-between;
        }

        .son {
            width: 300px;
            background-color: aqua;
        }

        .son2 {
            /* order   值越小，排列在越靠前的位置 */
            order: -3;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son1 son">1</div>
        <div class="son2 son">2</div>
        <div class="son3 son">3</div>


    </div>
</body>

</html>

案例10:定位补充

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
        }

        .son {

            width: 100px;
            height: 100px;
        }

        .son1 {
            position: absolute;
            /* z-index  定位中显示的优先级 */
            z-index: 5;
            top: 100px;
            left: 50px;
            background-color: aqua;

        }

        .son2 {
            position: absolute;
            z-index: 3;
            top: 110px;
            left: 80px;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son son1">111</div>
        <div class="son son2">222</div>
    </div>
</body>

</html>

案例11:小米布局练习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .goods {
            display: flex;
            width: 1240px;
            height: 600px;
        }

        .left {
            width: 230px;
            height: 600px;
            background-color: pink;
        }

        li {
            width: 230px;
            height: 275px;
            list-style: none;
            background-color: aqua;
        }




        .right ul {
            display: flex;
            width: 990px;
            height: 600px;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;


        }
    </style>
</head>

<body>

    <div class="goods">
        <div class="left"></div>
        <div class="right">
            <ul>
                <li>
                    <a href="#">

                    </a>
                </li>
                <li>
                    <a href="#">

                    </a>
                </li>
                <li>
                    <a href="#">

                    </a>
                </li>
                <li>
                    <a href="#">

                    </a>
                </li>
                <li>
                    <a href="#">

                    </a>
                </li>
                <li>
                    <a href="#">

                    </a>
                </li>
                <li>
                    <a href="#">

                    </a>
                </li>
                <li>
                    <a href="#">

                    </a>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>

案例12:浮动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 100px;
            float: left;
        }
    </style>
</head>

<body>
    <img src="https://img1.baidu.com/it/u=3991541016,2951402135&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod consequuntur dicta illum nesciunt praesentium autem
    natus deserunt odio esse, eius earum eveniet minima tempora, ipsum, ipsam sequi. Deserunt, natus et!
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, ea doloribus! Autem ex error rerum nemo nostrum.
    Ratione assumenda debitis quasi minus nesciunt, ex obcaecati sit atque neque. Tenetur, nostrum.
    Vero voluptas dolor deserunt quas mollitia, cumque magni voluptatum non nulla ea sed, vel, dolores ex perferendis
    beatae nemo accusamus consequatur totam ipsum incidunt quae inventore molestiae temporibus sit? Doloremque.
    Architecto facilis sunt quas possimus eos quasi, aspernatur dolore aliquam deserunt amet quibusdam, dolores cum
    beatae, ut perferendis quam esse assumenda blanditiis quis placeat ipsam repudiandae dicta. Ipsam, debitis atque.
    Nemo provident unde quas iste, sunt sit, repellendus atque facere corporis, id tenetur aspernatur. Et molestiae
    officiis quod tenetur vero numquam nulla in illo. Soluta quod iure ad atque quas?
    Quos corrupti quaerat sint doloremque officia ullam voluptas. Distinctio maiores eaque ullam assumenda atque
    asperiores officiis hic vero! Atque, doloribus unde! Vero neque mollitia nostrum minima quos praesentium, iusto
    commodi.
    Voluptate nam placeat dolorem facere at error exercitationem odit nihil corrupti amet neque modi enim, dolores
    fugiat quos eaque! Deleniti quidem ullam sit nobis laudantium accusantium provident commodi natus dolor.
    Libero, corporis. Veniam fuga laudantium, quam culpa repellat aut eius quod praesentium similique blanditiis
    asperiores? Officia maiores, perferendis qui dignissimos cupiditate, unde placeat explicabo in vel repellendus non
    iste aliquam?
    Eligendi nulla nesciunt molestias. Consectetur quo quasi debitis magnam, nihil velit unde accusantium tempore et
    error suscipit asperiores soluta ex fuga doloremque ratione vel aliquam in temporibus quidem non animi?
    Ipsum molestiae fugiat sint? A amet ea eveniet. Autem deserunt nobis enim cumque ex esse facere a et commodi iste
    nemo ipsam, omnis fugit suscipit sapiente dolores error dolor quo.
    Laborum consequuntur voluptatum corporis cupiditate sequi? Hic non adipisci culpa natus voluptatibus neque doloribus
    maiores in esse nostrum. Aperiam beatae minima ratione expedita, commodi maiores voluptate reiciendis molestias sunt
    possimus.

</body>

</html>

案例13:float讲解

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 1000px;
            /* height: 1000px;  */
            background-color: pink;
        }

        .son {
            float: left;
            width: 200px;
            height: 200px;
            background-color: aqua;
        }

        .son2 {
            background-color: blue;
            float: left;
            /* 浮动，会脱离文档流   不再保留原来位置  会造成在其下方的兄弟元素位置发生变化  */
            /* 当子元素发生浮动时，其父元素的高度发生塌陷 */

        }

        .son3 {
            width: 400px;

            background-color: black;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son son1"></div>
        <div class="son son2"></div>
        <div class="son son3"></div>

    </div>
</body>

</html>

案例14:float问题解决办法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* ul { */
        /* height: 300px; */
        /* overflow: hidden; */

        /* } */

        ul li {
            /* float: left; */
            float: right;
            list-style: none;
            margin-right: 20px;

        }

        /* div {
            clear: both;
        } */
        p {
            /* clear  清楚浮动 */
            clear: both;
        }
    </style>
</head>

<body>
    <ul>
        <li>aaaa</li>
        <li>aaaa</li>
        <li>aaaa</li>
        <li>aaaa</li>
        <div></div>
        <p>我是完全不想动位置的</p>

    </ul>
</body>

</html>

案例15:渐变

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 800px;
            background-image: linear-gradient(to right, green, pink, yellow, red);

        }
    </style>
</head>

<body>

    <div>

    </div>
</body>

</html>

案例16:字体图标

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../font_3931265_h8zi8uedfw8/iconfont.css">
    <script src="../font_3931265_h8zi8uedfw8/iconfont.js"></script>
    <!-- <style>
        span {
            color: pink;
        }

        .icon-a-008_huoguo {
            font-size: 400px;
        }
    </style> -->
    <style>
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }

        .icon {
            font-size: 70px;
        }
    </style>
</head>


<body>
    <span class="iconfont icon-a-008_huoguo"></span>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-a-008_hanbaokuaican
        "></use>
    </svg>
</body>

</html>

案例17:媒体查询

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            background-color: pink;
        }

        /* @media only screen and (max-width:699px) and(min-width:550px){
            div{
                background-color: pink;

            } 
        } */

        @media screen and (min-width: 900px) {
            div {
                background-color: green;
            }
        }


        @media only screen and (min-width: 320px) and (max-width: 700px) {
            div {
                background-color: blue;
            }
        }
    </style>
</head>

<body>
    <div>
        scdscdc
    </div>

</body>

</html>

案例18:默认外边距

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    woshinsaxnsj

    <ul>
        <li>cnidsjkjcdscndskcm</li>
    </ul>
</body>

</html>

案例19:2D转换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 100px auto;

        }

        .son {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 平移 */
            /* transform: translate(-40px, 40px); */
            /* transform: translateX(70px); */
            /* transform: translateY(-60px); */
            /* 旋转 */
            /* transform: rotateZ(40deg); */
            /* 复合写法  旋转永远放在最后一个 */
            /* transform: translate(100px) rotateZ(45deg); */
            /* transform: rotateZ(45deg) translate(100px); */
            /* transform: scale(1.5); */
            /* transform: scaleX(2); */
            /* transform: scaleY(2); */
            /* transform: skew(40deg); */
            /* 向右下移动100px   旋转45度    缩放1.5 */
            transform: translate(100px, 100px) scale(1.5) rotate(45deg);

        }
    </style>
</head>

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

    </div>

</body>

</html>

案例20:3D.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 100px auto;
            transform-style: preserve-3d;
            perspective: 800px;
            /* perspective-origin: 100px 200px; */

        }

        .son {

            width: 300px;
            height: 300px;
            background-color: pink;
            /* transform: translateZ(-200px); */
            transform: rotateX(45deg);
            /* transform: rotateY(45deg); */
            /* transform: rotate3d(1, 1, 0, 45deg); */
            backface-visibility: hidden;
            transform-origin: bottom;
        }
    </style>
</head>

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

    </div>
</body>

</html>

案例21:过渡

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 100px auto;
            transform-style: preserve-3d;
            perspective: 800px;
            /* perspective-origin: 100px 200px; */

        }

        .son {
            /* transition   谁变化给谁加 */
            transition: all 5s;

            width: 300px;
            height: 300px;
            background-color: pink;
            /* transform: translateZ(-200px); */
            /* transform: rotateY(45deg); */
            /* transform: rotate3d(1, 1, 0, 45deg); */
            /* backface-visibility: hidden; */

        }

        .son:hover {
            width: 800px;
            transform: rotateX(45deg);

        }
    </style>
</head>

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

    </div>
</body>

</html>

案例22:动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes myMovie {
            from {
                width: 200px;
                background-color: pink;
            }

            to {
                width: 800px;
                background-color: aqua;
            }

        }

        @keyframes myfirst {
            0% {
                width: 200px;
                background-color: pink;
            }

            20% {
                width: 400px;
                background-color: green;
            }

            80% {
                width: 800px;
                background-color: red;
            }

            100% {
                width: 1200px;
                background-color: aquamarine;
            }
        }

        div {
            width: 200px;
            height: 50px;
            background-color: aqua;
            animation: myMovie 5s infinite alternate steps(4);
            animation: myfirst 5s infinite alternate steps(400);

        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

标签：web,color,前端,transform,height,width,background,第四天,Document
From： https://www.cnblogs.com/wxy1787880204/p/17542687.html

相关文章

赞助商

阅读排行

web前端 第四天总结

相关文章

赞助商

阅读排行

web前端第四天总结