![](https://img-blog.csdnimg.cn/20210902091310891.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Css
文章平均质量分 76
CSS 是一种描述 HTML 文档样式的语言。
俊小赞
自律使我自由。
展开
-
CSS3 转换过渡动画
在过去,我们想要页面上实现动画效果,往往是需要通过 javascript 脚本来进行事件监听执行的,如今 css3 的推出,我们可以更简洁地实现动画效果,本文将主要从 transform、transition、animate 三大点出发,对其的属性进行深度的梳理。原创 2021-08-03 23:43:19 · 217 阅读 · 0 评论 -
CSS Flex 弹性布局
文章目录前言Flex一、专业名词二、属性值定义 flex 布局CSS 属性flex-directionflex-wrapflex-flowflex-growflex-shrinkflex-basisflexorder对齐属性align-contentalign-itemsalign-selfjustify-contentplace-contentrow-gapcolumn-gapgap总结前言在页面开发的过程中,CSS 页面布局技术允许我们拾取网页中的元素,并且控制它们相对正常布局流、周边元素、父容器原创 2021-07-13 18:43:05 · 1520 阅读 · 1 评论 -
CSS Position 定位布局
文章目录前言一、 Position 定位布局二、 属性值定位类型语法top,right,bottom,left 属性三、 实例相对定位绝对定位固定定位粘性定位总结前言在页面开发的过程中,CSS 页面布局技术允许我们拾取网页中的元素,并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。当前主要的布局方式有:浮动布局(Float)、定位布局(Position)、弹性布局(Flex)、网格布局(Grid)等,本文将探讨 position 定位布局。一、 Position 定位布局定位原创 2021-07-13 18:42:10 · 550 阅读 · 0 评论 -
CSS Float 浮动布局
文章目录前言一、Float 布局二、属性值三、代码实现clear 清除浮动clear 属性值三、Float 设计初衷与不足不足总结前言在页面开发的过程中,CSS 页面布局技术允许我们拾取网页中的元素,并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。当前主要的布局方式有:浮动布局(Float)、定位布局(Position)、弹性布局(Flex)、网格布局(Grid)等,本文将从浮动布局开始学习。一、Float 布局把一个元素“浮动”(float)起来,会改变该元素本身和在正常原创 2021-07-13 18:41:38 · 2962 阅读 · 0 评论 -
停止循环动画时回到初始状态
项目场景:做音乐播放器动画效果。问题描述:当将动画封装在一个类里面,并且通过添加移除这个类从而实现暂停播放的效果时,往往在移除动画时动画会迅速恢复到初始值,而不是停留在最后的一帧。 原因分析:主要是因为添加和移除类的而产生的弊端。解决方案:在 animation 当中还有一个属性 animation-play-state属性值描述paused暂停动画。running播放动画。<!DOCTYPE html><htm原创 2021-02-01 19:00:56 · 557 阅读 · 0 评论 -
transform: rotateY(360deg); 导致页面元素闪烁
项目场景:动画过渡效果开发,需要根据实际状态让页面上的某个元素发生过渡效果。问题描述:需要过渡的元素正常执行过渡,但是在他过渡的时候会让在他层级(z-index)上的元素发生闪烁。bug出现在iPhone移动设备上,Win10和Android移动设备可以正常显示。原因分析:这里涉及了一个概念:层叠上下文,给元素设置transform属性会创建一个新的stacking context,导致z-index的层级不同,从而出现闪烁问题。解决方案:方法 一添加 transform: tra原创 2021-04-26 15:44:36 · 2456 阅读 · 1 评论 -
Sass动态转换单位
项目场景:在使用 Sass扩展语言进行开发的时候。问题描述:使用 Sass 定义了一个变量 $box: 750px, 在这个时候想直接在后面添加是行不通的。$box: 750px;div { width: $box vw; /* 返回 750px vw */}原因分析:在这里与 Sass语言的编译处理机制有关。解决方案:首先我们得先去掉当前长度的单位,用现在的长度除于1的单位即可去掉单位;然后在乘以需要转换的比例即可,当然在转换单位的时候记得按比例转换。/*原创 2021-02-23 18:37:35 · 959 阅读 · 0 评论 -
移动端:overflow: hidden;失效时
在完成移动端的响应式布局适配的时候,因为使用了 css3 中的 transfrom: perspective(单位);属性,把原本可以隐藏的 body 盒子撑大了(移动端中出现横滚动条)。解决方案:/*css样式表*/body { position: fixed; /* 添加此句代码即可 */ overflow: hidden; width: 100%;}文章参考来源:https://www.cnblogs.com/mmykdbc/p/10384782.html...原创 2020-08-20 17:59:25 · 281 阅读 · 0 评论 -
Sass的四种编译方式
文章目录前言一、Sass二、编译方式1. 命令行编译2. 插件保存编译总结前言一、Sass二、编译方式在sass中,有四种编译方式,分别可以输出:嵌套、展开、紧凑以及压缩等格式。1. 命令行编译命令行编译,顾名思义就是通过终端控制台进行编译,从而生成所需要的格式。//未编译样式.box { width: 300px; height: 400px; &-title { height: 30px; line-height: 30px; } }原创 2021-02-21 13:09:27 · 3192 阅读 · 12 评论 -
浮动清除的四大主要方式
文章目录前言一、clear属性二、空标记三、overflow属性四、伪类总结前言浮动布局(float)和定位布局(position)为 css 中布局的常用的两种布局方式,在 css3 中虽然出现了弹性布局(flex),但毕竟是新出的属性对于早期的浏览器兼容并不是很理想IE11才开始兼容。浮动布局主要是通过 float属性控制元素向左或向右移动,使周围的元素也会重新排列。由于浮动元素将不再占用原文档流的位置,使用浮动时会影响后面相邻的固定元素。常见的形式有父盒子高度坍塌、浮动盒子与非浮动盒子重叠等原创 2020-12-23 23:56:55 · 617 阅读 · 5 评论 -
display: none; visibility: hidden; opacity: 0; 三者的区别
文章目录前言一、display: none二、visibility: hidden三、opactiy: 0四、测试代码总结前言display: none; visibility: hidden; opacity: 0; 均是 css 中控制元素在页面中隐藏的属性值,但是它们之间隐藏的方式效果及性能又有所不同,下面我们将一起来探讨探讨。一、display: noneDOM 结构:浏览器不会渲染 display 属性为 none 的元素,不占据空间;事件监听:无法进行 DOM 事件监原创 2020-08-28 16:59:17 · 661 阅读 · 2 评论 -
元素水平垂直居中的六种方式
文章目录前言代码预设一、绝对定位 + transform二、绝对定位 + margin1.不用子盒子的宽高2.需要子盒子的宽高三、table-cell 属性四、flex 布局五、calc() 函数总结前言让元素同时实现水平垂直,是我们前端开发所经常遇到的,本文将介绍六种常见的方式,以便你的参考供用。代码预设下面将会介绍到的六种方法均是使用了这里的 HTML 结构和 css 主体样式。<!-- css --><style> body { margin原创 2020-08-28 00:28:24 · 806 阅读 · 1 评论 -
格式化上下文 FC
文章目录一、FC是什么?二、格式化上下文几种类型1.BFC(Block Formatting Contexts)2.IFC(Inline Formatting Contexts)3.GFC(GridLayout Formatting Contexts)4.FFC(Flex Formatting Contexts)一、FC是什么?FC 全称 Formatting Contexts,是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他原创 2020-08-26 20:57:37 · 257 阅读 · 0 评论 -
标准盒模型与怪异盒模型的区别
一. 清除浮动的方式。使用overflow属性来清除浮动 (overflow: hidden)二. visibility: hidden 与 display: none 的区别。三. 谷歌浏览器的盒子与IE浏览器的盒子区别。四. 让盒子垂直水平居中的方式。原创 2020-12-24 12:19:45 · 11772 阅读 · 4 评论