![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
zzzley
这个作者很懒,什么都没留下…
展开
-
行内元素、行内块、块级元素分别有哪些
【代码】行内元素、行内块、块级元素分别有哪些。原创 2023-02-28 20:09:45 · 72 阅读 · 0 评论 -
iconfont的使用(详细介绍)
参考这个博主的,链接如下:转载 2023-02-28 19:48:52 · 96 阅读 · 0 评论 -
移动端适配rem
rem(root em)是相对单位,相对于根元素(html元素)的字体大小而言。例如,如果根元素的字体大小为16px,1rem就相当于16px。如果根元素的字体大小改变为20px,1rem就相当于20px。rem是一种强大的单位,因为它可以自动适应不同屏幕大小,从而实现移动端适配。rem是相对于根元素的字体大小来计算的,而根元素的字体大小又是根据设备的屏幕宽度来动态计算的。这样做的好处是可以实现页面的自适应,使得在不同大小的屏幕上,页面元素的大小和布局都能够保持一致,从而提供更好的用户体验。原创 2023-02-28 10:45:17 · 741 阅读 · 0 评论 -
CSS中的text-overflow属性详解 (控制文字在一行显示,超出部分加省略号)
在上面的代码中,我们将文本内容放在一个200像素宽的容器中,并设置text-overflow为ellipsis(表示使用省略号来处理文本内容的溢出),white-space为nowrap(表示不允许文本进行换行),overflow为hidden(表示当文本内容超出容器宽度时,隐藏超出部分)。其中,white-space属性用于控制文本如何进行换行,而overflow属性用于控制当文本内容超出容器限定宽度时的显示方式。这时候,就需要使用text-overflow属性来处理文本内容的溢出问题。原创 2023-02-23 16:54:26 · 9975 阅读 · 1 评论 -
flex 布局盒子 justify-content align-items
使用justify-content调节元素在主轴的对齐方式。目标:使用flex属性修改弹性盒子伸缩比。原创 2023-02-17 20:25:59 · 285 阅读 · 0 评论 -
调整背景图片的位置,居中,靠左,靠右等(background-position 用法详细介绍)
如(图二),设置background-position: -50px -50px,背景图的起始点位于(-50px, -50px);总结:background-position为背景图的起始点,可相对整个坐标轴进行定位,且仅容器内的背景图内容可见。由此,显示的背景是被截断后的容器内的图片内容,如(图三)所示,其他象限遮罩部分图片不可见。容器:background作用的元素,即其视口,超出该容器的部分,将被隐藏。如(图一),以容器的起始点作为原点(0,0)绘制背景图片的起始位置坐标轴。2、百分比 -> px。原创 2023-02-16 15:13:06 · 2224 阅读 · 0 评论 -
css动画-animation:动画名称 动画时长 速度曲线 延迟时间 循环次数 动画方向 执行完毕时的状态
keyframes 动画名称{0%{}50%{}100%{}原创 2023-02-16 11:21:19 · 572 阅读 · 0 评论 -
平面转换的综合案例之 图片放大、文字上移、背景渐变
【代码】平面转换 图片放大、文字上移、背景渐变。原创 2023-02-15 15:29:37 · 92 阅读 · 0 评论 -
z-index
z-index属性是用来设置元素的堆叠顺序或者叫做元素层级。z-index的值越大,元素的层级越高。当元素发生重叠时,层级高的元素会覆盖在层级低的元素的上面,使层级低的元素的重叠部分被遮盖住。原创 2023-02-15 14:21:16 · 64 阅读 · 0 评论 -
渐变背景background-image:linear-gradient(transparent,rgba(0,0,0,0.6)
【代码】渐变背景background-image:linear-gradient(transparent,rgba(0,0,0,0.6)原创 2023-02-15 11:47:26 · 165 阅读 · 0 评论 -
float浮动,造成父级元素高度为0 overflow:hidden解决
子元素1子元素2原创 2023-02-14 17:10:48 · 200 阅读 · 0 评论 -
css过渡
作用:让元素的样式慢慢的变化,常配合hover使用,增强网页交互体验。属性名:transition。原创 2022-12-02 15:14:22 · 521 阅读 · 0 评论 -
background-size:背景图片缩放
语法:background-size:宽度 高度;作用:设置背景图片的大小,原创 2022-12-02 14:42:47 · 1853 阅读 · 0 评论 -
css精灵图的使用步骤
1.创建一个盒子,例如span、b、div2.设置盒子的大小为小图片的大小3.设置背景图片为精灵图4.测量小图片距离精灵图左边和上边的距离(background-position:x y),x和y的值均为负数。下面这就是一个精灵图。原创 2022-12-01 16:00:19 · 1071 阅读 · 0 评论 -
鼠标悬停时显示图片,不悬停时,隐藏图片
鼠标悬停时显示图片,不悬停时,隐藏图片原创 2022-11-28 14:08:55 · 1699 阅读 · 0 评论 -
基线、垂直对齐(不是垂直居中)、vertical-align、图片垂直居中
基线、垂直对齐(不是垂直居中)、vertical-align、图片垂直居中原创 2022-11-28 11:11:35 · 523 阅读 · 0 评论 -
相对定位、绝对定位、固定定位、水平和垂直居中
相对定位、绝对定位、固定定位、水平和垂直居中原创 2022-11-26 17:48:34 · 549 阅读 · 0 评论 -
块级元素嵌套,会出现坑爹(塌陷)现象
两个块级元素嵌套,子级块元素设置的margin-top不会出现作用,但是父级块元素会出现外边距。原创 2022-11-25 15:48:07 · 117 阅读 · 0 评论 -
display:inline inline-block block
display:block,inline,inline-block原创 2022-11-24 17:21:21 · 937 阅读 · 0 评论 -
nth-child(n)用法
nth-child(n)用法原创 2022-11-24 13:57:44 · 318 阅读 · 0 评论