css
文章平均质量分 66
haoyanyu_
这个作者很懒,什么都没留下…
展开
-
css 锥形渐变
颜色断点指,并且跟随一个或两个可选的断点的位置(沿着渐变圆周的angle)同background-position,定义渐变中心。在一个圆中有 360 度,400 个梯度,2π 弧度,1 圈。定义顺时针方向的渐变旋转角度;指定2个值时,表示这个颜色的开始和结束角度。原创 2023-05-08 15:56:33 · 535 阅读 · 0 评论 -
CSS 径向渐变
2. 如果第二个值是数字或百分比,则它是第一个值的偏移量,如果是第三个值,则是第二个值的偏移量。两个百分比:ending-shape省略时,表示椭圆的大小,第一个水平半径,第二个垂直半径。一个数字:如果ending-shape指定为圆形时,此值表示半径。两个值:一个是x坐标,一个是y坐标,可以是关键词,可以像素数,可以是百分比。:渐变结束的形状 默认为椭圆ellipse,可以设置为圆形circle。四个值:第一个和第三个是定义xy的关键词,第二个和第四个是偏移量。:径向渐变开始的位置,默认是中心点。原创 2023-05-08 11:05:14 · 924 阅读 · 0 评论 -
去掉chorme浏览器自动补全时input框的背景样式
input开启自动补全后,选择内容后input框背景颜色变成了淡蓝色,手动填写的input背景不会变化,如下图:原创 2020-11-22 15:11:35 · 876 阅读 · 1 评论 -
js实现行内多个元素动态均匀分布
需求背景平台首页有选货市场,商品大图展示时,要求根据浏览器宽度均匀排布。即浏览器宽度不同,一行展示的商品数量不同,通过改变外边距,让商品均匀填充满容器盒子。原实现方案通过css的flex布局和justify-content: space-between让商品元素均匀排布。效果如下:可见,当商品铺差不多够满了一行时展示效果是ok的,不足一行时,就会有问题。新思路不再用flex布局,使用float浮动,让商品元素一行展示;根据父容器的宽度,计算出一行可以展示的数量 n;计算每个商品的mar原创 2020-10-20 15:49:10 · 1621 阅读 · 0 评论 -
小程序瀑布流布局的实现方案
文章目录瀑布流布局1. 高度固定的横向瀑布流2. 宽度固定的纵向瀑布流2.1 一次性渲染所有元素2.2 当需要动态加载新数据时情况一:每次获取到的数据数量相同情况二:每次获取到的数据数量不确定情况三: 元素之间高度差变大,每次的数量也可能不一样Masonry插件小程序的实现细节2.3 项目中遇到的情况????????????????总结????????????瀑布流是现在很流行很常见的一种布局,表现为参差不齐的多栏布局,产品很喜欢用。刚开始写小程序就遇到了瀑布流的需求,也是有点刺激~~瀑布流布局瀑布原创 2020-08-06 23:29:33 · 2616 阅读 · 1 评论 -
css伪类nth-child,nth-of-type的顺序是怎么计数的呢?
今天遇到一个坑项目中写css时,如果一个容器里有多个子元素,但是子元素的样式并不是完全一样的,稍微有点差异,这个时候一般通过nth-child(n),或者nth-of-type(n)定制子元素的样式。那么n是如何计数的呢?在这里一直有一个误解,惭愧惭愧~~????如下代码<div class="content"> <p>水平垂直居中, justify-content, align-items</p> <div class="layout allce原创 2020-07-31 21:39:19 · 486 阅读 · 0 评论 -
css--实现img图片填充,剪裁效果
业务背景实现一个轮播图,轮播区域宽度自适应,高度100px; 图片分辨率由用户上传获得。为了让图片不变形,需要对图片进行居中裁剪。实现使用css的属性 object-fit: cover原理css可替换元素展示效果不是由css决定,是一种外部对象, 它们外观的渲染独立于csscss不会影响到其中内容的展示,只能改变它的位置,和内容在框里的位置或者定位方式。例如object-...原创 2020-04-20 14:48:34 · 11130 阅读 · 0 评论 -
《css世界》笔记-文档流以及流的破坏与保护
《css世界》笔记何为“流”?“流”是CSS世界中的基本定位和布局机制;CSS世界构建的基石是HTML, html最具代表性的两个基石块级元素<div>, 内联元素<span>。流体布局: 就是利用元素“流”的特性实现的各类布局效果,因为“流”本身具有自适应特性。流体布局是自适应布局(凡是具有自适应特性的布局统称)的一种实现,例如表格布局设置为100%...原创 2020-04-06 23:00:26 · 352 阅读 · 0 评论 -
h5解决滚动穿透
/** * 添加fix定位解决滚动穿透 * @return {Number} 文档滚动高度 */ scrollAddfix() { let theTop = 0; // 文档滑动距离 let bodyEl = document.body theTop = ...原创 2020-03-11 16:37:02 · 299 阅读 · 0 评论 -
h5初始化样式
@fontFamilyDefault: PingFang SC, miui, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, sans-seriff; body, button, input, select, textarea { color: #333; /*font-f...原创 2020-02-27 22:43:55 · 741 阅读 · 0 评论 -
安卓Android系统,H5页面键盘弹出后,页面挤压变形或者底部输入框被遮挡的解决办法
键盘弹出挤压页面至变形如下页面,背景图片height: 100%; 底部输入框部分用position:absolute定位,当键盘弹出时,页面整体被挤压;解决方法页面加载后获取视图高度为height,监听window.onresize,指定容器高度为height存在的问题: 偶尔会出现input框获取焦点后,被键盘覆盖,但是在输入内容后滚动到可视区域的现象底部的输入框获焦后,被键...原创 2019-08-08 16:31:07 · 1878 阅读 · 0 评论 -
perspective透视+rotate旋转实现的lowlow的翻书动画
鼠标悬停,书翻开HTML代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>自己实现的翻书&...原创 2019-07-04 15:07:27 · 476 阅读 · 0 评论 -
touch-action常用的几个属性
问题: 在移动端自定义的键盘的数字键盘上,当快速的点击某个数字时,页面会被放大。原因: 因为双击出发了浏览器的默认放大操作。解决: 可以在css里设置touch-action的属性来取消浏览器的默认操作touch-action: auto默认值,表示由浏览器觉得进行什么操作,比如在viewport里设置的操作touch-action: manipulation只允许滚动和持续缩放,其他...原创 2019-07-03 14:39:19 · 1799 阅读 · 0 评论 -
iPhoneX ‘安全区域’ 适配 技能get
献上一张iPhone X的布局图绿色区为安全区域通过viewport的属性 viewport-fit(ios的Safari还不支持)viewport-fit 是专门适配iPhone X之类的有刘海而且底部圆角的屏幕viewport-fit有以下属性:viewport-fit : auto 该值不会影响初始布局视区,并且整个网页都可以查看。viewport-fit : cov...原创 2019-05-22 17:27:06 · 1409 阅读 · 0 评论 -
PC端修改input 输入框光标颜色
input 输入框的光标颜色修改方法:1. 根据字体颜色,即设置color,光标颜色会一起改变<div class="custom-input"> <input id="custom-input" type="email" placeholder="请输入邮箱"></div>.custom-input input { appear...原创 2018-12-06 11:08:19 · 1312 阅读 · 0 评论 -
css 通过绝对定位实现水平垂直居中
知识点: margin: auto;效果图:代码: html:<div class="outer"> <div class="inner"></div></div> css:.outer { width: 100vw; height: 100vh; position: rela...原创 2018-09-12 17:15:15 · 268 阅读 · 0 评论 -
css解决滚动条出现造成页面晃动的问题
窗体默认是没有滚动条的,而HTML的内容是自上而下加载,就会发生一开始没有滚动条,后来突然出现滚动条,此时页面的可用宽度发生变化,水平方向的内容会发生晃动,尤其是水平居中显示的内容,出现滚动条后会重新计算。解决方法:一、简单的做法是 html { overflow-y: scroll;}当页面注定要出现滚动条的话,可以用此方法,让滚动条从一开始就显示出来,即使内容...原创 2018-09-05 13:51:39 · 5686 阅读 · 1 评论 -
css 选择器 :root、:target 用法
1、element:root匹配element元素在文档中的根元素, 在HTML中,根元素永远是html 2、selector:target用户选取当前活动的目标元素。 url后跟锚点,指向的就是目标元素,目标元素就编程css里注明:target的样式的样子,完整代码如下:<!DOCTYPE html><html lang="zh-cmn-Hans">...原创 2018-09-05 10:23:24 · 1472 阅读 · 0 评论