![](https://img-blog.csdnimg.cn/20190918140158853.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
CSS
是落落呢
这个作者很懒,什么都没留下…
展开
-
自适应铺满
下面几种效果相同,都是铺满屏幕。!important 是优先级最高First这样可以铺满屏幕SecondThird原创 2022-01-27 11:46:13 · 226 阅读 · 0 评论 -
flex布局
容器的属性flex-direction设置主轴方向,有4种取值:取值方向row (默认情况)左---->右row-reverse右---->左column上---->下column-reverse下---->上flex-wrap是否换行:取值方向nowrap不换行wrap换行(换行在下方)wrap-reverse换行(换行在上方)flex-flowflex-flow就是flex原创 2022-01-26 20:55:03 · 201 阅读 · 0 评论 -
渐变色背景
先上效果图:渐变色,支持多种颜色的拼接,平滑过渡,可以分为线性渐变和径向渐变。由于目前使用到了线性渐变,所以说两句。上代码:margin: 0;padding: 0;width: 100%;height: 100%; background:linear-gradient(to bottom, rgba(143,221,046,0.3),rgba(24, 148, 90, 0.3),rgba(10, 86, 138, 0.3),rgba(22, 40, 202, 0.3));b原创 2022-01-23 21:02:20 · 371 阅读 · 0 评论 -
z-index
z-index 最值得注意的两点元素必须是同级的。目标元素不能和父级元素,子元素等非同级元素进行设置,否则会无效。position属性必须是absolute有效<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>z-index</title> <style> body{ width: 100vw; height原创 2021-02-09 15:11:58 · 57 阅读 · 1 评论 -
rpx
px单位,大家应该都清楚,这是长度单位,代表像素,很适合网页的开发,但是移动端的手机屏幕大小是不确定的,现在的手机那是花里胡哨的,各种尺寸都有,所以啊,我们需要一个新的,适合移动端的长度单位。所以啊,出现了 rpx。rpxrpx会根据手机的屏幕大小自动自动调整,将rpx转换成px,将复杂的转换交给电脑。所以啊,规定了,所有的手机的宽度都是750rpx。width:750rpx; /*宽度为750rpx*/pxwidth:750px; /*宽度为750px*/vhvh是屏幕的可见原创 2021-02-03 17:03:42 · 331 阅读 · 0 评论 -
居中对齐
整理一下CSS元素居中对齐的方式,看看自己到底有多少货。文章目录flexposition+margintransform+position文字居中对齐下面是要居中对齐的元素,代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>元素居中</title> </head> <body> <div class="ma原创 2021-02-02 16:15:18 · 538 阅读 · 0 评论