YOUXIANYU

伸缩容器，伸缩项目 伸缩容器：开启了flex的元素，就是：伸缩容器。 1.给元素设置：dispay:flex或display:inline-flex，该元素就变为了伸缩容器。2.display:inline-flex很少使用，因为可以给多个伸缩容器的父容器，也设置为伸缩容器。3.一个元素可以同时是：伸缩容器、伸缩项目。 伸缩项目:伸缩容器所有子元素自动成为了：伸缩项目。 1.仅伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代，不是伸缩项目。2.无论原来是哪种元素（快、行内块、行内），一旦成为了伸缩项目，全都会“块状化”。 主轴与侧轴 主轴：伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右（左边是起点，右边是终点）。 侧轴：与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上到下（上边是起点，下边是终点）。 主轴方向 属性名：flex-direction 常用值如下: row：主轴方向水平从左到右--默认值 row-reverse：主轴方向水平从右到左。 column：主轴方向垂直从上到下。 ...

CSS 动画 相较于传统的脚本实现动画技术，使用 CSS 动画有三个主要优点： 1.能够非常容易地创建简单动画，你甚至不需要了解 JavaScript 就能创建动画。 2.动画运行效果良好，甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使 用 JavaScript 实现的动画通常表现不佳（除非经过很好的设计）。 3.让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。 CSS 动画是网页设计中用于创建动态和交互效果的强大工具，以下是关于 CSS 动画的学习内容： 基本概念 关键帧：CSS 动画通过定义关键帧来描述动画的不同状态。关键帧使用@keyframes规则来创建，它允许你指定动画在不同时间点的属性值。 动画属性：通过一系列 CSS 动画属性来控制动画的行为，包括动画名称、持续时间、播放次数、播放方向、延迟时间等。 主要属性 @keyframes 语法：@keyframes animationName { keyframe-selector { property:...

CSS 过渡 CSS 过渡是 CSS 中一项非常实用的特性，它可以在元素的属性值发生变化时创建平滑的过渡效果，提升用户体验。以下是关于 CSS 过渡的学习内容： 基本概念 过渡属性：CSS 过渡主要通过transition属性来实现，它是一个复合属性，用于设置过渡效果的各个方面，包括过渡的属性、持续时间、过渡函数和延迟时间。 过渡效果触发：通常在元素的状态发生改变时触发过渡效果，比如鼠标悬停（:hover）、获取焦点（:focus）、激活（:active）等伪类状态变化，或者通过 JavaScript 动态修改元素的属性值。 transition属性 语法：transition: property duration timing-function delay; property：指定要应用过渡效果的 CSS...

CSS 3D CSS 3D 是 CSS（层叠样式表）的一个重要特性，它允许开发人员在网页上创建具有三维空间效果的元素，为用户带来更加丰富和沉浸式的视觉体验。以下是对 CSS 3D 几个关键方面的详细解释： 一、核心概念 1.三维空间坐标系： 在 CSS 3D 中，使用三维空间坐标系，由 x、y 和 z 轴组成。 x 轴是水平轴，从左到右为正方向。 y 轴是垂直轴，从上到下为正方向。 z 轴是深度轴，从屏幕外向屏幕内为正方向。 2.视角与透视： Perspective（透视）：该属性定义了观察 3D 场景的距离，它影响元素在 3D 空间中的呈现效果。 可以通过设置父元素的 perspective 属性来实现透视效果，例如 perspective: 500px;。较小的值会使元素的 3D 效果更强烈，而较大的值会使元素看起来更扁平。 还可以使用 perspective-origin 属性来改变透视的原点，默认是元素的中心（50% 50%），可以调整为其他位置，如 perspective-origin: top...

CSS 2D CSS 2D 是指使用 CSS 实现的二维变换，它允许开发者对 HTML 元素进行平面内的各种变换操作，从而实现丰富的页面效果。以下是更详细的解释： 一、基本变换函数 translate(x, y)： 功能：将元素在二维平面上进行平移。 参数： 1.x：元素在水平方向（X 轴）上的移动距离。可以是像素值（如 50px）、百分比（如 50%）或其他长度单位。正值表示向右移动，负值表示向左移动。 2.y：元素在垂直方向（Y 轴）上的移动距离。可以是像素值、百分比或其他长度单位。正值表示向下移动，负值表示向上移动。 示例： 123.element { transform: translate(100px, 50px);} 说明：上述代码会将 .element 类的元素在水平方向向右移动 100 像素，在垂直方向向下移动 50 像素。 rotate(angle)： 功能：将元素绕其中心点旋转一定角度。 参数： angle：旋转的角度，单位是度（deg）。正值表示顺时针旋转，负值表示逆时针旋转。 示例： 123.element...

CSS 渐变 1.线性渐变 多个颜色之间的渐变，默认从上到下渐变。 background-image:linear-gradient( , , ); 使用关键词设置线性渐变的方向。 background-image:linear-gradient(to top, , , );background-image:linear-gradient(to right top, , , ); 使用角度设置线性2.渐变的方向。 background-imge:linear-gradient(30deg, , , ); 调整开始渐变的位置。 background-imge:linear-gradient(red 50px, , , ); 3.径向渐变 使用像素值值调整渐变圆的圆心位置。 background-image:radial-gradient(at 100px 50px, , , ); 调整渐变形状为正圆。 background-image:radial-gradient(circle, , ,...

CSS3长度单位 vm视口宽度的百分之多少10vw就是视口宽度的10%vh视口宽度的百分之多少10vw就是视口高度的10% box-sizing怪异盒模型 使用box-sizing属性可以设置和模型的俩种类型 width和height设置的是盒子内容区的大小。（默认值） content-box width和height设置的是盒子总大小（怪异盒模型） border-box resize调整盒子大小 使用resize属性可以可以控制是否允许用户调节元素尺寸。 none:不允许用户调整元素大小。（默认）both:用户可以调节元素的宽度和高度。horizontal:用户可以调节元素的宽度。vertical:用户可以调节元素的高度。 box-shadow盒子阴影 使用box-shadow属性为盒子添加阴影。 box-shadow: h-shadow v-shadow blur spread color...

列表标签 datalist:用于搜索框的关键字提示 details:用于展示问题和答案，或对专有名词进行解释 summary:写在detaisls的里面，用于指定问题或专用名词 文本标签 ruby:包裹需要注音的文字 rt:写注音，rt标签写在ruby的里面 文本标记 mark:标记 表单功能 placeholder:提示文字（注意：不是默认值，value是默认值），适用于文字输入类的表单控件。 required:表示输入项必填，适用于除按钮外其他表单控件。 autofocus:自动获取焦点，适用于所有表单控件。 autocomplete:自动完成，可以设置为on或off，适用于文字输入类的表单控件。 pattern:填写正则表达式，是用于输入类表单控件。 注意：多行输入不可用，且空的输入框不会验证，往往与required配合。 ...

CSS 相对定位 1.如何设置相对定位？ 给元素设置position:relative即可实现相对定位。 可以使用left、right、top、bottom四个属性调整位置。 2.相对定位的参考点在哪里？ 相对自己原来的位置 3.相对定位的特点 不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。 默认规则是： 定位的元素会盖在普通元素之上。 都发生定位的俩个元素，后写的元素会盖在先写的元素之水上。 left不能和right一起设置，top和bottom不能一起设置。 相对定位的元素，也能继续浮动，但不推荐这样做。 想对行为的元素，也能通过margin调整位置，但不推荐这样做。 绝大多数情况下，相对定位，会与绝对定位配合使用。 CSS 绝对定位 如何设置绝对定位？ ...

CSS 浮动（float） 现在浮动是主流的页面布局方式之一。 1.元素浮动后的特点 脱离文档流 不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高。 不会独占一行，可以与其他元素共用一行。 不会margin合并，也不会margin塌陷，能够完美地设置四个方向的marginpadding。 不会像行内块一样被当作文本处理（没有行内块的空白问题）。 2.浮动后会有哪些影响对兄弟元素的影响:后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。对父元素的影响:不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽高依然束缚浮动的元素。 3.解决浮动产生的影响（清除浮动） 解决方案： 1.方案一：给父元素指定高度。 2.方案二：给父元素也设置浮动，带来其他影响。 3.方案三：给父元素设置overflow:hidden。 ...