盒子模型
CSS盒子模型是指在网页布局中，每个元素都被看作是一个矩形的盒子，这个盒子由内容区域、内边距、边框和外边距组成。盒子模型在CSS中用于确定元素在页面中的尺寸、位置和边距。
盒子模型由以下几个部分组成：
- 内容区域（Content）：盒子的实际内容，例如文本、图像等。
- 内边距（Padding）：内容区域与边框之间的空白区域，用于控制内容与边框之间的距离。
- 边框（Border）：内边距和外边距之间的边界线，用于围绕内容区域和内边距。
- 外边距（Margin）：边框与相邻元素之间的空白区域，用于控制元素与其他元素之间的距离。
这些部分共同决定了元素在页面中的尺寸和布局。在CSS中，可以使用相关的属性来控制盒子模型的各个部分，例如：
- width：设置元素的宽度，包括内容区域、内边距和边框。
- height：设置元素的高度，包括内容区域、内边距和边框。
- padding：设置元素的内边距，控制内容区域与边框之间的距离。
- border：设置元素的边框样式、宽度和颜色。
- margin：设置元素的外边距，控制元素与其他元素之间的距离。
通过调整这些属性的值，可以实现对元素的尺寸、间距和布局的精确控制，从而实现所需的页面布局效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型</title>
<style>
.a {
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
background-color: antiquewhite;
box-sizing: content-box;
}
.b {
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
background-color: antiquewhite;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
实现图片模糊
要在CSS中实现图片模糊效果，可以使用filter属性和blur()函数。以下是一种常见的方法：
- 使用filter属性和blur()函数：
.blur-image {
filter: blur(5px);
}
将.blur-image类应用于图片元素，使用filter属性和blur()函数来指定模糊的程度。可以根据需要调整像素值。
- 使用backdrop-filter属性：
.blur-image {
backdrop-filter: blur(5px);
}
backdrop-filter属性可以应用于元素的背景和内容之间，实现模糊效果。但请注意，该属性在某些浏览器可能不一定支持，你会出现使用了该属性，导致效果无法展示的问题。
-
使用CSS后处理工具：
可以使用CSS后处理工具（如Sass、Less）或CSS库（如Bootstrap）中的内置类来实现图片模糊效果。这些工具和库通常提供了现成的类或混合器，可以轻松地将模糊效果应用于图片。 -
使用模糊的图片副本：
可以使用图像编辑软件（如Photoshop）将图片进行模糊处理，并将模糊的图片作为背景或替代品来显示。这种方法可以确保在所有浏览器中获得一致的模糊效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS图片模糊</title>
<style>
img {
display: block;
width: 50%;
height: 50%;
margin: 100px auto;
/*图片模糊度，px值越大越模糊，到达100的时候几乎就看不到图片了，300的时候全白*/
filter: blur(3px);
}
img:hover {
/*鼠标移动上去让图片清晰*/
filter: blur(0px);
}
</style>
</head>
<body>
<img src="img/7bf51d9fa40156eccb6c7cec218996368dc72872.jpg">
</body>
</html>
过渡效果
CSS过渡效果（Transition）是一种在元素属性发生变化时，使其平滑过渡到新状态的效果。通过使用过渡效果，可以为元素的属性变化添加动画效果，例如颜色、尺寸、位置等。
要创建CSS过渡效果，需要使用transition属性，并指定要过渡的属性、过渡时间和过渡效果的类型。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过渡</title>
<style>
.div {
margin: 100px auto;
width: 100px;
height: 100px;
background-color: antiquewhite;
transition: height .5s, width 1s ease 1s;
}
.div:hover {
margin: 100px auto;
width: 500px;
height: 500px;
background-color: blueviolet;
}
.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 1s ease-in-out;
}
.box:hover {
width: 200px;
}
</style>
</head>
<body>
<div class="div"></div>
<div class="box"></div>
</body>
</html>
.box类定义了一个正方形的红色盒子。通过将transition属性应用于.box类，指定了要过渡的属性为width，过渡时间为1秒，过渡效果为ease-in-out（渐进进出）。
当鼠标悬停在盒子上时，.box:hover选择器将width属性的值从100px过渡到200px。由于已经定义了过渡效果，所以过渡将以平滑的动画形式进行。
除了transition属性，还可以使用transition-property、transition-duration、transition-timing-function和transition-delay等单独的属性来控制过渡的不同方面。
2D图的移动
使用transform属性和translate()函数来实现2D图形的移动效果。translate()函数用于沿着X轴和Y轴移动元素。
.square {
width: 100px;
height: 100px;
background-color: red;
transition: transform 0.3s ease-in-out;
}
.square:hover {
transform: translate(50px, 50px);
}
.square类定义了一个红色正方形。通过将transition属性应用于.square类，指定了要过渡的属性为transform，过渡时间为0.3秒，过渡效果为ease-in-out（渐进进出）。
当鼠标悬停在正方形上时，.square:hover选择器将transform属性的值设置为translate(50px, 50px)，即将正方形沿X轴和Y轴分别向右和向下移动50像素。
你可以根据需要调整translate()函数中的像素值，使元素沿着X轴和Y轴移动到所需的位置。正值表示向右或向下移动，负值表示向左或向上移动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D移动</title>
<style>
* {
margin: 0;
padding: 0;
}
img {
border-radius: 50%;
border: 2px skyblue solid;
display: block;
margin: 100px auto;
width: 300px;
height: 220px;
transition: all .5s ease;
}
img:hover {
/* 移动 */
transform: translateY(-50px);
/* 旋转 */
/* transform: rotate(180deg) translate(100px, 100px) scale(1.2); */
}
.box {
position: relative;
margin: 10px auto;
width: 400px;
height: 50px;
background-color: antiquewhite;
}
.box::after {
position: absolute;
content: "";
width: 20px;
height: 20px;
right: 10px;
top: 13px;
border-bottom: 2px solid black;
border-left: 2px solid black;
transform: rotate(315deg);
transition: all 0.5s ease;
}
.box:hover::after {
transform: rotate(495deg);
}
.square {
width: 100px;
height: 100px;
background-color: red;
transition: transform 0.3s ease-in-out;
}
.square:hover {
transform: translate(50px, 50px);
}
</style>
</head>
<body>
<div>
<img src="img/7f2a07a215964b19ed2244df5c00bbf163683e1c.jpg">
</div>
<div class="box"></div>
<div class="square"></div>
</body>
</html>
放大缩小
在CSS中实现元素的放大和缩小效果，可以使用transform属性和scale()函数。
.zoom {
transition: transform 0.3s ease-in-out;
}
.zoom:hover {
transform: scale(1.2);
}
.zoom类定义了一个元素，并应用了过渡效果。通过将transition属性应用于.zoom类，指定了要过渡的属性为transform，过渡时间为0.3秒，过渡效果为ease-in-out（渐进进出）。
当鼠标悬停在元素上时，.zoom:hover选择器将transform属性的值从默认的1缩放到1.2，实现了元素的放大效果。
你可以根据需要调整scale()函数中的缩放比例，使元素放大或缩小到所需的大小。值大于1表示放大，值小于1表示缩小。
除了scale()函数，transform属性还可以与其他变换函数（如rotate()、translate()等）一起使用，可以实现更多的变换效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>放大缩小</title>
<style>
.box {
margin: 100px auto;
width: 100px;
height: 100px;
background-color: blue;
transition: all 1s ease;
}
.box:hover {
transform: scale(2);
}
.box1 {
margin: 100px auto;
width: 100px;
height: 100px;
background-color: blue;
transition: all 1s ease;
}
.box1:hover {
transform: scale(.5);
}
.zoom {
margin: 100px auto;
width: 100px;
height: 100px;
background-color: red;
transition: transform 0.3s ease-in-out;
}
.zoom:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="box">
</div>
<div class="box1">
</div>
<div class="zoom"></div>
</body>
</html>
CSS动画
CSS动画是一种通过CSS样式表来控制元素在页面上产生动态效果的技术。通过@keyframes规则定义动画的关键帧，然后将动画应用到元素上。可以控制动画的持续时间、速度曲线、重复次数等属性，实现各种各样的动画效果，比如淡入淡出、旋转、缩放、平移等。CSS动画可以让网页更加生动和吸引人，提升用户体验。
animation: 用于定义动画的属性，包括动画名称、持续时间、速度曲线、延迟时间等。@keyframes: 用于定义关键帧动画，指定动画在不同阶段的样式。transition: 用于在元素状态改变时平滑过渡样式的属性，包括过渡的属性、持续时间、速度曲线等。transform: 用于对元素进行旋转、缩放、平移等变换，可以结合动画属性实现复杂的动画效果。transition-property: 指定哪些CSS属性应用过渡效果。transition-duration: 指定过渡效果持续的时间。transition-timing-function: 指定过渡效果的速度曲线，比如线性、缓入缓出等。transition-delay: 指定过渡效果开始的延迟时间。transform-origin: 指定元素变换的原点，可以影响旋转和缩放的中心点。perspective: 用于创建透视效果，使得元素看起来更加立体。
在CSS中创建一个3D字体效果，可以使用CSS的text-shadow属性和transform属性来实现。通过text-shadow属性添加文字的阴影效果，然后使用transform属性的rotateX、rotateY等函数来实现文字的旋转效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画学习</title>
<style>
@keyframes test {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(1000px, 0px)
}
50% {
transform: translate(1000px, 500px)
}
75% {
transform: translate(0px, 500px)
}
100% {
transform: translateY(0px, 0px);
}
}
@keyframes rotate {
from {
transform: perspective(500px) rotateY(0deg);
}
to {
transform: perspective(500px) rotateY(360deg);
}
}
.text-3d {
font-size: 48px;
color: #fff;
text-shadow: 2px 2px 0 #333, 4px 4px 0 #666, 6px 6px 0 #999;
animation: rotate 5s linear infinite;
}
.box {
width: 200px;
height: 200px;
background-color: black;
animation-name: test;
animation-duration: 15s;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="text-3d">3D</div>
</body>
</html>
flex布局
Flex布局是一种用于设计网页布局的现代CSS布局技术，它基于弹性盒子模型（Flexible Box Model），可以让元素在容器中以灵活的方式布局和对齐。换句话讲，他就是弹性盒子模型的变种。
-
display: 设置容器为Flex布局，可以通过设置display: flex;或display: inline-flex;来启用Flex布局。 -
flex-direction: 定义主轴的方向，可以是row（水平方向）、row-reverse（水平方向，反向排列）、column（垂直方向）、column-reverse（垂直方向，反向排列）。 -
flex-wrap: 定义是否换行，可以是nowrap（不换行）、wrap（换行）、wrap-reverse（反向换行）。 -
justify-content: 定义主轴上的对齐方式，可以是flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、space-between（两端对齐，项目之间间隔相等）、space-around（项目周围间隔相等）。 -
align-items: 定义交叉轴上的对齐方式，可以是flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、baseline（基线对齐）、stretch（拉伸填充）。 -
align-content: 定义多根轴线的对齐方式，当项目换行时生效，可以是flex-start、flex-end、center、space-between、space-around、stretch。 -
flex: 设置项目的放大比例、缩小比例和初始尺寸，可以简写为flex:<flex-grow> <flex-shrink> <flex-basis>。 -
align-self: 单独设置某个项目在交叉轴上的对齐方式，覆盖align-items属性。
<!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>
.css {
margin: 0 auto;
display: flex;
width: 500px;
height: 500px;
background-color: aqua;
/* 排序格式 row默认从左到右 row-reverse翻转 */
flex-direction: row-reverse;
justify-content: center;
align-items: center;
flex-wrap: wrap;
align-content: space-between;
}
.s1 {
background-color: seashell;
width: 100px;
height: 100px;
}
.s2 {
background-color: red;
width: 100px;
height: 100px;
}
.s3 {
background-color: salmon;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="css">
<div class="s1"></div>
<div class="s2"></div>
<div class="s3"></div>
<div class="s1"></div>
<div class="s1"></div>
<div class="s1"></div>
<div class="s1"></div>
<div class="s1"></div>
<div class="s1"></div>
</div>
<strong>adwadaw</strong>
</body>
</html>
