![](https://img-blog.csdnimg.cn/2019092715111047.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
css3
文章平均质量分 91
sass scss css3
蒲公英芽
这个世界没有原地踏步的说法,你不进步,便只有倒退。
展开
-
微信小程序实现手机屏幕左右旋转,页面元素左右移动,小程序加速计
一、业务背景在做微信小程序的项目时,有一个需求是当用户左右旋转手机屏幕时,页面上特定的元素要随着用户的旋转动作左右移动。当将手机屏幕向左旋转时,人物向左移动;手机屏幕向右旋转时,人物向右移动。二、用到的微信API这里主用到了微信小程序的加速计:开始监听加速度数据,wx.startAccelerometer(Object object)监听加速度数据事件,wx.onAccelerometerChange(function callback)官方文档链接:https://developers原创 2022-05-24 19:16:27 · 6257 阅读 · 0 评论 -
css 8种方法实现 左侧固定右侧自适应
先来看一下最终效果:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...原创 2020-01-05 10:55:10 · 4031 阅读 · 0 评论 -
css 4种方法实现左右两侧固定 中间自适应布局
先来看一下最终效果:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...原创 2020-01-05 10:59:59 · 2341 阅读 · 0 评论 -
CSS3 菱形拼图 实现只旋转div 背景图片不旋转
实现只旋转div ,背景图片不旋转。每个元素都使用背景定位的方式展示背景图的固定区域,中间的拼图做了旋转。但是旋转后,又遇到了个问题:背景图片也跟着旋转了。可以在当前元素的外层套一个盒子,将外层盒子向右旋转45度,再将当前元素向左旋转45度。原创 2021-03-27 15:03:27 · 1449 阅读 · 0 评论 -
CSS3媒体查询适配不同型号的手机 IphoneX/IphoneXR等
一、定义使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。二、简单使用如果文档宽度小于 300 像素则修改背景颜色(background-color):@media screen and (max-width: 300px) { body { background-co原创 2020-10-21 16:06:03 · 3714 阅读 · 0 评论 -
移动端1像素问题 设备像素dp 设备独立像素dip 设备像素比dpr
1px问题的原因是因为不同的设备,不同的设备像素比(dpr)导致的。当我们在样式中设置边框宽度为 1px 时(这里使用的是css像素),设备像素比为2的设备,会用4个物理像素(dp)来渲染这个边框;而设备像素比为1的设备,会用1个物理像素来渲染这个边框,导致最终的视觉效果有差异。由这个问题抛出的几个概念,往下看。先来看1px问题的解决方案,有以下三种:伪元素+缩放;使用背景图片;po...原创 2020-03-10 21:28:17 · 865 阅读 · 0 评论 -
CSS3 transform 和 transition 的区别
定义transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。transition,就是通过鼠标的单击、获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变 CSS 的属性值。transformtransform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。语法:transform:...原创 2020-03-04 10:59:43 · 6388 阅读 · 0 评论 -
CSS3多列布局 columns 弹性布局 flex
多列布局columns多列布局可以控制页面内容的排版方式,可以将文本内容设计成像报纸一样的多列布局。属性示例含义column-countcolumn-count: 3;将元素内部分割成3列column-widthcolumn-width: 100px;指定列的宽度为100像素column-gapcolumn-gap: 40px;列与列间的间隙为 4...原创 2020-03-03 21:54:43 · 3293 阅读 · 0 评论 -
CSS 伪类选择器和伪元素选择器的区别 样式权重
伪类和伪元素的区别类,用户定义的类名,这个类是具体的,看得见的,如div.div0,选择具有类div0的div元素。伪类,用于向某些选择器添加特殊的效果。用伪类定义的样式并不是作用在标记上,而是作用在标记的状态上,如a标签的:hover,表单元素的:disabled。元素,如div、p、h1等,是实实在在存在的元素。伪元素,是html中不存在的元素,仅在css中用来渲染的,伪元素创建了一...原创 2020-03-03 19:35:30 · 4306 阅读 · 1 评论 -
Sass、SCSS、less
定义CSS 指层叠样式表 (Cascading Style Sheets)。Sass (Syntactically Awesome StyleSheets),后缀名为.sass,是由ruby语言编写的一款css预处理语言,它是基于ruby在服务器处理的。 Sass 是一款强化 CSS 的辅助工具,是对 CSS 的扩展,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (ne...原创 2020-02-24 18:17:23 · 866 阅读 · 0 评论 -
BFC
简介BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域,只有Block-level box(块)参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。BFC的布局规则内部的Box会在垂直方向,一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin...原创 2020-01-05 10:39:37 · 166 阅读 · 0 评论