当前位置：首页 > news >正文

31.前端笔记-CSS-CSS3盒子模型和其他特性

news 来源：原创 2024/5/9 2:28:37

1、CSS3盒子模型

原来的CSS盒子设置了border和padding属性，就会撑大盒子。
现在CSS3中可以通过box-sizing来指定盒模型，有两个值：

content-box：盒子大小是width+padding+border
bordr-box:盒子大小就是width,padding和border不会撑大盒子（前提是padding和border不会超过width宽度）
这样计算盒子大小的方式就改变了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 150px;
            height: 150px;
            border: 30px solid red;
            padding: 20px;
        }
        p{
            width: 150px;
            height: 150px;
            border: 30px solid red;
            padding: 20px;
            box-sizing:border-box;
        }
    </style>
</head>
<body>
    <div>肖战</div>
    <p>王一博</p>
</body>
</html>

在这里插入图片描述
应用：

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

2、图片变模糊

CSS3滤镜filter属性：可以将模糊或颜色偏移等图形效果应用于元素
语法：

filter:函数();
filter:blur(5px);//blur模糊处理，数值越大越模糊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            filter: blur(5px);
        }
        /* 鼠标悬浮，不模糊 */
        img:hover{
            filter: blur(0);
        }
    </style>
</head>
<body>
    <img src="../images/bg1.png" alt="">
</body>
</html>

在这里插入图片描述

3、calc函数

用+ - * /进行运算
语法：

width:calc(100% - 80px); //符号前后加空格

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width:150px;
            height: 100px;
            background-color: red;
        }
        /* 实现子元素总是比父元素的宽度小30px */
        .son{
            width: calc(100% - 30px);
            height: 50px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son"></div>
    </div>
</body>
</html>

在这里插入图片描述

4、CSS3新增过渡属性**

4.1 过渡使用

谁要过渡，给谁加

transition:要过渡的属性 花费时间 运动曲线 何时开始;

属性值说明：

属性：想要变化的css属性，width\height等，如果所有属性都想过渡效果，直接写个all
花费时间：单位是秒s(单位必须写)
运动曲线：默认是ease（可以省略）

linear:匀速
ease:逐渐慢下来
ease-in：加速
ease-out:减速
ease-in-out:先加速后减速

何时开始：可以省略，单位是秒（必须写单位），可以设置延迟触发时间，默认是0s

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 50px;
            background-color: pink;
            transition: width 1s ease-in 1s;
        }
        div:hover{
            width: 100px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

过渡属性

可以多个属性一起变，要写到一行用逗号分割，如下示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 50px;
            background-color: pink;
            /* transition: width 1s ease-in 0s; */
            transition: width 1s ease-in 0s,height 2s;
        }
        div:hover{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

或者写all:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 50px;
            background-color: pink;
            /* 单个属性变化 */
            /* transition: width 1s ease-in 0s; */
            /* 多个属性变化 */
            /* transition: width 1s ease-in 0s,height 2s; */
            /* 多个属性变化 */
            transition: all 0.5s;
        }
        div:hover{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

过渡属性2

4.2 过渡练习-进度条制作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bar{
            width: 100px;
            height: 10px;
            border: 1px red solid;
            padding: 1px;
            border-radius: 5px;
        }
        .bar_in{
            width: 50%;
            height: 100%;
            background-color: red;
            transition: width 1s ;
            border-radius: 5px;
        }
        .bar:hover .bar_in{
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>

</body>
</html>

在这里插入图片描述

4.3 过渡练习-图片切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            position: relative;
            width: 120px;
            height: 58px;
            overflow: hidden;
        }
        .banner{
            position: absolute;
            width: 300px;
            height: 58px;
            transition: left 1s ease 1s;
        }
        .box:hover .banner{
            left:-124px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="banner">
            <img src="../images/bg3.jpg" alt="">
            <img src="../images/bg1.png" alt="">
        </div>
    </div>
    
</body>
</html>