web前端 第4天

于 2023-07-10 20:51:19 发布
阅读量27 收藏
点赞数
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_75020145/article/details/131647214
版权

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;
        }
    </style>
</head>

<body>

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

</html>

内边距

 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;
            /* 上    右     下         左 */
        }

外边距

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

外边距塌陷问题

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

2.文本溢出

overflow: auto;
overflow: hidden;
overflow: visible;s

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

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

box-sizing: border-box;

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

   /* order   值越小，排列在越靠前的位置 */

6.浮动


            float: left;

 /* 浮动，会脱离文档流   不再保留原来位置  会造成在其下方的兄弟元素位置发生变化  */

            /* 当子元素发生浮动时，其父元素的高度发生塌陷 */

解决方法

例：

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

7.渐变

 background-image: linear-gradient(to right, green, pink, yellow, red);

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

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

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

11.动画

 @keyframes

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

m0_75020145
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值