web笔记三-CSDN博客

本文链接：https://blog.csdn.net/nuli_student/article/details/131649997

盒子模型

<!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: 4px;
            /* 内边距 */
 
        }
        /* 盒子大小
        content+padding+border
         */
    </style>
</head>
<body>
    <div>
        dghfgjhkkihihdytghocdocvlujccxxxxxc
 
    </div>
    
</body>
</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>
        div{
            width: 600px;
            height: 600px;
            background-color: pink;
            padding-top: 20px;
            padding-left: 20px;
            padding-right: 20px;
            margin: 0 auto;
            /* 水平居中 */
            padding: ;
            /* 
            一个值：上下左右
            两个值：上下，左右
            三个值：上，左右，下
            四个值：上，右，下，左
             */
 
 
        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni facere dolorum in tempore accusamus voluptatem et tenetur soluta quo fuga quidem commodi rem amet, corrupti exercitationem, maiores labore recusandae necessitatibus!
    </div>
</body>
</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>
        ul li{
            list-style: none;
            background-color: pink;
            margin-bottom: 30px;
 
        }
        span{
            width: 50px;
            background-color: pink;
            margin-right: 5px;
            
        }
    </style>
</head>
<body>
    <ul>
        <li>1111</li>
    </ul>
    <span>1</span>
</body>
</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>
        .f{
            width: 300px;
            height: 300px;
            border-color: pink;
        }
        .s{
            width: 100px;
            height: 100px;
            margin-bottom: 10px;
 
        }
        .s1{
            margin-top: 10px;
            /* 被父亲吃掉
            塌陷问题：父亲第一个元素的margin-top被父亲抢了
            解决方法：
            1.给父亲一个border
            2.padding
            3.overflow:hidden(偏方)
             */
        }
        /*
        overflow:hidden  隐藏溢出部分
        overflow:auto 自动
        overflow：
         */
 
 
    </style>
</head>
<body>
    <div class="f"></div>
    <div class="s s1"></div>
    <div class="s s1 "></div>
    <!-- 一个标签可以有多个类 -->
</body>
</html>

样式继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            text-decoration: none;
 
        }
        /* 
        改父亲元素，a标签不继承，a链接最好对自身更改样式
        不是所有样式都继承，只有改变对布局无影响，才会继承
         */
    </style>
</head>
<body>
    <div>
        00000<br/>
        <span>111111</span>
        <a href="#">22222</a>
    </div>
</body>
</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>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
            padding: 40px;
            box-sizing: border-box;
            /* 解决padding和border对盒子大小的影响 */
 
        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto natus sapiente aliquam nam enim sit sed magnam aut, quasi tempora obcaecati laborum fuga autem facilis dolor consectetur quod dolores itaque!
        Libero optio nesciunt tempore. Obcaecati aperiam fuga voluptatem suscipit dolores. Quod ea incidunt voluptas. Natus dignissimos, eum reprehenderit tenetur dolores molestiae a quod? Asperiores debitis voluptatem eligendi laboriosam, odio quasi?
    </div>
</body>
</html>

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>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 0 auto;
            /* 元素水平居中 */
            display:flex;
            /* 让列表横着排 */
 
            flex-direction: row-reverse;
            /* 横着排，反转 */
            flex-direction: column;
            /* 竖着排 */
 
            flex-wrap: wrap;
            /* 让flex变多行 */
 
            justify-content: space-between;
            justify-content: space-around;
            /* 主轴上分配 */
 
 
            align-items: center;
            align-items: end;
            align-items: start;
            /* 侧轴上分配 */
 
 
            align-content: space-around;
            align-content: space-between;
            /* 侧轴上多行分配 */
 
 
            flex: 1;
            /* 自动填充慢 */
 
            order: 数字;
            /* 值越小排越靠前 */
 
 
 
 
 
        }
        .s{
            width: 10px;
            height: 10px;
            background-color: aliceblue;
        }
 
    </style>
</head>
<body>
    <div class="h">
        <div class="s"></div>
        
    </div>
    
