Day04 Web前端学习笔记

最新推荐文章于 2024-07-12 16:27:40 发布

杨俊杰-YJ

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量36

点赞数

文章标签：前端学习笔记

本文链接：https://blog.csdn.net/weixin_74227828/article/details/131712402

版权

28.盒子模型

    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            padding-left: 4px;--------------内边距
            border: 3px solid red;
            margin: 50px;--------------------外边距
        }
    </style>
<body>

    <div>
        nanjinghangkonghangtiandaxue
    </div>
</body>

盒子大小：content+padding+border

29.内边距

    <style>
        div {
            width: 600px;
            height: 600px;
            background-color: pink;
            /* padding-top: 20px;-----------------距离顶端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>

30.外边距

    <style>
        ul li {
            list-style: none;-----------------------删除原本样式
            background-color: pink;
            margin-bottom: 30px;------------------外边框底部相距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>
    <body>
    <ul>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>0
    </ul>
    <span>1</span><span>2</span><span>3</span><span>4</span>
</body>

31.外边距塌陷问题

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

32.文本溢出

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m1KFuM3p-1689256348178)(C:\Users\杨俊杰\Desktop\web前端\day04\图库\联想截图_20230710124933.png)]$

    <style>
        div {
            width: 800px;
            height: 800px;
            background-color: pink;
            /* overflow: auto; */-----------解决方法
            /* overflow: hidden; */
        }
    </style>

33.样式继承

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

34.解决padding影响盒子大小问题

<head>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            padding: 40px;
            border: 2px solid red;
            box-sizing: border-box;------------解决padding  boeder影响盒子大小问题
        }
    </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>

35.flex布局

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

    <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>
<body>
    <div class="father">
        <div class="son1 son">1</div>
        <div class="son2 son">2</div>
        <div class="son3 son">3</div>
    </div>
</body>

36.定位补充

    <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>
<body>
    <div class="father">
        <div class="son son1">111</div>
        <div class="son son2">222</div>
    </div>
</body>

37.文字环绕

文字环绕图片

 <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 min0.ima tempora, ipsum, ipsam sequi. Deserunt, natus et!
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, ea doloribus! Autem ex error rerum nemo nostrum.
</body>

38.float讲解

    <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>
<body>
    <div class="father">
        <div class="son son1"></div>
        <div class="son son2"></div>
        <div class="son son3"></div>
    </div>
</body>

39.浮动问题解决办法

    <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>
<body>
    <ul>
        <li>aaaa</li>
        <li>aaaa</li>
        <li>aaaa</li>
        <li>aaaa</li>
        <div></div>
        <p>我是完全不想动位置的</p>
    </ul>
</body>

40.渐变

    <style>
        div {
            width: 400px;
            height: 800px;
            background-image: linear-gradient(to right, green, pink, yellow, red);----to right从左到右
        }
    </style>
<body>
    <div>
    </div>
</body>

41.字体图标

再iconfont网站获取图标

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

42.媒体查询

<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 screen and (min-width: 900px) {-------------大于900像素
            div {
                background-color: green;
            }
        }
        @media only screen and (min-width: 320px) and (max-width: 700px) {-------------320到700像素之间
            div {
                background-color: blue;
            }
        }
    </style>
</head>
<body>
    <div>
        scdscdc
    </div>
</body>

43.默认外边距

        * {
            margin: 0;--------------------删除默认外边距
            padding: 0;
        }

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

44.2D转换

    <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>
<body>
    <div class="father">
        <div class="son">2222222</div>
    </div>
</body>

45.3D

    <style>
        .father {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 100px auto;
            transform-style: preserve-3d;----------------开启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>
<body>
    <div class="father">
        <div class="son">2222222</div>
    </div>
</body>

46.过度

    <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>
<body>
    <div class="father">
        <div class="son">2222222</div>

    </div>
</body>

47.动画

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

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

```