- 博客(12)
- 收藏
- 关注
RSS订阅原创 前端记录第十二天
wrap 换行 父元素容器不够会出现换行， 换行的项目会把剩余的空间平均分配，自己占据在剩余空间中间部分。如果父元素有空余空间基准长度就会变成设置的长度，如果没有空余空间就会等比缩小子元素的长度。flex布局分为两个轴，一个是主轴一个是侧轴，改变主轴方向后，侧轴方向也会随之改变。space-around 项目之间的距离相等，比边缘的距离大一倍。主轴方向的基准长度，如果主轴是X轴基准长度改变的是宽，如果主轴是Y轴改变的就是高。给子元素设置基准长度，即使有默认的宽和高，只要设置了基准长度就会以基准长度为准。
2024-01-19 19:59:45
948
1
原创 前端记录第十一天
属性值： none 默认值 动画执行完毕，回到原来的位置 forwards 动画执行完毕时，会停留在动画结束的位置 backwards 动画执行完毕时，回到开始的位置。设置动画效果：@keyframes 动画名 动画名必须和第一步起的名字一致。第二步：设置动画的持续时间，如果动画的持续时间非常短，就会出现看不到初始位置的情况。过渡和动画效果一样，但动画是页面加载立即执行，过渡需要执行条件才会触发过渡效果。第一步：设置动画名，动画名没有特殊要求，但不能是中文。
2024-01-18 20:56:27
396
1
原创 前端记录第十天
注意：同时写X Y的位移，下面的会覆盖上面的，因为属性一样（都是transform）transform X ：代表X轴方向位移，是相对于自身的移动。transform Y ：代表Y轴方向位移，是相对于自身的移动。rotateZ是2D旋转，值为角度值，单位是deg，可以为正值，也可以为负值。如果在transform内同时设置X轴和Y轴时，必须是空格隔开。rotate复合属性如果只写一个值时，就代表是Z轴2D旋转。1代表不缩放，大于一代表变大，小于以代表变小。scale（X轴，Y轴） 复合属性。
2024-01-17 20:50:22
356
原创 前端记录第九天
origin和clip的值如果一样时，如果只写一个值，则origin和clip都设置，如果两个值，前面是origin，后面是clip。默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。cover：此时会保持图像的纵横比并将图像缩放成将完整覆盖背景定位区域的最小大小。contain：此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。content-box：背景绘制在内容方框内（剪切成内容方框）content-box：背景图像的相对位置的内容框。
2024-01-16 20:56:53
363
1
原创 前端记录第八天
4、设置偏移量后是相对于父元素（有相对定位的上一级元素）进行偏移，如果上一级没有定位就找上上级，如果都没有定位，就相对于浏览器进行偏移（子绝父相）6、绝对定位有偏移量后，使用margin-top和margin-left时，元素会在现在的位置的基础上移动（开启定位后不建议使用margin属性）3、开启定位的元素比普通元素层级高，同时开启绝对定位的元素，下面的元素层级比上面元素层级高。定义：定位就是将指定的元素摆放到页面的任意位置。1、一旦开启绝对定位，该元素就会脱离文档流（下面的元素会占据该元素的位置）
2024-01-13 11:01:24
917
1
原创 前端记录第七天
我们可以将父元素的高度写死，以避免塌陷的问题出现，但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。2、如果给上面的元素设置浮动时，下面的元素就会跑到上面元素的位置上（原因是上面的元素已经脱离了文档流，不会占据位置）但是当为子元素设置浮动以后，子元素就会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。子元素浮动后，就会文档流，就不会再继续撑开父元素，父元素就会出现浮动的高度塌陷问题。
2024-01-12 16:19:28
1002
1
原创 前端记录第六天
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right =父元素内容区的宽度（必须满足）* 盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width。外边距指的是当前盒子与其他盒子之间的距离， * 他不会影响可见框的大小，而是会影响到盒子的位置。
2024-01-11 20:07:48
861
1
原创 前端记录第五天
nth-child(even/odd) 从上至下选取奇数/偶数进行样式设置，odd/2n+1代表奇数的意思，even/2n代表偶数的意思。:nth-child(n) 从上至下选取第一个元素的第n个子元素进行设置样式，n代表数字。:nth-last-child(n) 从下至上选取第一个元素的第n个子元素进行设置样式。选择自己最近的一个兄弟进行样式设置，但是他们必须是同一个父元素。根据当前元素来设置自己的字体大小，可以根据自己的字体大小设置自己的宽高等。不存在的元素，在页面添加一些特殊的并不真实存在的元素。
2024-01-10 20:44:42
792
原创 前端记录第四天
一个标签可以拥有很多个类名，多个类名写在同一个class里，一个标签只能拥有一个class。如果标签有相同样式，为了性能及整洁度考虑，可以把相同样式提取出来，放在相同的类名里面。类名不能使用纯数字，可以使用英文或英文加数字，但是在实际开发中，以纯英文为主。一个标签可以允许设置class类选择器，也可以设置id选择器，也可以写行内样式。交集：给你一个元素设置样式时，通过标签和类名设置、类和类名设置、类名和id设置。同一个元素设置了多次相同的属性不同的值，只展示最后一个设置的样式。
2024-01-09 20:33:22
340
原创 前端记录第三天
label标签用于为表单中的其他控件元素添加说明文字，当用户在浏览器中单机label元素生成标签时，会自动将聚焦转移到该标签相关的表单控件上，label最重要的属性是for属性，for属性把label元素绑定到另一个元素，把for属性的值设置为相关元素的id属性值，指定为关联表单控件的id。表格用标签定义，标签标题用标签定义，每个表格有若干行，使用标签定义。表格的数据分组标签有,主要用于对表格数据的逻辑分组。
2024-01-08 16:06:22
325
原创 前端记录第一天
标题标签是一个双闭合标签，常用于文章中的标题以及副标题等。语义化标签就是让机器可以读懂内容，别人维护时也能一目了然。特点：自带加粗，有自己文本的大小，独占一行，默认间距。一个网页最多只写一个h1标题标签。
2024-01-05 16:34:47
346
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人