- 博客(26)
- 收藏
- 关注
RSS订阅原创 单元格在容器垂直位置,水平位置取值
space-evenly - 剩余空间均等分布在单元格与单元格，单元格与项目之间。单元格与容器边框之间。space-around - 单元格两侧间隔相等。所以，单元格之间的间隔比单元格与容器边框的间隔大一。space-between - 剩余空间分布在单元格之间，单元格与容器边框之间没有间隔。stretch - 列宽或行高为auto时有效。start - 对齐容器的起始边框。end - 对齐容器的结束边框。center - 容器内部居中。
2023-02-24 17:25:43
147
原创 设置行与行的间隔（行间距）
justify-content水平位置 总网格区域相对于容器左右对齐方式(网格内容大小小于容器宽时)定义了6列，第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px。align-content 位置 总网格区域相对于容器上下对齐方式(网格内容大小小于容器高时)minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。表示每列宽度100px，然后自动填充，直到容器不能放置更多的列。repeat(重复的次数，一个或空格隔开的多个值 )gap: 行间距 列间距;
2023-02-24 17:25:27
967
原创 CSS Grid(网格) 布
正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，划分网格的线，称为"网格线"（grid line）。行和列的交叉区域，称为"单元格"（cell）水平网格线划分出行，垂直网格线划分出列。
2023-02-24 17:23:40
123
原创 CSS Grid(网格) 布局
flexbox” 是一维的布局，是因为一个 “flexbox container” 一次只能处理一个维度上的元素布局，一行。CSS Grid 网格布局可以将网格元素放置在与这些行和列相关的位置上，进而快速、便捷的对页面结构进。相比较 “Grid网格布局”，则是二维布局可以同时处理行和列上的布局。通常适用于布局页面主要的区域布局或小型组。行布局，提高工作效率。
2023-02-24 17:21:07
140
原创 相对定位：
相对于元素在正常文档流中的位置移动它，把一个正常布局流中的元素从它默认位置按照坐标进行相对移动。它原本所在的空间不会改变。相对于元素本身的位置发生移动，它原本所占的空间不会改变。3、不定义边偏移量时对元素基本没有影响。作为定位父级使用、配合绝对定位。
2023-02-24 17:19:31
89
原创 绝对定位：
相对于【定位父级】进行定位、如果没有定位父级他会一层一层往上找，一直找到body【浏览器的窗口】。有定位父级、相对于最近的定位父级进行定位。通常需要配合相对定位使用（父相子绝）、分页、翻页、视频vip。语法：position：absolute；
2023-02-24 17:18:45
85
原创 静态定位：
表示将元素放在文档流的默认位置、HTML元素的默认值。即没有定位，遵循正常的文档流布局.语法：position：static;静态定位的元素不会受到边偏移量的影响。
2023-02-24 17:18:06
90
原创 什么是定位？
定位能够让我们把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置（自由的在某个盒子内移动位置或者固定在屏幕中的某一个位置）。转为行内块元素 display：inline-block。普通文档流：块级元素垂直排列，行级元素水平排列。bottom 设置距离：包含底顶部的距离。right 设置距离：包含块右侧的距离。left 设置距离：包含块左侧的距离。top 设置距离：包含块顶部的距离。1、什么办法可以让两个块级元素水平排列？浮动：float：left。
2023-02-24 17:15:57
97
原创 1、页面的三大组成部分
结构：给页面搭建基本的框架结构。html ，类比于建房子的时候要搭的地基跟钢筋。行为：页面的轮播图，返回顶部... javascript 相当于房子加灯的开关。表现：页面的美化，装饰。css 相当于给房子加背景和家具的排列布局。结构层html和表现层css，是 W3C 制定的规范，万维网联名。行为层js，是 ECMA 制定的规范，欧洲计算机协会。
2022-11-02 21:45:58
173
原创 2、css3过渡动画——transition属性
注意：必须设置transition-duration属性，否则执行时间为0，不会产生过渡效果。- 动画执行时间：默认0s，s|ms(毫秒) 1s=1000ms。2.ease 默认值 慢速度开始--速度变快--慢速度结束。3.ease-in 慢速度开始的过渡效果，也就是以低速度开始。4.ease-out 慢速度结束的过渡效果，也就是以低速结束。- css样式：参与过渡的css属性名称|all表示所有属性。5.ease-in-out 以慢速度开始和结束的过渡效果。多个css属性用逗号隔开。...
2022-08-18 11:42:56
511
原创 1、calc()函数
calc()函数支持 "+", "-", "*", "/" 运算；- 任何长度值都可以使用calc()函数进行计算；- calc()函数使用标准的数学运算优先级规则；- 运算符前后都需要保留一个空格。- 用于动态计算长度值，值灵活。运算符前后都需要保留一个空格。- css3新增功能。...
2022-08-18 11:41:07
231
原创 二. 复合写法
如果弹性子元素没有高度或高度为auto，将占满整个容器的高度。* align-self属性：调整自身在侧轴的对齐方式，弹性容器中被选中子项的对齐方式（设置在子元素中）* align-self: flex-start;（侧轴）交叉轴起点对齐。（侧轴）交叉轴终点对齐。（侧轴）交叉轴中点对齐。此属性和弹性容器的 align-items 属性作用相同。...
2022-08-18 11:39:57
92
原创 一、弹性盒子
自动分配距离，元素位于各行之前、之间、之后都留有空白空间, 中间的间距是两端间距的两倍,- align-content: space-evenly;平均对齐，元素位于各行之前、之间、之后都留有空白空间， 行间距自动分配 间距相等。- flex-wrap属性：指定弹性盒子的子元素换行方式。...
2022-08-18 11:38:34
353
原创 三、滑动门
滑动门核心技术就是利用背景属性（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。给span设置padding-right 让文字距离右边有点距离，美观。给a设置padding-left: 让文字距离左边有点距离，美观。实际文字写在span里面，span的宽度由文字和内边距撑开。css精灵图可以实现特殊形状的背景自由拉伸滑动，能适应不同字数的内容。span用来撑开右边的小括号。a的宽度是由span撑开了。a用来撑开左边的小括号。...
2022-08-12 16:15:47
169
原创 精灵图的原理
适用于一般小图片（如小图标，小背景），不适合大背景大布局背景。- 利用背景属性，使不同元素显示图片的不同部分。1.减少网页的http请求，提高页面的性能。## 2、css sprites的优缺点。2.通过引入背景图片，用背景定位实现。- 将页面中的背景图合并成一张图片。2.减少在图片上的命名困扰。1.必须要限定容器的大小。2.背景图位置需要计算。3.更换网页风格方便。...
2022-08-12 16:13:14
117
原创 二、CSS 精灵（雪碧图、精灵图）
background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置。css精灵英文叫法 css sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位”；是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”，- 掌握CSS精灵在实际示案例中的应用。- 能够说出什么是CSS精灵。...
2022-08-12 16:12:24
95
原创 什么是伪元素
element::before{ content:"伪元素的文本内容";- element::after{ content:"伪元素的文本内容";element元素内部，内容之前，添加“伪元素的文本内容”element元素内部，内容之后，添加“伪元素。用css语言创造出来的标签。伪元素创造的标签是行级标签。...
2022-08-12 16:01:06
406
原创 css长度单位
浏览器默认字号16px，未经调整的浏览器都符合：1rem = 16px。- 浏览器默认字号16px，未经调整的浏览器都符合：1em = 16px。- 相对长度单位，相对于父元素的font-size属性值而言。- 相对长度单位，相对于根元素的font-size属性值而言。- 是css3新增单位，IE8及更早版本浏览器中不兼容。- 相对于显示器的屏幕分辨率。...
2022-08-12 15:59:41
88
原创 清浮动的方法
3.为浮动元素的父盒子添加overflow属性；overflow的属性值可以为hidden,scroll,auto。优缺点：可能会隐藏内容或触发不需要的滚动条；优缺点：不够灵活，适用于高度固定的布局中。1.给浮动元素的父级盒子设置一个固定的高度。2.为浮动元素的父级盒子设置浮动。优缺点：会产生新的浮动问题。...
2022-08-12 15:58:13
77
原创 二、CSS 浮动
文档中可以显示的对象在排列时所占的位置，实际上就是一个网页内标签正常从上到下，从左到右的排列，比如，块级标签会独占一行，行级标签会在一行显示。浮动可以使元素【脱离文档流】，【按照指定方向排列】，直到遇到父元素的边界或另一个浮动元素【停止】注意：元素浮动后类似于行内块标签（没有行内块的间隙问题），在一行内展示，可以设置宽高。网页中有很多布局效果，标准流没有办法完成，使用可以利用浮动改变元素默认的排列方式，3.如果浮动元素的宽度之和大于父元素，则浮动盒会被挤到下一行。左浮动，标签向左浮动。...
2022-08-12 15:57:16
118
原创 1、垂直对齐方式 vertical-align属性
默认值，基线对齐 英文字母x的下端。- 图片与文本框垂直方向的对齐。- 图片与图片垂直方向的对齐。- 图片与文字垂直方向的对齐。
2022-08-12 15:56:04
246
原创 颜色的几种表现形式
1.英文的关键词red红色，orange橙色，yellow黄色，green绿色，cyan青色，blue蓝色，purple紫色。ps英文状态下，按下i键，鼠标右键单击，拷贝颜色的十六制进制代码，在代码中ctrl+v粘贴。aalpha透明度透明度在0-1之间表示，0表示完全透明1表示完全不透明。例#000000表示黑色#ff0000表示红色#ffffff表示白色。在代码的颜色中要写#在粘贴颜色的十六进制代码。由#和六位十六进制的数组成（0-9a-f）rgb(0,0,0);...
2022-07-18 21:37:14
440
原创 前端第二课
文本格式化标签span标签:无语义标签，用于区分样式没有实际的语义，可以理解为一个小盒子，里面一般装着一个或几个文本内容应用场景：控制局部文本的样式b标签：一个实体标签，它里面包围的文本显示粗体效果strong标签：一个语义标签，强调语气，它里面包围的文本显示粗体效果i标签：它里面包围的文本显示斜体效果em标签：一个语义标签，强调语气，它里面包围的文本显示斜体效果del标签：删除线sup标签：上标sub标签：下标特性宽度默认由内容撑开高度默认由内容撑开默认横向显示——水平布局，一行排不下，自动折行换行和空格
2022-07-12 21:57:11
74
原创 前段的第一课
结构：给页面搭建基本的框架结构。 html ，类比于建房子的时候要搭的地基跟钢筋。表现：页面的美化，装饰。 css 相当于给房子加背景和家具的排列布局。行为：页面的轮播图，返回顶部... javascript 相当于房子加灯的开关。结构层html和表现层css，是 W3C 制定的规范，万维网联名。行为层js，是 ECMA 制定的规范，欧洲计算机协会。...
2022-07-11 21:36:32
262
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人