CSS
文章平均质量分 73
愛 / 滥 / 時
宇宙的有趣不如跟我一起学习。
展开
-
【Less】-- 使用步骤与语法介绍
运算规则:绝对单位和相对单位运算,以第一个运算符单位为准绝对单位和绝对单位运算,以实际操作为准原创 2022-10-06 16:07:35 · 880 阅读 · 0 评论 -
猿创征文 | 【CSS】-- 实现垂直居中的五种方法(含代码)
【代码】猿创征文 | 【CSS】-- 实现垂直居中的五种方法(含代码)原创 2022-09-10 10:45:00 · 329 阅读 · 0 评论 -
【前端】-- 面试题大合集(持续更新)
当DOM的操作影响元素的几何信息(位置),那么浏览器就需要重新计算元素的几何属性,并将其重新安放在正确的位置,这个过程就叫做重排。事件委托也称为事件代理,就是利用事件冒泡的原理指定一个事件处理程序管理一类事件处理程序。)发生变化,但是没有改变布局,重新将外观绘制出来的过程就叫重绘。目的/优点:减少DOM操作与减少浏览器的重排与重绘,并且新添加的节点也能被添加事件。事件流的三个阶段:事件捕获 ----> 事件触发 --- > 事件冒泡。事件流就是事件执行的顺序,分为冒泡型事件流和捕获型事件流。........原创 2022-08-25 18:38:28 · 373 阅读 · 2 评论 -
CSS -- 2D转换
第一个参数水平方向第二个参数垂直方向注意点如果取值是1,代表不变如果取值大于1,代表需要放大如果取值小于1,代表需要缩小如果水平和垂直缩放都一样,那么可以简写为一个参数。属性定义3D元素距视图的距离,以像素计,该属性允许改变3D元素查看3D元素的视图,当为元素定义perspective属性时,其子元素会获得透视效果,而不是元素本身。transform-origin第一个参数水平方向第二个参数垂直方向。如果是角度值为负,则沿逆时针旋转。...原创 2022-07-30 10:07:26 · 267 阅读 · 0 评论 -
CSS--媒体查询是什么
媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width、height和color(等)。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。...原创 2022-07-30 22:45:34 · 209 阅读 · 0 评论 -
【七夕特效】 -- 满屏爱心
是HTML5的一个新特性,canvas又叫做画板。我们可以在canvas上绘制我们需要的图形。anvas本身是一个HTML元素,需要HTML元素的配合高度和宽度属性而定义出的一块可绘制区域,定义区域之后使用JavaScript的脚本绘制图像的HTML元素。它可以基本的绘制图形,进一步的制作照片,绘制动画,更进一步可以处理和渲染视频。canvas有两个属性,一个是宽度(width),一个是高度(height)。注意低版本浏览器可能会不支持,且结尾的标签不可省略。...原创 2022-08-02 16:42:11 · 30678 阅读 · 31 评论 -
CSS动画案例--天空中云朵变化效果
用一个大的div标签包裹三个子div,外面的div是天空背景,三个子div分别用来存放三朵云。需要用到的云朵素材为三张图片(白色云朵透明背景)此时我们可以得到一个颜色随时间渐变的天空背景效果。...原创 2022-07-30 15:35:10 · 952 阅读 · 1 评论 -
CSS -- 用border绘制三角形【前端面试题】
设置一个宽度高度都为0的容器将border边框设置为自己想要的宽度,颜色设为透明再将其中任意一条边的边框设置一个颜色就能得到一个任意大小任意方向任意颜色的三角形了实现效果想要改变颜色大小与方向的话只要修改对应边框宽度,颜色还有最后显示出来的为border-top/border-left/border-bottom/border-right即可。...原创 2022-07-30 15:34:04 · 234 阅读 · 0 评论 -
CSS--动画--Animation
Animations是css3的一个模块,使用keyframes定义如何随着时间的移动改变CSS的属性值,可以通过指定它们的持续时间,重复次数,如何重复来控制关键帧的行为。Animations由两部分组成css动画的配置,以及一系列的keyframes(用来描述动画的开始、过程、结束状态)。...原创 2022-07-29 09:15:00 · 793 阅读 · 0 评论 -
CSS--过渡-Transition
当CSS的属性值更改后,浏览器通常会立即更新相应的样式,例如当鼠标悬停在元素上时,通过hover选择器定义的样式会立即应用在元素上。而在CSS3中加入了一项过渡功能,通过该功能您可以将元素从一种样式在指定时间内平滑的过渡到另一种样式,类似于简单的动画。...原创 2022-07-28 22:45:38 · 258 阅读 · 0 评论 -
CSS -- flex布局【超详教程】
flex布局可以简便、完整、响应式地实现各种页面布局,任何一个容器都可以指定为Flex布局。原创 2022-07-27 20:28:29 · 885 阅读 · 1 评论 -
CSS之定位布局 -- position:relative/absolute/fixed/sticky
特点默认文档流定位---positionstatic;原创 2022-07-27 10:45:00 · 437 阅读 · 0 评论 -
CSS -- BFC是什么?有什么用?
BFC是页面中的一块渲染区域,并且有一套属于自己的渲染规则,它决定了元素如何对齐内容进行布局,以及与其他元素的关系和相互作用。当涉及到可视化布局的时候,BFC提供了一个环境,HTML元素在这个环境中按照一定规则进行布局,类似于idclass,可以理解为BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。...原创 2022-07-23 15:55:35 · 113 阅读 · 0 评论 -
CSS超详细入门【三】--CSS三大特性
如果id个数一样,类名个数也一样,标签名称个数也一样,那么就不会继续往下计算了,那么此时谁写在后面听谁的。如果类名的个数一样,那么再看标签名称的个数,标签名称个数多的优先级最高。如果id的个数一样,那么再看类名的个数,类名个数多的优先级最高。只有选择器直接选中的标签才需要计算权重,否则一定会听直接选中的选择器的。如果是被不同的选择器选中,那么则根据选择器的优先级来决定听谁的。如果是被相同的选择器选中,那么谁写在后面就听谁的。也就是说优先级如果一样,那么谁写在后面听谁的。............原创 2022-07-21 16:25:37 · 106 阅读 · 0 评论 -
CSS超详细入门【二】-- CSS的各类选择器
作用根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性格式标签名称{属性值;}1.标签选择器选中的是当前界面中所有的标签,而不能单独选中某一个标签2.标签选择器无论标签藏得多深都能选中3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....)......原创 2022-07-20 16:53:00 · 212 阅读 · 0 评论 -
CSS超详细入门【一】
CSS(CascadingStyleSheets)层叠样式表,是一个用于修饰文档(可以是标记语言HTML,也可以是XML或者SVN)的语言,可以将文档以更优雅的形式呈现给用户。如果说HTML就像是一个人,而CSS就像是衣服和化妆品,用来装饰HTML。HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。......原创 2022-07-19 18:57:49 · 239 阅读 · 0 评论 -
CSS布局 -- 浮动之元素之间的影响 -- 解决高度塌陷
在浏览器中默认的排版方式就是标准流排版方式,也叫做文档流或者普通流在标准流中有两种排版方式,一种是垂直排版,一种是水平排版垂直排版如果元素是块级元素,那么就会垂直排版水平排版如果元素是行内元素/行内块级元素,那么就会水平排版如果我们需要将块级元素在页面中水平排列的话,可以将其块元素脱离标准流(文档流/普通流),使用float属性来使元素浮动,从而脱离标准流(文档流/普通流)。(float。...原创 2022-07-23 10:51:40 · 310 阅读 · 3 评论 -
CSS -- 盒子模型(含前端面试题)
说一说盒子模型?区别?1.盒子种类: 1.w3c盒子/内容盒子/标准盒子 box-sizing:content-box 2.边框盒子 IE盒子 怪异盒子 box-sizing:border-box原创 2022-07-22 16:38:56 · 659 阅读 · 1 评论 -
CSS超详细入门【四】-- 字体图标
作用在开发网站的时候需要各种各样的小图标,这些图标如果要求美工绘制可能比较麻烦,那么我们可以直接使用开源的字体图标库,加载一个图标就好像加载一个字体一样简单,通过控制字体大小,字体颜色来控制图标的大小与颜色。目前比较流行的开源字体图标库有iconfont在这里会详细介绍iconfont的使用方法。......原创 2022-07-21 19:10:18 · 483 阅读 · 0 评论