- 博客(28)
- 收藏
- 关注
RSS订阅原创 web知识
transform: translate(x,y) 沿着x轴和y轴移动。- 动画执行时间：默认0s，s|ms(毫秒) 1s=1000ms。2.ease 默认值 慢速度开始--速度变快--慢速度结束。3.ease-in 慢速度开始的过渡效果，也就是以低速度开始。- transform: translateX(x) 沿着x轴移动。- transform: translateY(y) 沿着y轴移动。5.ease-in-out 以慢速度开始和结束的过渡效果。/* 参与过渡的css属性名称 */
2023-02-25 18:26:10
54
原创 web知识
旋转 | transform: rotate();| 一个值（等比例缩放）、两个值 | 没有单位 | transform: scaleX();| 一个值（沿着水平方向位移），两个值 | 像素px | transform: translateX();| 一个值（沿着水平方向倾斜）、两个值 | deg角度 | transform: skewX();- a 指的是一个旋转角度值，如果为正值，元素围绕 Z 轴顺时针旋转；- a 指的是一个旋转角度值，如果为正值，元素围绕Y轴顺时针旋转；
2023-02-25 18:25:20
62
原创 web知识
* skew(30deg,45deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 45 度 */沿着中心点旋转，默认值。- transform: scale(x,y) 沿着x轴和y轴缩放。- transform: skew(x,y) 沿着x轴和y轴倾斜。- transform: scaleX(x) 沿着x轴缩放。- transform: scaleY(y) 沿着y轴缩放。- transform: skewX(x) 沿着x轴倾斜。- transform: skewY(y) 沿着y轴倾斜。
2023-02-25 18:24:47
59
原创 web知识
transform: translate(x,y) 沿着x轴和y轴移动。- 动画执行时间：默认0s，s|ms(毫秒) 1s=1000ms。2.ease 默认值 慢速度开始--速度变快--慢速度结束。3.ease-in 慢速度开始的过渡效果，也就是以低速度开始。4.ease-out 慢速度结束的过渡效果，也就是以低速结束。5.ease-in-out 以慢速度开始和结束的过渡效果。/* 参与过渡的css属性名称 *//* 动画执行时间 *//* 速度类型 *//* 延迟时间 *//* 复合写法 */
2023-02-25 18:24:13
34
原创 web知识
属性之间用空格隔开，先位移再旋转 .wrap:hover .box1 { transform: rotate(135deg); transform: translate(50px); transform: scale(1.5); /* 复合 先位移再旋转*/ transform: translate(100px) rotate(120deg) scale(1.5); }```*
2023-02-25 18:24:00
59
原创 web知识
流式布局是宽度使用百分比代替固定宽度px，高度大多使用px来固定因此在大屏幕手机下显示的效果会变成页面元素的宽度被拉长，高度和原来保持一致。user-scalabl=yes 允许用户手动缩放，默认值。布局视口：width:虚拟窗口的屏幕宽度 device-width设备宽。user-scalabl=no 不允许用户手动缩放。initial-scale 页面的初始缩放比。1、实际显示的效果不友好,屏幕越大，宽度被拉的很长，容易变形。minmun-scale：最小缩放比。可以很好的来解决自适应的问题。
2023-02-25 18:22:39
67
原创 web知识
在布局过程中只要使用 rem 设置元素的尺寸，在改变 rem 的基准值 html 的字体大小的时候，页面上的元素将等比例缩放实现适配。 3.按照PC端布局方式正常布局，将px单位改为rem单位（较小 的长度比如1px的边框就不需要转换成rem,直接设置px） rem是指相对于根元素的字体大小的单位，即根据html元素的font-size来计算大小。* rem是css3新增单位，它是相对于根元素的字号大小的单位。 1、设置页面的viewport。相对单位 : rem。
2023-02-25 18:21:59
32
原创 web知识
(当前元素的宽*shrink值)/(元素1*元素1shrink值+元素2*元素2shrink值...) * 溢出空间宽度。- align-self属性：调整自身在侧轴的对齐方式，弹性容器中被选中子项的对齐方式（设置在子元素中）flex是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。- flex-grow属性：子元素的放大比例（子项宽度和
2023-02-25 18:21:29
33
原创 web知识
定义弹性盒项目基准值（即参与计算的最终值————1.基于它计算容器的剩余空间2.基于它计算增长以后的最终值）- justify-content: center;- 注意：与项目的宽、高同时存在时，flex-basis的优先级高于宽、高。- calc()函数支持 "+", "-", "*", "/" 运算；- 任何长度值都可以使用calc()函数进行计算；- calc()函数使用标准的数学运算优先级规则；- 水平垂直居中的元素的父元素上设置相关属性。
2023-02-25 18:20:39
26
原创 web知识
有俩条轴：默认的主轴方向---x轴的方向，水平向右（左侧边为主轴的起始点，右侧边为主轴的终点）- space-evenly:弹性项目平均分布在该行上,相邻项目的间隔，项目与容器之间空间相等。justify-content 属性：设置主轴的对齐方式,弹性子元素在主轴方向上的对齐方式,弹性子元素--类似于行内块元素，如果不设置宽高，由内容撑开，即使是行内元素也可以设置宽高。默认的交叉轴（侧轴）方向---y轴的方向，水平向下（上方为侧轴的起点，下方为侧轴的终点）- flex-direction: row;
2023-02-25 18:19:32
33
原创 web知识
spread阴影大小;正数阴影扩大（阴影的大小大于盒子大小） 负数阴影缩小(阴影的大小小于盒子的大小)h-shadow水平 x轴的偏移量 阴影的水平偏移量 正数往右，负数往左；v-shadow垂直 y轴的偏移量 阴影的垂直偏移量，正数往下，负数往上；blur模糊值 阴影的模糊值 不能为负数 必须，单位：px。实列：text-shadow:0px 0px 5px 颜色。可以在一个元素上设置多个阴影，之间用逗号隔开。0阴影大小和盒子大小相同。
2023-02-24 17:24:09
30
原创 web知识
实列:background:url(image)no-repeat left top url(image)no-repeat right bottom。背景裁剪到边框区域，在内容区，内填充区，边框区显示。contain:包含：等比列缩放背景图片到完整的盒子中，但是背景图在区域范围内不能铺满，取决于盒子和图片的比例不一致。背景图的定位属性：background-origin:padding-box;不同的背景用逗号隔开，并且还可以给不同的背景设置不同的属性(背景起始位置，背景是否重复等)
2023-02-24 17:23:22
37
原创 web知识
input type="text" placeholder="提示信息" name="nane" autocompiete="off或on {关闭或打开}" >-- 新增的表单元素： 用于电话号码的输入框，一般用于触屏的网页，在电脑中无效，在触屏网页中会直接调用虚拟的电话数字键盘。source媒介标签。
2023-02-24 17:23:17
27
原创 web知识
script:js创建html5标签---创建出的html5标签是行级元素，需要使用css把行级元素转换为块级元素。nav定义导航链接部分：主导航，侧边栏导航， 页内导航，菜单，面包屑导航，分页，目录和索引。:相对独立的内容块 ：图表 代码块 图片 块级标签自带外边间距。article表示文档或网页中的独立结构---可以包含多个section：论坛。页面中突出显示，高亮的部分，目的吸引用户的注意。新增的语义化元素：header定义整个文档中或一个节段的头部。2，新增的表单元素，新属性。
2023-02-24 17:22:46
33
原创 web知识
- 什么是BFC:BFC(block formatting context)是web页面中盒模型布局的css渲染模式---块级格式化上下文 它是一个独立的渲染区域 只有block。4：将背景盒1和背景盒2移动，相对定位，形成三列背景效果。方法2 原理 盒子的层层嵌套 利用内盒子的高度变化 外盒子的高度也会同步变化。步骤 1： 准备3个负责背景的盒子，在html结构上要嵌套结构。2：将内容盒放在最内层的背景盒子里面bg3。2： 可以实现任意列的等高布局。2： 每一列的背景不同。
2023-02-24 17:21:29
76
原创 web知识
5，移动，right通过margin-left：-右盒子宽度，配合相对定位，left:右盒子的宽度 移动掉右侧预留的位置。3，第2个盒子内部的盒子，不固定宽度，通过左右的margin预留出左右俩个盒子的位置。5，移动第5个盒子，通过margin-left:-右盒子宽度 实现。4，移动第4个盒子，通过margin-left:-100% 实现。2，第2个盒子固定宽度100%，第4个和第5个盒子固定宽度。2，center宽度为100% 左右俩个盒子固定宽度。步骤：1，第2个盒子要与第4个和第5个盒子在一排。
2023-02-24 17:20:41
33
原创 web知识
单行文本溢出显示： overflow:hidden;（溢出隐藏） white-space:nowrap;(强制不换行) text-overflow:ellipsis;(溢出显示省略号) -->
2023-02-24 17:19:04
24
原创 web知识
表示将元素放在文档流的默认位置，HTML元素的默认值。即使没有定位，遵循正常的文档流布局。元素的位置相对于浏览器的窗口进行固定，即使窗口是滚动的它也不会移动。语法：position:static;语法：position:fixed;静态定位的元素不会受到边偏移量的影响。使用场景：滚动的导航，侧边栏，弹窗。使用场景：重置定位属性。
2023-02-24 17:18:02
30
原创 web知识浮动
给父元素添加overflow属性，overflow的值不为visible,其他值都可以尝试解决。在浮动元素的最后面加一个空的块级元素标签，此元素本身不浮动，并且添加样式clear属性。浮动：可以让元素脱离文档流，按照指定的方向进行排列，直至遇到父元素的边界或另一个浮动元素为止。网页中有很多布局效果，标准的布局方式没法完成，使用浮动改变元素的默认排列方式。④伪元素法 after ( 在元素里面的最后面加一个伪元素)①子元素浮动导致父元素的高度塌陷，会影响后面元素的布局。①给浮动元素的父元素设置固定高度。
2023-02-24 17:17:22
315
原创 web知识
相对于元素在正常文档流重的位置移动它，把一个正常布局流中的元素从它默认位置按照坐标进行相对移动。定位能够让我们把一个元素从他原本在正常布局流中应该在的位置移动到另一个位置。（自由的在某个盒子内移动位置 或者固定在屏幕中的某个位置）left 设置距离：包含块距离左部的距离。普通文档流：块级元素垂直排列，行内元素水平排列。bottom 设置距离：包含块距离底部的距离。right 设置距离：包含块距离右部的距离。top 设置距离：包含块距离顶部的距离。让两个块级元素水平排列：①转行内块级元素。
2023-02-24 17:17:06
32
原创 web知识，学到就是赚到
②给其中一个盒子加父元素，给父元素加overflow：hidden；改变渲染规则-BFC。并且再次与父元素的margin值发生复合，取两个值的最大值，负值会取绝对值的较大值。当父元素没有padding和border的时候，子元素与父元素直接相邻 ，当两个 块级的兄弟元素垂直方向上的margin值直接相遇，会发生合并。解决方法：①尽量只定义 其中一个的margin值，避免直接相遇。解决方法：①给父元素设置边框或者内填充（慎用）嵌套的块级元素，它的垂直外边距会塌。子元素的margin值会传递给父元素，
2023-02-21 17:25:32
26
原创 web多重知识点（html)
HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言。html ，类比于建房子的时候要搭的地基跟钢筋。* 行为：页面的轮播图，返回顶部... javascript 相当于房子加灯的开关。* 表现：页面的美化，装饰。通过HTML标记（标签）对网页中的文本、图片、多媒体等内容进行描述。结构层html和表现层css，是 W3C 制定的规范，万维网联名。 行为层js，是 ECMA 制定的规范，欧洲计算机协会。- 1）新建一个后缀名为.html的文件。
2022-11-03 08:25:17
27
原创 web教学（给我好好看）
今天学的异常多，有无序、有序、自定义列表和锚点跳转 无序列表：语法为〈ul〉〈/ul〉用于将没有数字顺序的一组内容或数据进行分组 还有type属性 disc ,circle, square, none.通常使用于新闻列表，商品列表等。有序列表：语法为〈ol〉〈/ol〉用于将有数字顺序的一组数据或内容进行分组。 自定义列表：语法〈dl〉〈/dl〉用于将一组项目及相关的描述进行分组的列表。通常使用在名称解释，分类
2022-11-02 21:07:46
62
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人