- 博客(25)
- 收藏
- 关注
RSS订阅原创 线性渐变 linear-gradient
background: linear-gradient(方向, 颜色1 范围1, 颜色2 范围2,...);方向：数值（单位deg)、关键词（left|right top|bottom)颜色：关键词、十六进制色值、rgb(r,g,b)、rgba(r,g,b,a)- to right bottom 方向朝向右下角。方向：加前缀需要把to去掉，方向是相反的。- to right top 方向朝向右上角。- to left bottom方向朝向左下角。- to top left 方向朝向左上角。
2023-02-27 21:07:46
203
原创 重复线性渐变
* 方向朝向左上角，red--blue渐变 *//* 方向：加前缀需要把to去掉，方向是相反的 *//* 兼容里的写法，先写私有前缀，在写标准的 *//* 不加前缀记得加to */20%-60%：黄色和粉色渐变。60%-100%：纯粉色 *//* 重复线性渐变 */0%-20%：纯黄色。
2023-02-27 21:07:13
176
原创 flex-wrap属性
换行，第一行显示在下方。注意：父元素有固定高度且高度大于子元素高之和换行中间有缝隙。换行，第一行显示在上方。flex-wrap属性：指定弹性盒子的子元素换行方式。父元素高度有内容撑开换行没有缝隙。
2023-02-27 19:26:39
300
原创 align-items属性
默认值，如果弹性子元素没有高度或高度为auto，将占满整个容器的高度。子元素在第一行文字的基线对齐。子元素在侧轴顶端对齐。align-items属性：弹性子元素在（侧轴）交叉轴上的对齐方式。子元素在侧轴末端对齐。子元素在侧轴中间对齐。
2023-02-27 19:25:07
2733
原创 justify-content 属性
子元素之前、之间、之后都留有空白空间，且空间自行分配,项目之间的间隔比项目与边框的间隔大一倍。两端对齐，子元素和子元素之间有空白空间,项目之间的间隔都相等。justify-content 属性：设置主轴的对齐方式,弹性子元素在主轴方向上的对齐方式,space-evenly:弹性项目平均分布在该行上,相邻项目的间隔，项目与容器之间空间相等。
2023-02-27 19:24:26
2753
原创 css3过渡动画——transition属性
1.linear 相同的速度从开始到结束，也就是匀速 2.ease 默认值 慢速度开始--速度变快--慢速度结束 3.ease-in 慢速度开始的过渡效果，也就是以低速度开始 4.ease-out 慢速度结束的过渡效果，也就是以低速结束 5.ease-in-out 以慢速度开始和结束的过渡效果。动画执行时间：默认0s，s|ms(毫秒) 1s=1000ms。css样式：参与过渡的css属性名称|all表示所有属性。延迟时间：默认0s,单位s|ms。
2023-02-27 14:12:23
96
原创 display
将容器设置为flex布局之后，子元素中的float、clear、vertical-align属性都会失效。弹性子元素-类似于行内块元素，如果不设置宽高，由内容撑开；即使是行内元素也可以设置宽高。将对象作为内联块级弹性伸缩盒显示。将对象作为弹性伸缩盒显示。
2023-02-27 14:10:30
53
原创 添加弹性盒
主轴方向垂直方向，起点在下方。主轴方向为水平方向，起点在右端。默认值，主轴方向为水平方向，起点在左端。主轴方向为垂直方向，起点在上方。flex-direction属性：设置主轴的方向，子元素的排列方向。
2023-02-27 14:09:58
46
原创 弹性盒概念
弹性盒子是CSS3的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行 排列、对齐和分配空白空间操作方便，布局简单，移动端使用广泛PC端浏览器支持情况较差IE11或更低版本中，不支持或部分支持在盒模型中较为灵活弹性盒模型的内容包括：弹性容器、弹性子元素——项目原理：为父元素设置flex属性，控制子元素的位置及排列方式应用场景 : 移动端。
2023-02-27 14:09:34
53
原创 html5
语义：定义整个文档或文档中一个节段的的头部（页眉）。典型应用：论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组，或者其他独立的内容项目。作用：元素表示文档、页面、应用或网站中的独立结构，可以成为可独立分配的或可复用的结构。向后兼容， 就是本设备（或者软件）跟更老的设备比较， 是否可以读取更老设备的数据。典型应用：主导航、侧边栏导航、页内导航、菜单、面包屑导航、分页、目录和索引等。表示页面中一个内容区块或整个页面的脚注 , 包含友情链接、版权等。定义文档中的节（页面中内容的区段、文章中的章节）。
2022-10-09 08:57:16
55
原创 css总结
概念：当样式声明发生冲突时，用户代理需要确定样式声明的最终值，既要考虑样式的来源又要考虑样式的特殊声明又要考虑优先级、以及先后顺序 ，这个过程就叫做层叠。当一个标签被相同的选择器 选择到的时候，相同的样式会发生层叠,遵循就近原则。浏览器默认字号16px，未经调整的浏览器都符合：1rem = 16px。浏览器默认字号16px，未经调整的浏览器都符合：1em = 16px。相对长度单位，相对于父元素的font-size属性值而言。相对长度单位，相对于根元素的font-size属性值而言。不同的样式不会有影响。
2022-10-09 08:54:23
51
原创 css总结
概念：当样式声明发生冲突时，用户代理需要确定样式声明的最终值，既要考虑样式的来源又要考虑样式的特殊声明又要考虑优先级、以及先后顺序 ，这个过程就叫做层叠。当一个标签被相同的选择器 选择到的时候，相同的样式会发生层叠,遵循就近原则。浏览器默认字号16px，未经调整的浏览器都符合：1rem = 16px。浏览器默认字号16px，未经调整的浏览器都符合：1em = 16px。相对长度单位，相对于父元素的font-size属性值而言。相对长度单位，相对于根元素的font-size属性值而言。不同的样式不会有影响。
2022-10-09 08:51:44
58
原创 一、PS基础
Adobe Photoshop，简称“PS”]，是由Adobe 开发和发行的[图像处理软件]。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编 辑工作。
2022-10-09 08:49:23
74
原创 一、css3的transform属性
取值:水平向右为正值，垂直方向向下正值/* 沿着水平方向位移 */当为一个值的时候，只沿着水平方向位移注意:元素位移之后，原来的位置还在2) transform: rotate(ndeg) 旋转x轴：水平，向右为正，向左为负y轴：垂直，向下为正，向上为负。
2022-10-09 08:47:46
99
原创 应用实例—两列自适应
div class="right"> 我是文本内容右边盒子宽度自适应, 添加margin-left:左盒子宽度。左边的盒子固定宽度，添加float:left。实现要点：单列定宽，单列自适应。
2022-10-08 08:44:35
72
原创 浮动特性应用实例
我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图介。最初只用于在成块的文本内浮动图像为图片和文字之间的对齐方式是基线对齐 要想图文环绕 需要给图片设置浮动。总结：浮动脱离文档流不脱离文本流。
2022-10-08 08:43:38
81
原创 今日学习笔记
弹性盒子是CSS3的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行 排列、对齐和分配空白空间操作方便，布局简单，移动端使用广泛PC端浏览器支持情况较差IE11或更低版本中，不支持或部分支持在盒模型中较为灵活弹性盒模型的内容包括：弹性容器、弹性子元素——项目原理：为父元素设置flex属性，控制子元素的位置及排列方式应用场景 : 移动端。
2022-09-24 16:29:38
68
原创 今日学习笔记
弹性盒子是CSS3的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行 排列、对齐和分配空白空间操作方便，布局简单，移动端使用广泛PC端浏览器支持情况较差IE11或更低版本中，不支持或部分支持在盒模型中较为灵活弹性盒模型的内容包括：弹性容器、弹性子元素——项目原理：为父元素设置flex属性，控制子元素的位置及排列方式应用场景 : 移动端。
2022-09-21 09:34:26
73
原创 今日学习笔记
设置盒子的宽度(限制宽度) white-space：nowrap；设置文本不换行 overflow：hidden；/* 溢出显示省略号 */white-space: nowrap;/* 强制不换行 *//* 设置宽度可以微调省略号的盒子大小，盖住多余的文字 */white-space: nowrap;/* 强制不换行 *//* 子绝父相 */overflow: hidden;/* 溢出隐藏 *//* 溢出隐藏 *//* 关键代码 */文本溢出的显示省略号。
2022-09-07 20:50:20
61
原创 今日学习笔记
3.如果没有定位父级相对于浏览器窗口发生定位偏移（如果其父亲没有相对定位，会一直往上找，直到相对于html）通常配合绝对定位使用（子绝父相）结合实际案例，如焦点图中的分页，翻页，视频网站中的 vip标签等。表示“将元素放在文档布局流的默认位置，HTML 元素的默认值，即没有定位，遵循正常的文档流对象。没有定位父级时相对于html进行定位，有定位父级时相对于最近的定位父级进行定位。2.有定位父级相对于定位父级发生定位偏移。相对于窗口定位的元素如弹窗、跟随滚动的导航、侧边栏。3.不会随页面的内容滚动而滚动。
2022-09-05 14:37:45
48
原创 浮动特性应用实例
css精灵英文叫法 css sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位”；其实就 是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”， “background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置。最初只用于在成块的文本内浮动图像为图片和文字之间的对齐方式是基线对齐 要想图文环绕 需要给图片设置浮动。能够说出什么是CSS精灵。
2022-09-01 21:06:53
50
原创 今日份笔记
指定 CSS 表格边框，使用 border 属性，通常定义td,th的边框属性表格会呈现双边框，是因为表和 th / td 元素有独立的边界。table存在默认属性border-collapse：separate。
2022-08-26 19:30:01
47
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人