![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 76
温情key
坚持创作 收获壮硕
展开
-
css实现多个loading动画效果
在开发中,为了提高用户体验,通常在加载数据的时候会给一个。根据序号查看代码,尾部有整合代码。提示,这里分享几个简单的。原创 2022-12-13 15:08:10 · 2674 阅读 · 1 评论 -
CSS动画-Animation
动画是css3中具有颠覆性的特征之ー,可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果。相比较过渡,动画可以实现更多变化,更多控制的效果。创建动画的原理是,将一套 样式逐渐变化为另一套样式。在动画过程中我们能够多次改变这套 样式。以百分比来规定改变发生的时间,或者通过关键词 和 ,等价于 和 。就是需要绑定的的名称这就是定义了一个名称为的动画,被元素调用 规定动画完成一个周期所花费的时间意思是指定元素的时间向右移动 规定动画的速率曲线,也就是动画执行过程的原创 2022-10-16 15:09:48 · 5446 阅读 · 0 评论 -
快速上手 Grid 网格布局
布局即网格布局,是一种新的CSS布局模型,比较擅长将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系。有时单元格的大小是固定的,但是容器的大小不确定,想响应式的排满容器,就可以用auto-fill自动填充。布局是二维布局,将容器划分成了“行”和“列”,产生了一个个的网格,可以将网格元素放在行和列相关的位置上,从而达到了布局的目的。比如设置一个3X3的网格,但却有10个项目,所以会多出一个,这时候就可以用这属性设置多出的这一个项目。设置每一列的宽度,可以是具体的值,也可以是百分比。....原创 2022-07-16 15:16:46 · 1972 阅读 · 4 评论 -
css单行、多行文本溢出显示省略号
单行.box{ overflow: hidden; // 溢出隐藏 text-overflow: ellipsis; // 文本溢出时发生的事,ellipsis表示用省略号代替溢出的文本 white-space: nowrap; // // 规定段落中的文本不进行换行}多行.box { overflow: hidden; // 溢出隐藏 text-overflow: ellipsis; // 溢出用省略号显示 d原创 2022-03-17 21:47:35 · 280 阅读 · 0 评论 -
css选择器及其优先级
1.选择器id选择器(#box),选择id为box的元素类选择器(.one),选择类名为one的所有元素标签选择器(div),选择标签为div的所有元素后代选择器(#box div),选择id为box元素内部所有的div元素子选择器(.one>one_1),选择父元素为.one的所有.one_1的元素相邻同胞选择器(.one+.two),选择紧接在.one之后的所有.two元素群组选择器(div,p),选择div、p的所有元素通配符选择器(*) , 选择原创 2022-03-17 21:45:23 · 1060 阅读 · 0 评论 -
HTML+CSS 面试题
1. 讲讲重排和重绘重排(回流)当dom的变化影响了元素的几何信息(元素的位置和尺寸大小),浏览器需要重新计算元素的几何信息,将元素渲染到正确的位置,简单来说就是重新排列元素,这就是重排, 也叫作回流。每个页面至少进行一次回流,就是在页面第一次加载的时候触发重排的操作元素位置改变改变窗口大小改变字体大小添加/删除 dom元素计算 offsetWidth 和 offsetHeightmargin border 的改变重绘当元素的外观发生改变,但没有影响到页面的布局,重新把元素原创 2021-07-03 16:55:27 · 208 阅读 · 4 评论 -
彻底理解flex弹性布局,看这一篇就够了!
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称容器。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称项目, 上代码理解理解<div class="box"> <div class="item one">项目1</div> <div class="item two">项目2</div> <div class="item three">项目.原创 2021-06-09 12:39:05 · 1718 阅读 · 0 评论 -
实现css盒子水平垂直的方式
实现css盒子居中水平居中水平垂直居中1. flex弹性盒子2. position绝对定位<div class="father"> <div class="son"></div></div>水平居中* { margin: 0; padding: 0;}.father { width: 400px; height: 300px; background: red; margin: 0 auto原创 2021-06-08 18:48:45 · 167 阅读 · 0 评论