css 、 css3、sass、less
文章平均质量分 76
胖鹅68
熟悉h5,jquery,css2/3,angular,ionic,springMVC,hibernate,spring,struts,mybatis,mysql,oracle,linux,android等技术
了解openfire开源系统,熟悉openfire的IM功能
展开
-
CSS3 十六进制透明度
公司使用 sketch 做“高保真”设计,UCD 比较喜欢 “透明”的效果,每次复制 CSS 样式,就会出现 16进制的背景色,然后还有透明度,例如。#00143b 颜色的透明度是 80(十六进制),不透明是 FF, 全透明是00,因此 80的透明度是 相当于全透明的 50%解决办法: 将背景色的 16进制全部改为 十六进制颜色码转换成RGB颜色值;然后再使用 rgba() 函数。缺点:觉得效率太低了,需要每个都复制到工具网站去计算。原创 2023-02-13 17:23:18 · 1765 阅读 · 0 评论 -
CSS3 object-fit视频和图片比例自适应
文章目录一、参考资料二、问题描述三、背景图片、图片、视频调整高宽比3.1 背景图片自适应3.2 图片自适应3.1 视频自适应一、参考资料CSS object-fit 属性二、问题描述工作中制作一个首页,背景是一个视频文件,由于视频本身的高宽比与显示器的高宽比不匹配,导致首页出现了滚动条。问题:现在PM 要求首页不能出现滚动条个人理解:视频的高宽比固定了,不可能改变视频本身的高宽比例,因此是做不到了同事介绍了CSS3 object-fit 打脸了,原来视频和图片是可以调整高宽比的三、背景图原创 2022-05-31 11:12:27 · 1420 阅读 · 0 评论 -
CSS3 transform-style 3D空间,透视图perspective
DOM 节点表现3D效果原创 2022-05-31 10:12:48 · 570 阅读 · 0 评论 -
vue-cli 3中dart-sass替换node-sass
文章目录一、问题描述1.1 nodejs12 升级 nodejs161.2 将node-sass改为 dart-sass二、dart-sass VS. node-sass2.1 node-sass2.1 将node-sass替换为dart-sass一、问题描述最近在学习Vue3,使用vue-cli4.x 创建的工程,在使用sass的时候,一直报错,提示API 不兼容。1.1 nodejs12 升级 nodejs16启动项目的时候,提示nodejs 版本过低,自己本机是nodejs12。 想着node原创 2022-04-29 10:59:48 · 2229 阅读 · 0 评论 -
Scss(!default)、less(覆盖) 知识点之切换主题
文章目录一、参考二、scss 中的!default2.1 场景说明2.2作用2.3 例子三、less中的默认值一、参考sass官网——默认变量值less官网——默认变量值二、scss 中的!default2.1 场景说明假如你写了一个可被他人通过@import导入的sass库文件,你可能希望导入者可以定制修改sass库文件中的某些值2.2作用它很像css属性中!important标签的对立面,不同的是!default用于变量含义是:如果这个变量被声明赋值了,那就用它声明的值,否则就用这原创 2021-08-23 10:54:19 · 1686 阅读 · 0 评论 -
vue2.x 中scss 使用webpack 别名路径引入图片资源
文章目录一、参考二、问题描述三、能否通过引入别名(绝对路径)像引入组件那样从scss中引入图片呢?为什么前面多了一个“~”,引入组件可不是这么用的?一、参考css-loader 关于url二、问题描述在工作中,写vue文件SCSS样式的时候,需要引入图片,此时一般采用相对路径找到文件即可,但是,由于图片分散到不同的文件夹,编写其他Vue文件的时候,都需要引用相对路径,找图片就比较麻烦了,得一层一层的去找,一旦移动Vue文件的位置,之前引入图片的路径又要一个一个修改。三、能否通过引入别名(绝对路原创 2021-08-11 08:55:55 · 858 阅读 · 0 评论 -
CSS flex + margin:auto 布局,实现不一定的‘justify-content’
文章目录文章参考问题描述案例说明文章参考Flex 布局教程:语法篇css flex布局中妙用margin: auto问题描述在使用Flex布局时, 使用align-items和justify-content,只能针对所有的子元素“统一按照某一个规则”进行排列但是,如果针对多个子项,希望他们有些“个性化的排列”,则最好使用 “flex + ‘margin:auto’”的组合方式案例说明默认从左到右排列<body> <div id="containe转载 2021-01-28 18:36:14 · 376 阅读 · 0 评论 -
JS 获取盒子模型对应的高宽(window.getComputedStyle、dom.getBoundingClientRect)
文章目录文章参考获取dom节点高宽的通用方法案例说明getBoundingClientRect() 获取DOM 的高度和宽度的办法?文章参考原生js操作dom添加删除替换class你了解getBoundingClientRect()?获取dom节点高宽的通用方法dom.style.width/height(只适用获取内联元素的宽和高)dom.currentStyle.width/height(获取渲染后的宽高,但是仅IE支持)window.getComputedStyle(do原创 2021-01-28 15:57:37 · 1811 阅读 · 1 评论 -
CSS继承控制:inherit、initial和unset
文章参考转发 CSS继承控制:inherit、initial和unset案例说明<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></转载 2021-01-28 12:13:32 · 386 阅读 · 0 评论 -
CSS英文字符串换行(word-break: break-all 或者 word-wrap)
文章参考英文强制换行css 使用css强制英文单词断行代码问题描述在工作中,给表单的某个字段添加描述信息,于是,测试就输入了’dddddd…(500个)’,查看详情的时候,就出现了横向滚动条,这样就不能直观的显示,于是提了bug解决过程遇到不换行的问题,第一反应就是设置div的宽度,‘display: inline-block’,甚至尝试了 ‘float:left’,界面效果依然没有变化请教了同事,说上面的例子是因为浏览器认为’dddddd…(500个)'是一个单词,默认是不会换行的,于原创 2021-01-28 11:07:08 · 23139 阅读 · 2 评论 -
CSS 图片垂直居中的解决办法
文章参考让html img图片垂直居中的三种方法flex的align-items: center;<div class="duty-header__label"> <span class="img"> <img src="../../../assets/images/workbench/today_duty_icon.png" alt="" /> </span> <span class="title">今日值班</sp原创 2020-08-05 13:49:49 · 626 阅读 · 0 评论 -
CSS transform: scale数值为负数实现翻转
文章目录文章参考问题描述scaleX 属性说明scale数值为负数实现翻转文章参考CSS3 transform 属性你所不知道的 CSS 负值技巧与细节问题描述在工作中,发现引入一个图片是正常显示,但是使用背景图之后,发现图片的方向变反了,找大牛来排查问题,最终发现是使用了 transform: scaleX(-1);引起的scaleX 属性说明|scale(x,y)|定义 2D 缩放转换。||scale3d(x,y,z)|定义 3D 缩放转换。||scaleX(x)|通过设置 X 轴原创 2020-06-30 15:02:42 · 3510 阅读 · 0 评论 -
css3 clip:rect(top, right, bottom, left)学习
文章目录文章参考定义和用法说明API使用案例文章参考CSS clip:rect矩形剪裁功能及一些应用介绍css :clip rect 正确的使用方法定义和用法clip 属性剪裁绝对定位元素。当一幅图像的尺寸大于包含它的元素时会发生什么呢?“clip” 属性允许您规定一个元素的可见尺寸,这样此元素就会被修剪并显示为这个形状。说明这个属性用于定义一个剪裁矩形。对于一个绝对定义元素,...原创 2020-04-09 11:50:11 · 815 阅读 · 0 评论 -
CSS3 圆形进度条逻辑(两个半圆)
问题描述最近再写大屏的项目,很多关于圆形进度条的效果,找出了一种思路,在这里做个记录,方便自己学习逻辑思想上图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-...原创 2020-04-09 11:01:05 · 1620 阅读 · 0 评论 -
css before,after伪类添加图片、文字、标签属性
文章目录文章参考问题描述content的值可以是文字和字符串啦content还可以是图片设置图片的大小插入元素的属性值att()文章参考伪元素中content的用法详解问题描述想利用 ::before 伪类添加一个图片,发现不能改变图片的大小,写一个学习笔记,方便自己学习content的值可以是文字和字符串啦a::before{ content:'我是before内容';...原创 2020-03-28 10:51:27 · 9549 阅读 · 0 评论 -
CSS flex布局,vh单位,头部和底部固定,中间出现滚动条
问题描述常用的管理后台管理系统页面,基本上逃脱不了“回字形”布局——顶部banner条,中间部分分为左侧菜单,右侧为内容;内容部分常常显示的是表格,底部固定是分页那么,如何适配不同尺寸大小的界面,分页固定在底部,中间的内容由数据来确定,超过显示器高度中间出现滚动条呢?解决思路使用单位 100vh, (vh是将可视化区域分为100份,是一个相对高度的概念,100vh就是相对可视化区域...原创 2020-03-09 15:35:49 · 2465 阅读 · 0 评论 -
鼠标滚动调整图片大小(css3 zoom 放大缩小)
文章目录zoom 作用说明语法案例解释鼠标滚动,图片缩放zoom 作用说明设置或检索对象的缩放比例。normal: 使用对象的实际尺寸。: 用浮点数来定义缩放比例。不允许负值: 用百分比来定义缩放比例。不允许负值语法案例解释<!DOCTYPE html><html lang="zh-cmn-Hans"> <head> <me...原创 2020-01-03 12:53:55 · 3907 阅读 · 0 评论 -
css 画圆形和三角形、边框的表现形式
文章目录文章参考圆形三角形文章参考纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)圆形原理描述:设置div的高度和宽度是一致的,画出正方形然后再利用border-radius转为圆形由于块状元素是占一行,因此将元素改为 inline-block<span class="point" style="background: #77DC7E;margin-r...原创 2019-12-28 17:58:20 · 399 阅读 · 0 评论 -
CSS 伪类after清除浮动
文章目录文章参考问题描述重点代码文章参考用after伪类清除浮动问题描述以前总是加一个来解决,但这样会增加无语义的标签,看到同事使用伪类 after 来实现,觉得代码更精炼,没有多余的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <m...原创 2019-11-30 16:34:19 · 2953 阅读 · 0 评论 -
CSS 超出一行(纵向一列)(多行)显示省略号 ... ellipsis
文章目录问题描述案例一行超出部分显示...的逻辑说明:多行超出部分显示...的样式说明效果问题描述在写静态页面的时候,经常会遇到**超出宽度就显示省略号…**的需求,有时候在移动端,甚至是要针对多行,显示省略号的需求,使用JS逻辑比较麻烦,再次使用CSS实现该功能,方便以后查阅案例<!DOCTYPE html><html lang="en"><head&g...原创 2019-10-20 20:36:06 · 1285 阅读 · 0 评论 -
弹出遮罩层,阻止背景滚动
弹出一个遮罩层,发现背景会随着“鼠标滚轮”滚动,解决办法如下: 设置body的CSS样式为overflow:hidden 。原创 2016-09-07 18:12:08 · 2357 阅读 · 0 评论 -
sass media媒体查询使用
文章目录文章参考语法说明文章参考sass @media语法说明.sidebar { width: 300px; @media screen and (mix-width: 720px){ width: 500px; }}转为.sidebar { width: 300px;}@media screen and (mix-width: 720px){ ...原创 2019-07-15 00:00:16 · 7456 阅读 · 2 评论 -
css 代码原则
css 写在header中,提前加载css尽量的继承,抽取公共样式,减少CSS代码量尽量使用class而不是对元素标签设置样式,少用*全局匹配选择器优化,尽量减少层级嵌套过深css文件的多少和大小要追求一个平衡不使用 @import发布的时候,压缩代码,减少数据传输量合并属性,例如margin,padding, background不滥用web字体(Don’t use too m...原创 2019-07-15 00:00:13 · 330 阅读 · 0 评论 -
css module global的使用
文章目录文章参考global语法说明单个全局class多个全局classwebpack 如何配置css module文章参考(https://www.cnblogs.com/kugeliu/p/7889018.html)[https://www.cnblogs.com/kugeliu/p/7889018.html]global语法说明单个全局class// css 样式(:glob...原创 2019-07-15 00:00:10 · 11136 阅读 · 0 评论 -
css3 box-sizing 怪异模式
文章目录问题来源box-sizing的值如何设置怪异模式应用场景描述问题来源在做移动端开发的时候,发现宽度设置三列为33.33%的控件,但是要显示border,结果发现div控件就换行了,原因是控件的宽度+border超过了100%,为了让页面变得简单,因此采用了怪异模式box-sizing的值content-box 是默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有...原创 2019-07-24 16:22:06 · 302 阅读 · 0 评论 -
CSS优先级权重学习笔记
文章参考http://www.cnblogs.com/xugang/archive/2010/09/24/1833760.html一般情况下,优先级如下:(外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style权重说明内联样式表的权值最高 1000;ID 选择器的权值为 10...转载 2019-08-05 21:49:33 · 286 阅读 · 1 评论 -
移动网页 viewport(视口) 像素密度
文章参考http://www.cnblogs.com/pigtail/archive/2013/03/15/2961631.html什么是像素密度?像素密度(dpi: dots per inch),即每英寸屏幕所拥有的像素数,像素密度越大,显示画面细节就越丰富。例如:手机实际像素像素iphone3162dpi320px * 480pxiphone43...原创 2019-08-06 17:18:58 · 328 阅读 · 0 评论 -
CSS 常用布局总结学习(转载)
文章目录原理说明案例(原理说明)案例二(回字形布局)案例 (计算出中间组件的高度,剩下的百分百)原理说明利用flex布局,很容易实现“左右两边固定,剩余100%”的布局模式利用flex-direction: column;样式,就很容易实现“顶部和底部固定,中间100%”的情况要设置html,body的高度为100%;否则设置的div高度为100%是0px;必须要保证设置的控件高度从h...转载 2019-07-15 00:01:56 · 4314 阅读 · 1 评论 -
CSS 布局左边固定,右边百分百
文章目录文章参考文章参考Flex 布局语法教程<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #flex{ ...原创 2019-07-15 00:02:17 · 6371 阅读 · 3 评论 -
CSS flex样式垂直居中
文章参考Flex 布局教程:语法篇问题描述由于div默认是没有高度的,如果设置了高度,默认是从左到右,从上到下的顺序来排布;如果要做垂直居中,就需要计算div控件的高度,如果内容变多或者变少,又会导致定位不准确,因此,最稳妥的办法就是让浏览器自己去根据div的高度居中显示flex 个人理解作用自身的样式flex-direction属性决定主轴的方向(即项目的排列方向)flex...原创 2019-07-15 00:07:26 · 69402 阅读 · 0 评论 -
css3 target伪类学习
所有主流浏览器均支持 :target 选择器,除了 IE8 及更早的版本。 定义和用法URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。:target 选择器可用于选取当前活动的目标元素。 less 学习原创 2016-09-07 18:14:04 · 617 阅读 · 0 评论 -
chrome浏览器CSS字体大小小于12px不起作用解决方法
由于rem的大小为16px,因此,设置为如下代码,rem单位长度就为10px:html{font-size: 62.5% !important;} 由于chrome浏览器最小文字大小不能小于12px,因此这样设置,实际上rem不是真实的10px; 在网上找了很多办法,让1rem位10px,很多办法都不适用,最后求情了大神,解决办法如下:html{font-size:原创 2016-09-07 18:14:53 · 3880 阅读 · 0 评论 -
position:relative 文字 或者 图片 重合
学习使用position:relative样式,让文字悬浮在图片上方。 dsaf dasfdsafdsaf dsafdsaf 大小: 28.原创 2016-09-07 17:56:54 · 1145 阅读 · 0 评论 -
图文混排
在工作中经常碰到图片和文字排版的问题,这里自己学习总结一下:先看看例子 我 时间的流失,转眼冬季就到了。我在班里的冯佑璋的鼓励下,去二池(当时夏天可游泳,冬天开冰场)学习滑冰。只能 在晚场7:30-9:00练习;当时我又时间的流失,转眼冬季就到了。我在班里的冯佑璋的鼓励下,去二池(当时夏天可游泳,冬 天开冰场)学习滑冰。只能在晚场7:30-9:原创 2016-09-07 18:00:16 · 1048 阅读 · 0 评论 -
margin值为负数——bootstrap row container-fluid样式学习
1、在使用bootstrap的过程中发现只要是使用row这个class,则div每次都是都是超过100%,出现滚动条 2、如果是在控件下面,则不会出现滚动条 查看了row 和 container-fluid的class样式说明 //让div控件显示为100%,然后外边距左右各添加15px,实际上是给div增加30px.row { margin-left: -1原创 2016-09-07 18:00:02 · 1409 阅读 · 0 评论 -
页面不出现滚动条,局部有滚动条
需求:页面header 固定在头部,footer固定在尾部,中间为内容。中间内容可以无限添加内容,那么滚动条就是在中间的容器中,不管怎么滑动内容,顶部和尾部都是固定不动 解决办法: 周定 ... ... 立即订购原创 2016-09-07 18:06:52 · 3238 阅读 · 0 评论 -
display:table-cell 学习笔
文章参考http://blog.163.com/hongshaoguoguo@126/blog/static/180469812013671133230/ 说明:display:table-cell只支持IE8+的浏览器,不支持IE6、IE7。 用下面这个例子说明这个样式的妙用:onetwothree 例子很简单,有两个重要的特性:1、div以“inli原创 2016-09-07 18:02:25 · 308 阅读 · 0 评论 -
背景色和背景图片共存,背景图片覆盖色
文章参考https://bbs.csdn.net/topics/390695803问题描述今天公司要做一个大屏展示,背景图片是背景色+透明背景图片合并而成,同事使用的是AI工具制作的图片,同事提供了一个透明的背景图片,然后让我显示最终的效果,按照我的理解背景图片应该是与背景色不能共存的,查询了相关资料,当背景图片和背景色同时作用的时候,背景图片会覆盖背景色,没有覆盖到的就显示背景色,因...原创 2019-07-15 00:07:29 · 11112 阅读 · 4 评论 -
less入门学习笔记
问题描述在写CSS样式的时候,由于层次比较深,使用css嵌套的方式作用指定范围的样式是个不错的选择,直接用CSS写样式,会增加代码的复杂度,如果用sass就需要引入webpack或者后台编译器转换,如果工程比较小(只有一两个页面),使用webpack打包,就显得项目过于臃肿,因此,选择了less工具,在浏览器中可以直接访问文章参考less中文网站less 介绍CSS预处理器中Less...原创 2019-07-15 00:07:32 · 302 阅读 · 0 评论 -
bootstrap3 全局控制总结
代码整理html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}body { margin: 0;}/*所有控件全部采用 border-box 怪异模型*/* { -webkit-box-sizing: border-box; -moz...原创 2019-07-15 00:08:06 · 436 阅读 · 0 评论