web前端（其二）-CSDN博客

本文链接：https://blog.csdn.net/weixin_74438979/article/details/131649751

盒子模型
请添加图片描述

盒子大小：conten+padding+border
内边距

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

此时给.son1加margin-top：20px；会出问题，这就是外边距塌陷，父亲会把第一个儿子的top值抢走，相当于给父亲加了一个margin值
解决方法：
1，给父元素添加边框

.father {
            width: 800px;

            height: 800px;

            background-color: aquamarine;

            border: 1px solid red;

        }

2，给父元素加一个padding值

.father {
            width: 800px;

            height: 800px;

            background-color: aquamarine;

            padding: 5px;

        }

3，overflow：hidden；（偏方）

.son {
            width: 100px;

            height: 100px;

            background-color: pink;

           overflow: hidden;

        }

文本溢出：

<style>

        div {

            width: 800px;

            height: 800px;

            background-color: pink;

            /* overflow: auto; */——加一个滚动条

            /* overflow: hidden; */——拦腰截断，不知道后面的内容

            /* overflow: visible;s */——变大可视窗口

        }

    </style>

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>

浮动：
浮动会脱离文档流不保留原来位置会造成下方的兄弟元素发生变化
当子元素发生浮动时，父元素会发生高度塌陷（高度为0）（此时父元素没有高度，靠子元素撑起来的情况）

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

解决方法：
1，给父亲加height——为解决兄弟元素的影响
2，直接让父亲也浮动 ——问题更加严重，父亲的兄弟直接文字环绕

3，overflow：hidden——问题更大，子元素兄弟连数字直接丢失
4，接近完美：clear：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>
        div {
            width: 400px;
            height: 800px;
            background-image: linear-gradient(green,pink,yellow);
        }
    </style>
</head>
<body>
 
    <div>
 
    </div>
</body>
 
</html>

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

——从左到右
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);

        }

旋转：

只有绕着z轴旋转时才是平面
缩放

        transform: scale(0.5);——缩小0.5倍，上下左右都缩小
         transform: scaleX(0.5);——只缩小x轴

        transform: skew(40deg);——扭曲

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>

css过渡

<!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; 
        }
 
        .son {
            transition: all 5s;
            width: 300px;
            height: 300px;
            background-color: pink;
        }
 
        .son:hover {
            width: 800px;
            transform: rotateX(45deg);
 
        }
    </style>
</head>
 
<body>
    <div class="father">
        <div class="son">2222222</div>
 
    </div>
</body>
 
</html>

动画

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