学习CSS.14学习笔记
伸缩容器,伸缩项目 伸缩容器:开启了flex的元素,就是:伸缩容器。 1.给元素设置:dispay:flex或display:inline-flex,该元素就变为了伸缩容器。2.display:inline-flex很少使用,因为可以给多个伸缩容器的父容器,也设置为伸缩容器。3.一个元素可以同时是:伸缩容器、伸缩项目。 伸缩项目:伸缩容器所有子元素自动成为了:伸缩项目。 1.仅伸缩容器的子元素成为了伸缩项目,孙子元素、重孙子元素等后代,不是伸缩项目。2.无论原来是哪种元素(快、行内块、行内),一旦成为了伸缩项目,全都会“块状化”。 主轴与侧轴 主轴:伸缩项目沿着主轴排列,主轴默认是水平的,默认方向是:从左到右(左边是起点,右边是终点)。 侧轴:与主轴垂直的就是侧轴,侧轴默认是垂直的,默认方向是:从上到下(上边是起点,下边是终点)。 主轴方向 属性名:flex-direction 常用值如下: row:主轴方向水平从左到右--默认值 row-reverse:主轴方向水平从右到左。 column:主轴方向垂直从上到下。 ...
学习CSS.13学习笔记
CSS 动画 相较于传统的脚本实现动画技术,使用 CSS 动画有三个主要优点: 1.能够非常容易地创建简单动画,你甚至不需要了解 JavaScript 就能创建动画。 2.动画运行效果良好,甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使 用 JavaScript 实现的动画通常表现不佳(除非经过很好的设计)。 3.让浏览器控制动画序列,允许浏览器优化性能和效果,如降低位于隐藏选项卡中的动画更新频率。 CSS 动画是网页设计中用于创建动态和交互效果的强大工具,以下是关于 CSS 动画的学习内容: 基本概念 关键帧:CSS 动画通过定义关键帧来描述动画的不同状态。关键帧使用@keyframes规则来创建,它允许你指定动画在不同时间点的属性值。 动画属性:通过一系列 CSS 动画属性来控制动画的行为,包括动画名称、持续时间、播放次数、播放方向、延迟时间等。 主要属性 @keyframes 语法:@keyframes animationName { keyframe-selector { property:...
学习CSS.12学习笔记
CSS 过渡 CSS 过渡是 CSS 中一项非常实用的特性,它可以在元素的属性值发生变化时创建平滑的过渡效果,提升用户体验。以下是关于 CSS 过渡的学习内容: 基本概念 过渡属性:CSS 过渡主要通过transition属性来实现,它是一个复合属性,用于设置过渡效果的各个方面,包括过渡的属性、持续时间、过渡函数和延迟时间。 过渡效果触发:通常在元素的状态发生改变时触发过渡效果,比如鼠标悬停(:hover)、获取焦点(:focus)、激活(:active)等伪类状态变化,或者通过 JavaScript 动态修改元素的属性值。 transition属性 语法:transition: property duration timing-function delay; property:指定要应用过渡效果的 CSS...
学习CSS.11学习笔记
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.10学习笔记
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.9学习笔记
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, , ,...
学习CSS.8学习笔记
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...
认识HTML.4学习笔记
列表标签 datalist:用于搜索框的关键字提示 details:用于展示问题和答案,或对专有名词进行解释 summary:写在detaisls的里面,用于指定问题或专用名词 文本标签 ruby:包裹需要注音的文字 rt:写注音,rt标签写在ruby的里面 文本标记 mark:标记 表单功能 placeholder:提示文字(注意:不是默认值,value是默认值),适用于文字输入类的表单控件。 required:表示输入项必填,适用于除按钮外其他表单控件。 autofocus:自动获取焦点,适用于所有表单控件。 autocomplete:自动完成,可以设置为on或off,适用于文字输入类的表单控件。 pattern:填写正则表达式,是用于输入类表单控件。 注意:多行输入不可用,且空的输入框不会验证,往往与required配合。 ...
学习CSS.7学习笔记
CSS 相对定位 1.如何设置相对定位? 给元素设置position:relative即可实现相对定位。 可以使用left、right、top、bottom四个属性调整位置。 2.相对定位的参考点在哪里? 相对自己原来的位置 3.相对定位的特点 不会脱离文档流,元素位置的变化,只是视觉效果上的变化,不会对其他元素产生任何影响。 定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的。 默认规则是: 定位的元素会盖在普通元素之上。 都发生定位的俩个元素,后写的元素会盖在先写的元素之水上。 left不能和right一起设置,top和bottom不能一起设置。 相对定位的元素,也能继续浮动,但不推荐这样做。 想对行为的元素,也能通过margin调整位置,但不推荐这样做。 绝大多数情况下,相对定位,会与绝对定位配合使用。 CSS 绝对定位 如何设置绝对定位? ...
学习CSS.6学习笔记
CSS 浮动(float) 现在浮动是主流的页面布局方式之一。 1.元素浮动后的特点 脱离文档流 不管浮动前是什么元素,浮动后:默认宽与高都是被内容撑开(尽可能小),而且可以设置宽高。 不会独占一行,可以与其他元素共用一行。 不会margin合并,也不会margin塌陷,能够完美地设置四个方向的marginpadding。 不会像行内块一样被当作文本处理(没有行内块的空白问题)。 2.浮动后会有哪些影响对兄弟元素的影响:后面的兄弟元素,会占据浮动元素之前的位置,在浮动元素的下面;对前面的兄弟无影响。对父元素的影响:不能撑起父元素的高度,导致父元素高度塌陷;但父元素的宽高依然束缚浮动的元素。 3.解决浮动产生的影响(清除浮动) 解决方案: 1.方案一:给父元素指定高度。 2.方案二:给父元素也设置浮动,带来其他影响。 3.方案三:给父元素设置overflow:hidden。 ...