</body>
</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>
        .fatner{
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        .son{
            position: absolute
            z-index:1;
            /* 定位显示的优先级 */
            width: 100px;
            height: 100px;
            background-color: aliceblue;
        }
        .son1{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: aliceblue;
 
        }
 
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
        <div class="son1"></div>
    </div>
    
</body>
</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>
        img{
           float: left;
        }
 
    </style>
</head>
<body>
    <img src="./images/dog.gif" alt="">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos ad minus, magni pariatur praesentium vel illum eligendi, amet cumque, consequuntur esse aut veniam quam quibusdam rerum tenetur adipisci inventore necessitatibus!
    Nulla asperiores pariatur, et repudiandae ipsam temporibus inventore cumque quod officiis sunt blanditiis iure, exercitationem necessitatibus, ab obcaecati in voluptate repellat error consectetur veritatis voluptatem totam! Repellendus delectus quisquam recusandae.
    Mollitia ipsum, sapiente laboriosam aliquam neque ipsam impedit dolorum, aspernatur aliquid ea pariatur, dolor ex! Commodi ducimus, maxime nisi, dignissimos ut aperiam quis quidem ab nesciunt quod assumenda beatae sint!
    Aut officia itaque aliquam, atque voluptatum obcaecati, sint, architecto ipsam facilis dolorum voluptatem soluta quam iure quod quae incidunt illo sunt! Illo magnam fugit, voluptatibus rem itaque quam aut. Veritatis?
    Sapiente reiciendis officiis alias ipsum fuga non? Nisi soluta cum ea adipisci exercitationem aperiam consequatur nulla ut perspiciatis voluptate. Ipsam, possimus. Delectus minus ab enim ipsum aut adipisci quae dolorum!
    Facere voluptatem maiores neque sunt dignissimos a nobis est eaque earum reiciendis reprehenderit aperiam accusantium vero, veritatis distinctio iste. Perferendis sed modi porro mollitia laboriosam enim necessitatibus, nulla eius dicta.
    Numquam, vel illum hic, odio veniam obcaecati quia rerum, quis cupiditate eligendi saepe! Laudantium impedit deleniti, quam et sequi tenetur eos, dicta laboriosam quae ea quo molestias ad! Quo, fugiat.
    Magni quisquam voluptate doloribus officia ab rerum blanditiis laborum assumenda amet omnis porro, perferendis maxime est explicabo tempore nobis deserunt tenetur, rem dolores sed perspiciatis sunt autem eum! Voluptas, odio?
    Iure repellendus quia deleniti porro debitis aut alias voluptates tenetur illum at quisquam sequi quibusdam maxime beatae nostrum, eaque exercitationem possimus nam? Accusantium tempora fuga, quae sunt at quis perspiciatis?
    Dolores, id nam vero odit ut minima recusandae enim ex aperiam totam nesciunt in cupiditate iusto incidunt adipisci consequuntur nobis repudiandae voluptas! Tempore iste delectus minus tenetur est earum optio!
</body>
</html>

float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
         
            background-color: aquamarine;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .son1{
            float: left;
        }
        .son2{
            background-color: antiquewhite;
            float: left;
            /* 脱离文档流，不再保留原来位置，造成下面发生偏移 */
            /* 当子元素发生浮动时，其父元素高度发生塌陷 */
        }
        .son3{
            background-color: blue;
            clear: both;
            /* 清除浮动 */
        
        }
 
    </style>
</head>
<body>
    <div class="father">
        <div class="son son1"></div>
        <div class="son son2"></div>
        <div class="son son3"></div>
    </div>
</body>
</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>
        div {
            width: 400px;
            height: 800px;
            background-image: linear-gradient(to right, green, pink, yellow, red);
 
        }
    </style>
</head>
 
<body>
 
    <div>
 
    </div>
</body>
 
</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>
    <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>

媒体查询

<!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>

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>

3D转换

<!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>

过度

<!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>

动漫

<!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>