![](https://img-blog.csdnimg.cn/20210723171028808.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
文章平均质量分 93
自己在前端开发中使用到的好的布局、样式等等,记录学习下来
浪漫主义码农
有人辞官归故里,有人星夜赶科考,前途似海来日方长。满怀希望才能所向披靡
展开
-
CSS 特异性看这篇就行了
CSS 特异性背景:在我每次画界面的时候,总会出现样式冲突、样式污染、一级很多样式改不掉的问题。所以总结一文来彻底搞懂css样式的特异性,方便你我他。什么是css特异性?如果有多个属性或者选择器,同时指向同一元素的CSS冲突 ,那么优先使用什么样式规则。那么便有了特异性的概念。特异性(specificity)视为得分/等级,能够确定最终将哪些样式声明应用于元素。简单来说:CSS特异性就是CSS样式选择器的权重计算。从而让哪些样式应用到元素上。特异性层次每一种选择器都有自己的权重,依次是行内样原创 2021-11-18 20:43:16 · 1031 阅读 · 0 评论 -
CSS伪类总结大全
CSS伪类今天我们来学习下css的伪类。伪类是用来添加一些选择器的特殊效果。伪类和伪元素的区别有些人搞不清楚伪类和伪元素的区别,我们先来讲讲这个。最主要的最核心的区别就是:有没有产生新的元素。使用上伪类使用一个冒号 : ,伪元素使用两个冒号 ::伪类可以说是补充了选择器,在页面无标签,但是真实的存在Dom文档中。伪元素是创建了一个新的元素,不存在于Dom文档中,真实不存在的,但又是一个可以装载内容的元素。伪类表示状态的伪类描述:link所有未访问链接:visit原创 2021-11-11 21:34:38 · 1468 阅读 · 0 评论 -
CSS3动画属性,这么简单
CSS3动画属性简单来说:动画就是把一帧一帧的画面连接起来。,以一定的速度连续播放时,视觉差看不出来,这就是动画。知道了动画的概念,那就明白了怎么去实现,我们就要把每一帧的画面长什么样子画出来,然后以一定的速度连接起来就行了。????那么有人就会问和过渡有什么区别呢?区别在于:transition需要触发一个事件才会随着时间改变其CSS属性;animation在不需要触发任何,事件的情况下,也可以显式的随时间变化来改变元素CSS属性,达到一种动画的效果。过渡只有两帧,开始和结束,其余都是靠补间原创 2021-11-07 16:20:31 · 263 阅读 · 0 评论 -
CSS3过渡属性
CSS3过渡属性????????????????学习css3高级这两个是必须要掌握的知识点。本文我们就来了解一下过渡和简单使用。过渡 transition过渡就和它的名字一样,表示可以从一种样式转变到另一种样式,这是一个状态的转变,比如悬浮、点击等等。过渡可以为一个元素在不同样式之间变化自动添加“补间动画”我们通过属性transition来定义一个元素的过渡状态。transition是四个属性的合写形式。其中只有transition-duration是必填属性transition-pro原创 2021-11-06 17:15:33 · 585 阅读 · 0 评论 -
伪元素,这不是有手就行
伪元素你以为这个火箭是一张图片吗?它只是四个div,其余都是伪元素实现的效果。伪元素是什么呢?字面上就可以了解,伪元素–伪装的元素,就是页面不存在的元素.,用于创建一些不在DOM树中的元素,并为其添加样式。那么我们就要区分伪元素和伪类的区别?有没有创建一个文档树之外的元素。我们在css3规范中要求使用双冒号(::)表示伪元素,一个冒号(:)表示伪元素,以此来区分伪类和伪元素伪元素的使用伪元素只有以下这些:主要应用于 设置元素的首字母、首行的样式、在元素的内容之前或之后插入内容选择原创 2021-11-05 11:49:57 · 504 阅读 · 0 评论 -
双十一的浪漫,快去表白
酷炫相册,手把手教你前面总结了2D/3D转换的是知识点,就想着来一点小练习。准备写一个好看的相册。如下图效果。1.分析并实现我们来分析一下。这张图的结构。我们要知道x,y,z每条轴旋转的效果。关于2D/3D平移的知识看上一篇博客。1. 要让所有图片从一个div出来,首先应该是六张图片在一个容器里面,并且在一个平面上重叠着我们应该控制一下图片的大小都是一样的,不然效果会不好。<style> * { padding: 0; margin: 0;原创 2021-11-04 09:03:34 · 234 阅读 · 0 评论 -
CSS3 2D/3D转换手把手教你
2D/3D转换CSS 转换(transforms)允许您移动、旋转、缩放和倾斜元素。2D转换主要通过transform 属性,该属性使用函数来定义的。包含以下方法1.位移translate():translate(x)接受一个参数表示沿x轴位移x像素,沿y轴默认为0,接受两个参数translate(x,y)表示沿x轴位移的距离和沿y轴位移的距离分开写法translateX(x) 、translateY(y)数值可以为正负例子:<body> <div clas原创 2021-11-03 08:54:53 · 428 阅读 · 0 评论 -
CSS渐变背景看这一篇就够了
CSS渐变背景看这一篇就够了在我们自己设计网页的时候,为了好看美观,颜色可谓是最让人头疼的一部分。尤其是在配色上又找不到一些好看的网站。今天我就来记录一些好看的渐变式背景,和一些常用的颜色网站。CSS 渐变使可以显示两种或多种指定颜色之间的平滑过渡。让我们来玩一玩,看能玩出什么花来。CSS 定义了两种渐变类型:一、线性渐变(向下/向上/向左/向右/对角线)我们通过属性 linear-gradient来这样定义一个线性渐变。background-image: linear-gradient( 方向原创 2021-11-01 09:11:10 · 69119 阅读 · 5 评论 -
布局的神---网格布局最全总结,建议点赞收藏
网格布局一、什么是网格布局网格布局,顾名思义就是像网一样有一个个格子一样的布局。在一个容器里面,我们可以切割成很多行很多列,形成一个个网格,从而对这些网格进行规则性的排序,使用,达到我们复杂的页面布局效果。Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。Flex 布局是轴线布局,有主轴和侧轴之分,只能指定容器内子元素针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,原创 2021-10-25 20:59:56 · 14044 阅读 · 6 评论 -
我用CSS画了个火箭送嫦娥妹妹回家
我用CSS画了个火箭送嫦娥妹妹回家就在8月17号我国神州十二号载人飞船顺利回家。又恰逢中秋佳节,真是值得庆祝的一天。我这灵机一动,就想着开火箭送嫦娥妹妹回家,哈哈~先来看看简陋的作品。接下来看看怎么实现一、元素<body> <div class="moon"></div> <div class="rocket"> <div class="left"></div> <div原创 2021-09-18 21:48:24 · 409 阅读 · 2 评论 -
CSS 弹性盒子布局详解
CSS 弹性盒子弹性盒子是CSS3的一种新布局模式。是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。弹性盒子布局是一种在前端HTML开发中比较常用的布局方式,还有一些像网格布局,我比较喜欢用弹性盒子布局。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。一、介绍在学习弹性盒子我们必须掌握的:容器存在两条轴:横轴和纵轴父容器属性定义为display:flex,表示该元素内部是弹性盒子布局大体结构分为 一个父原创 2021-07-07 16:29:15 · 4950 阅读 · 0 评论