css/sass
样式
衣乌安、
愿每天合上笔记本盖子的刹那,都有着剑客收剑入鞘的骄傲。。。
展开
-
用黑白的纯净致敬逆行者
今天,举国哀悼,同时向逆行者致敬,许多网站纷纷响应,将五颜六色的元素纷纷置为黑白,其实只需简单修改html的css样式即可html { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(10...原创 2020-04-04 22:38:16 · 266 阅读 · 0 评论 -
css 自定义滚动条样式
总是记不住这几个修改滚动条的伪类,抄过来记录一下:你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式: ::-webkit-scrollbar — 整个滚动条. ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头). ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块. ::-webk...原创 2020-04-02 11:35:49 · 317 阅读 · 0 评论 -
node-sass下载失败报错
在网络状态不好或被隔离的情况下安装node-sass经常会遇到以下问题:Cannot download "https://github.com/sass/node-sass/releases/download/v4.13.1/linux-x64-72_binding.node": ETIMEDOUT解决方案:1、使用淘宝源下载:SASS_BINARY_SITE=https:...原创 2020-02-29 20:22:48 · 760 阅读 · 0 评论 -
纯css实现波浪球
其实利用不规则园旋转实现,打开浏览器看下代码就知道了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"...原创 2020-01-15 17:14:39 · 705 阅读 · 0 评论 -
sass px转rem适配方案
// rem$browser-default-font-size: 16px ;html { font-size: $browser-default-font-size;}@media screen and (max-width: 1200px) { html { font-size: 14px; }}@media screen and (...原创 2020-01-07 10:27:47 · 507 阅读 · 0 评论 -
sass中calc()和变量同时使用
在sass中想同时使用calc()和变量以下写法是不可行的$height: 20px;.demo { height: calc(100% - $height);}这样写经过编译在浏览器中显示结果如下:要想变量生效需要使用以下写法:$height: 20px;.demo { height: calc(100% - #{$height});}...原创 2019-12-23 11:47:51 · 1046 阅读 · 0 评论 -
css-loader locaIdentName报错
npm: https://www.npmjs.com/package/css-loadercss-loader从3.0.0版本开始,locaIdentName配置项的位置做了调整,由原来与modules同级调整为了modules下的一个属性。module.exports = { module: { rules: [ { test: /...原创 2019-10-28 10:48:46 · 1173 阅读 · 1 评论 -
css可继承属性
所有元素可继承:visibility和cursor。内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。...原创 2019-05-11 16:17:34 · 133 阅读 · 0 评论 -
scss中:global内使用动画无效
//无效样式@keyframes mymove{ from { transform:translateY(0); } to { transform:translateY(1); }}//有效动画@keyframes:global(mymove) { from { -webkit-transform...原创 2019-05-07 19:43:46 · 4928 阅读 · 0 评论 -
overflow:hidden 对齐问题(对齐baseline)
问题当元素设置css属性:display:inline-block,该元素或其后代元素设置css属性overflow:hidden时,会遇到该元素与其他行内元素对齐方式为baseline造成布局错乱。如下图:解决办法为display:inline-block的元素设置vertical-align: bottom原因w3规范The baseline of an ‘inline-bl...原创 2019-04-23 17:07:00 · 1134 阅读 · 0 评论 -
css中一些有趣的属性
object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框 https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit object-position 规定了可替换元素的内容,在这里我们称其为对象(即object-position中的object),在其内容框中的位置。可替换元素的内容框...原创 2019-02-28 17:07:59 · 315 阅读 · 0 评论 -
mix-blend-mode 混合模式 background-blend-mode 背景混合模式 isolation:isolate 隔离
css3 mix-blend-mode 混合模式 该属性不仅可以作用于HTML,还可以作用于SVG 兼容性: IE 8~11 Edge 12~14 Firefox 41~47 chrome 45~51 Safari 7~9.1 支持的值很多: mix-blend-mode:normal; //正常 mix-blend-mode:multiply; //正片叠加 m...转载 2019-01-03 12:07:09 · 566 阅读 · 0 评论 -
CSS做等边三角形
这里我列举的两种方法:一种用边框也就是border实现(比较简单)另一种是用五个div旋转溢出隐藏实现一、用border在我们平常使用边框的时候往往是一个很窄的边框,所以在视觉效果上边框看似为直线,事实呢?给一个小的盒子加一个很宽的边框,如下:html代码:<div id="triangle"></div>css代码:#triangle{ ...原创 2018-05-09 20:48:30 · 11078 阅读 · 5 评论 -
排版细节之行级格式化上下文
行级元素:特点:1.可以和其他元素处于一行,不用必须另起一行。 2.元素的高度、宽度及顶部和底部边距不可设置。 3.元素的宽度就是它包含的文字、图片的宽度,不可改变。 4. display默认属性为inline。常用的有:a b i span img input select strong lable块级元素可以通过display属性设置inline或者inline...原创 2018-05-03 21:56:06 · 385 阅读 · 0 评论 -
flex布局交叉轴方向对齐方式详解
今天重新研究了一下flex布局发现了一个一直没有理解透而忽略的问题~align-content属性和align-items属性的作用和区别?之前学flex布局时看的是阮一峰大神的博客感觉很不错,今天回过头来研究我发现对于align-content属性和align-items属性作用的解释并不是很清楚(可能是我理解能力太差吧)不过没关系,通过查资料和实践最终领悟了~先看大神的解释:(直接截图啦让我最...原创 2018-05-04 21:43:29 · 10402 阅读 · 0 评论 -
transform 3D那些~
以前在学css的时候只是稍微看了一遍transform 变换尤其是3D的,今天在做一个小demo的时候才重点研究了一些,所以整理了下来。 一说3D估计大家最先想到的就是我们平常看到3D电影还有VR了,所为3D就是立体了,我们日常生活中使用的实物当然毋庸置疑的是3D的啦,举个与我们网页制作类似的例子,我们平常玩的游戏里的人物,便是3D的。先想想看,如果游戏里的人物都和纸片一样没有丝...原创 2018-04-27 23:50:42 · 950 阅读 · 0 评论 -
h1——h6标签内容对应像素
浏览器默认为body:100%=16px;浏览器计算得出:h1=32pxh2=24pxh3=18.72pxh4=16pxp=16pxh5=13.28pxh6=12px原创 2018-05-06 18:50:54 · 1853 阅读 · 0 评论 -
css选择器优先级和权重
优先级按从高到低排列有:内联样式 (例如, style="font-weight:bold") 总会覆盖外部样式表的任何样式 因此可看作是具有最高的优先级。ID选择器(例如, #example)类选择器(class selectors) (例如,.example),属性选择器(attributes selectors)(例如, [type="radio"]),伪类(pseudo-classes)(...原创 2018-05-07 20:21:02 · 493 阅读 · 0 评论 -
CSS3新增伪类
CSS3新增伪类p:last-of-type 选择其父元素的最后的一个P元素p:last-child 选择其父元素的最后子元素(一定是P才行) p:first-of-type 选择其父元素的首个P元素p:first-child 选择其父元素的首个p元素(一定是p才行) p:only-child 选择其父元素的只有一个元素...原创 2018-06-04 10:19:03 · 254 阅读 · 0 评论 -
多行文本溢出
大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。CSS代码:overflow: hidden;text-overflow: ellipsis;white-space: nowrap;但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果。Web...原创 2018-07-31 19:46:07 · 409 阅读 · 0 评论 -
行内元素空白消除
转载自:奇舞周刊 相信大家应该都遇到过下面这个问题:“HTML源码中行内元素之间的空白显示在了屏幕上”。可能大家都有自己的小技巧来消除这些意料之外的空白。但是方法有很多,有时候不能满足于一种方法,不同的方法适合于不同的场景。就像我之前一直用的方法,今天总结了之后才发现还有更好的方法。废话不多说,接下来我给大家总结一下消除行内元素HTML源码空白的小技巧。下文中以一个div中的两个spa...转载 2018-11-13 18:50:47 · 447 阅读 · 0 评论 -
去除button按钮点击后产生的虚线框
今天在做一个页面的时候发现了一个小问题~当按钮或者a链接点击后会出现一个特别丑的虚线框,就像这样:这是由于按钮或者a链接获得焦点造成的,解决办法有:1、设置 :focus{ outline: none; } 属性,但IE6、 7并没有用,似乎在一些Firefox浏览器上也没用2、设置 ::-moz-focus-inner{ border: 0; }属性,Firefox有效,此处设置的不是outl...原创 2018-04-24 16:16:29 · 4441 阅读 · 0 评论