css
文章平均质量分 74
qiphon3650
成功需要努力,知识源于分享!
展开
-
@import “~antd/dist/antd.less“ ~ 什么意思
@import “~antd/dist/antd.less” ~ 什么意思翻译于less-loader文档webpackImporterType: Boolean Default: trueEnables/Disables the default webpack importer.This can improve performance in some cases. Use it with caution because aliases and @import at-rules starting翻译 2021-10-12 15:51:28 · 1521 阅读 · 0 评论 -
解决a标签锚点跳转内容滚动过长问题
通常一些文章的标题会添加锚点跳转,但是,点击之后要跳转的标题一般会被盖住,解决这个问题只需要添加一条css样式即可body { height: 4000px;}h1 { margin-top: 400px; /* 只需添加下面这条 */ scroll-margin-top: 20px;}demo...原创 2020-11-29 16:20:02 · 621 阅读 · 0 评论 -
css 形成独立层条件
层叠上下文在我们使用 css 的定位的时候,元素的渲染顺序是由其 z-index 的值影响的。这是因为这些元素具有能够使他们形成一个层叠上下文的特殊属性。文档中的层叠上下文由满足以下任意一个条件的元素形成:文档根元素();position 值为 absolute(绝对定位)或 relative(相对定位)且 z-index 值不为 auto 的元素;position 值为 fixed(固定定位)或 sticky(粘滞定位)的元素(沾滞定位适配所有移动设备上的浏览器,但老的桌面浏览器不支转载 2020-09-29 16:55:53 · 655 阅读 · 0 评论 -
css grid 布局
css gridCSS Grid 网格布局Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。容器属性注意,设为网格布局以后,容器子元素(项目)的float、display: inline-block、display:原创 2020-09-23 15:48:22 · 656 阅读 · 0 评论 -
iphone去除 input 框的内阴影
iphone去除 input 框的内阴影给元素添加平台特有的样式input{ .... -moz-appearance:button; /* Firefox */ -webkit-appearance:button; /* Safari 和 Chrome */ appearance:button;}相关解释 mdn翻译 2020-09-15 14:28:58 · 509 阅读 · 0 评论 -
css cursor 鼠标手势
span.wait {cursor:wait}属性定义及使用说明cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状默认值:auto继承:yes版本:CSS2JavaScript 语法:object.style.cursor="crosshair"转载 2017-12-11 15:37:35 · 5072 阅读 · 0 评论 -
css reset
常见的css浏览器处理办法就是css reset和css normalize个人比较习惯css reset下面是我的css代码html { font-size: 100px;}body,div,span,applet,object,iframe,h1,h2,h3,figure,footer,header,hgroup,mark,meter,...原创 2017-11-23 11:53:18 · 510 阅读 · 0 评论 -
sass笔记
安装Sass和Compass sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby。(注:mac下自带Ruby无需在安装Ruby!)window下安装SASS首先需要安装Ruby,先从官网下载Ruby并安装。安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。 安装完成后需测试安装有没有成功,运行CMD输入以下命令:...转载 2018-01-11 23:45:04 · 417 阅读 · 0 评论 -
flex布局
摘抄地址 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html浏览器支持 :IE 10+chrome 21+opera 12.1+Firefox 22+safari 6.1+网友 JailBreak 为本文的所有示例制作了 Demo一、Flex 布局是什么?Flex 是 Flexi转载 2017-12-11 14:25:17 · 338 阅读 · 1 评论 -
CSS hack
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况。基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验。可是啊,现实太残酷,浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协,虽然这只是个别情况。今天,结合自己的经转载 2017-12-02 15:40:30 · 228 阅读 · 0 评论 -
@font-face
CSS3 @font-face编辑推荐: 掘金是一个高质量的技术社区,从 CSS 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。 点击链接查看最新前端内容,或到各大应用市场搜索「 掘金」下载APP,技术干货尽在掌握中。@font-face是CSS3中的一个模块,他主要是把自己定义的Web转载 2017-08-16 17:24:40 · 469 阅读 · 1 评论 -
解决相对定位随滚动条滚动可以无限下滑的问题
很久之前接触js的时候就遇到过这个问题,当时老是给出的答案是使用固定定位,今天写页面突然又遇到了这个问题,感觉很差异,于是有了下面的解决办法 // 右侧工具栏固定 var toolTop = $('.rightTool').offset().top; //定位工具栏的距离顶部的距离 var bodyH = $('body').height(); //body的高度原创 2017-12-03 16:33:08 · 2035 阅读 · 0 评论 -
css3 实现非锚点的页面跳转效果
演示案例点这里html代码 css3非锚点跳转案例 a b c d 这是第一屏 这是第原创 2017-11-30 12:37:16 · 2084 阅读 · 0 评论 -
定位position
position六个属性值:static、relative、absolute、fixed、sticky和inherit。static(默认):元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分;行内元素则会创建一个或多个行框,置于其父元素中。relative:元素框相对于之前正常文档流中的位置发生偏移,并且原先的位置仍然被占据。发生偏移的时候,可能会覆盖其他元素。abs原创 2017-10-17 14:46:26 · 361 阅读 · 0 评论 -
sass 方法
官方地址http://sass-lang.com/documentation/Sass/Script/Functions.html 方法的使用示例:$color: hsl(120deg, 100%, 50%)接下来是各个方法的描述: RGB function RGB方法rgb($red, $green, $blue) //红绿蓝三原色 rgb颜色方法rgba($red,...翻译 2018-03-02 22:14:15 · 657 阅读 · 0 评论 -
html BFC是什么
引自知乎https://zhuanlan.zhihu.com/p/25321647一、常见定位方案在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案:普通流 (normal flow) 在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行,...原创 2018-03-02 22:52:34 · 5036 阅读 · 0 评论 -
-webkit-tap-highlight-color
iPhone手机下添加点击事件需要独有的cssdiv{ cursor:pointer;}这样设置之后就能触发点击事件了 但是点击的时候那个区域会有高亮反馈,解决办法div{ -webkit-tap-highlight-color:transparent;}...原创 2018-05-03 16:40:31 · 788 阅读 · 0 评论 -
抖音app中打开的第三方页面是黑色的
抖音web view默认的body是黑色的背景,写代码的时候要替换下用自己的颜色body { background: #fff;}原创 2019-07-04 18:14:33 · 2247 阅读 · 0 评论 -
CSS改变input光标颜色
CSS改变input光标颜色color 修改 (文字和光标同样颜色)文字颜色.color { color: red;}直接修改光标颜色 (css3).caret-color { caret-color: red}text-shadow 方式修改.shadow { color: red; text-shadow: 0px 0px 0px #D6...转载 2019-05-22 11:30:59 · 1200 阅读 · 0 评论 -
safari 下 inline-block 对齐问题
safari 下 inline-block 对齐问题safari 浏览器 对于 inline-block 没有默认的vertical-align 样式,今天项目遇到鼠标放在inline-block上面的时候元素突然不对齐的现象;解决办法,设置vertical-align:top...原创 2019-01-24 18:08:31 · 1248 阅读 · 0 评论 -
css 垂直居中方案
感谢Humphry的总结他写的很详细,可以去看看。转载 2018-11-05 14:23:49 · 145 阅读 · 0 评论 -
页面布局那些事
居中布局方法flex 方法的居中.nav { position:absolute; bottom:0; display:flex; align-item:center; justify-content:center; width:100%;}<div class="nav"> &a转载 2018-07-25 19:06:43 · 171 阅读 · 0 评论 -
自定义浏览器滚动条样式
感谢刘洋的分享https://www.lyblog.net/detail/314.html自定义IE浏览器滚动条样式 滚动条样式 支持情况 支持浏览器版本 可否继承 描述 scrollbar-3dlight-color IE特有属性 IE5.5+ y 设置滚动框的和滚动条箭头左上边缘的颜色 scrollbar-highlight-c...转载 2018-07-13 19:00:30 · 1377 阅读 · 1 评论 -
伪类的使用
巧用css3伪类(尽可能地使用伪元素) 优点: 1.不会增加js的dom负担 2.不会增加浏览器对html的解析,加快浏览器加载html 3.对seo很有帮助注意:img、input 不能有伪类表单:focus 事件的使用 .input:focus + div{ display:block }:invalid 配合h5正则表单验...原创 2018-07-12 19:51:04 · 548 阅读 · 0 评论 -
css3 filter
filter filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); 注意: 滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表...原创 2018-07-12 12:06:14 · 247 阅读 · 0 评论 -
css3 中的calc用法
定义与用法calc() 函数用于动态计算长度值。1.需要注意的是,运算符前后 都需要保留一个空格,例如:width: calc(100% - 10px); 2.任何长度值都可以使用calc()函数进行计算; 3.calc()函数支持 “+”, “-“, “*”, “/” 运算; 4.calc()函数使用标准的数学运算优先级规则; calc是css3中的计算,IE10+浏览器支持,I...转载 2018-06-29 17:04:07 · 4795 阅读 · 0 评论 -
文字渐变色
方法一 background-clip + text-fill-color李祺丰·前端<h2 class="text-gradient" data-text="天赐美妞">天赐美妞</h2> ///与HTML相对应的CSS代码如下:.text-gradient { display: inline-block; f转载 2018-06-14 16:11:00 · 1402 阅读 · 0 评论 -
加载动画
加载动画集合,全是css写出来的哦,没有图片http://loading.awesomes.cn/原创 2017-10-12 17:01:55 · 273 阅读 · 0 评论 -
哪些地方会出现css阻塞,哪些地方会出现js阻塞?
js 的阻塞特性:所有浏览器在下载 JS 的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等。直到 JS 下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。为了提高用户体验,新一代浏览器都支持并行下载 JS,但是 JS 下载仍然会阻塞其它资源的下载(例如.图片,css文件等)。 由于浏览器为了防止出现 JS 修改 DOM 树,需要重新构建 DOM 树的情况,所以就会转载 2017-09-20 10:52:49 · 2411 阅读 · 0 评论 -
-webkit-text-fill-color
-webkit-text-fill-color文字填充色-webkit-text-fill-color:yellowgreen;镂空字体-webkit-text-fill-color:transparent;-webkit-text-stroke:1px#000;字体添加过渡色backgro原创 2017-07-13 16:10:37 · 11556 阅读 · 2 评论 -
background-clip
p{width:200px;height:200px;margin:0 auto;border:3px dotted#973;padding:8px;background:gray;background-clip:content-box;}默认值 border-box 背景包含边框padding-box 背景包含paddingcont原创 2017-07-13 15:41:12 · 214 阅读 · 0 评论 -
-webkit-text-stroke
-webkit-text-stroke 文字描边-webkit-text-stroke-width: 描边宽度-webkit-text-stroke-color:描边颜色实例:-webkit-text-stroke:2pxred;火狐、chrome已经支持原创 2017-07-13 15:07:57 · 1973 阅读 · 0 评论 -
css3 pipe
下载该项目详尽原始的下载资源在这里:http://github.com/lojjic/PIE/downloads官方下载频道http://css3pie.com/download/压缩包里的htc文件和js文件要放在同一个目录,.red{background:red;/* 圆角 */border-radius:50%;behavior:url(js/pi转载 2017-07-11 15:05:04 · 396 阅读 · 0 评论 -
表单label与input对齐的方法
.calculate form input{width:220px;height:40px;line-height:40px;outline:none;border:none;vertical-align:middle;}.calculate form ul label{font-size:22px;vertical-align:middle;}原创 2017-07-02 09:34:21 · 18212 阅读 · 0 评论 -
清除浮动
昨天研究了好久,为什么自己写的清除浮动的方法不能实现在ie8上,今天终于发现了原来ie不支持双冒号 的伪类只能用单冒号.clearfix:after { content: " "; display: block; height: 0; clear: both; overflow: hidden;visibility: hidden; } .clear原创 2017-07-02 11:48:45 · 227 阅读 · 0 评论 -
CSS font-family中文字体英文名称展示
CSS font-family中文字体英文名称展示一些常见中文字体,例如“宋体”,“微软雅黑”等,直接使用中文名称作为CSS font-family的属性值也能生效,但我们一般都不使用中文名称,而是使用英文名称,主要是规避乱码的风险。还有一些中文字体,直接使用中文名称作为CSS font-family的属性值是没有效果的,如“思源黑体”, “兰亭黑体”等,需要使用对应的英文字体名称才可以。转载 2017-07-11 16:39:13 · 750 阅读 · 0 评论 -
respond.js media query
A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)使用:原文链接:http://caibaojian.com/respondjs.html1.在css中正常用 min/max-width media queries·//code from http:/转载 2017-07-11 12:00:31 · 357 阅读 · 0 评论 -
ie兼容
IE8中有一个“兼容性视图”的概念,当初IE8发布时,相对于IE6/7已经做出了非常大的改进,但是很多老站点仅针对IE6/7进行了优化,使用IE8渲染反而会一团糟。为了照顾这些苦逼的前端工程师,IE8加入了“兼容性视图”功能,这样的话就可以在IE8中使用IE6或IE7的内核渲染页面。这个当然不是我们想要的,所以需要使用meta标签来强制IE8使用最新的内核渲染页面IE=edge表示强制使用转载 2017-07-11 10:57:00 · 275 阅读 · 0 评论 -
css波浪线
.info::before { content: ''; position: absolute; bottom: -0.125em; width: 100%; height: 0.25em; background: -webkit-linear-gradient(315deg, transparent, transparent 45%, #00800转载 2017-06-29 17:02:16 · 5374 阅读 · 0 评论 -
CSS clip 属性
CSS clip 属性CSS 参考手册实例剪裁图像:img { position:absolute; clip:rect(0px,60px,200px,0px); }亲自试一试浏览器支持所有主流浏览器都支持 clip 属性。注释:任何的版本的 Internet Explorer (包括 IE8)都转载 2017-06-03 10:00:25 · 326 阅读 · 0 评论