web前端4

最新推荐文章于 2024-06-15 11:46:27 发布

阳阳真的很菜

最新推荐文章于 2024-06-15 11:46:27 发布

阅读量61

点赞数

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/qq_73971624/article/details/131648985

版权

DAY4

盒子模型

在这里插入图片描述

内边距

<style>
    div{
        padding-top/left/right:200px;
        padding: 10px 30px 60px
         		/*上   左右  下*/
        padding: 10px 30px 60px 90px;
        /*        上   右   下    左*/
    }

</style>

外边距

<style>
    ul li{
        margin-bottom/right/left/top:30px;
        /*外边距不影响盒子内部大小*/       
    }

</style>

外边距塌陷问题

<style>
	*{
		margin: 0;
		padding: 0;
	}
	.father{
		width:300px;
		height:300px;
		background-color:pink;
	}
	.son{
		width:100px;
		height:100px;
		background-color:skyblue;
		margin-top:50px;
	}
</style>
<div class="father">
	<div class="son"></div>
</div>

解决方法：

给父元素加边框border
给父元素加内边距padding
给父元素加overflow:hidden

css样式的继承性

* 不是所有样式都继承，只有改变之后对布局无影响的样式才会继承。

  a链接最好在自身更改样式

flex布局

<style>
	display:flex;
    
    /*排列方式*/
    flex-direction:row-reverse;
    flex-direction:column;
    flex-direction:column-reverse;
    flex-direction:row;
    /*让flex布局变为多行*/
    flex-wrap:wrap;
    flex-wrap:nowarp;
    /*主轴上的布局*/
    justify-content:center;
    justify-content:end;
    justify-content:space-between;
    justify-content:space-around;
    justify-content:space-evenly;
    /*侧轴上的布局*/
    单行
    align-items:center;
    align-items:start;(默认)
    多行
    align-content:end;
    align-content:sapce-between;
    align-content:space-around;
    align-content:space-evenly;
    
</style>

浮动

<style>
		img {
            width: 100px;
            float: left;
        }

</style>

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

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

    </div>
</body>

float的解决方法：

1.父元素 overflow: hidden

2.clear: both;

渐变

<style>
        div {
            width: 400px;
            height: 800px;
            background-image: linear-gradient(to right, green, pink, yellow, red);

        }
    </style>

2d转换

.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);

        }

3d转换

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

过渡

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

动画

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

阳阳真的很菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
web前端4

* 浮动，会脱离文档流不再保留原来位置会造成在其下方的兄弟元素位置发生变化 *//* 当子元素发生浮动时，其父元素的高度发生塌陷 *//* 上右下左*//* transition 谁变化给谁加 */1.父元素 overflow: hidden。/*外边距不影响盒子内部大小*//*让flex布局变为多行*//*上左右下*//*主轴上的布局*//*侧轴上的布局*/
复制链接

扫一扫