css/sass/less
关注
分享
扫一扫
样式
衣乌安、
愿每天合上笔记本盖子的刹那，都有着剑客收剑入鞘的骄傲。。。\n
阿里巴巴-灵犀互娱内推：https://talent.lingxigames.com/off-campus/position-list?shareCode=tnUSkSaCdjj4vvU3_vDQ0g%3D%3D
展开
-
【CSS】absolute定位的默认位置
定位祖先元素进行定位。如果没有这样的祖先元素，则相对于初始包含块（通常是视口）进行定位。属性会使元素脱离正常的文档流，并相对于最近的非。时应该存在的位置，不过由于脱离了文档流，层级会高。没有指定具体值时，元素的在上下文中的位置会在默认。原创 2024-11-13 17:13:25 · 348 阅读 · 1 评论 -
【CSS】什么是BFC？
块级格式化上下文（Block Formatting Context，简称BFC）是CSS布局中的一种重要概念，它决定了块级盒子如何在其容器内排列，以及浮动元素对其周围元素的影响。理解BFC可以帮助解决许多常见的网页布局问题，比如清除浮动、防止外边距重叠等。原创 2024-11-11 14:52:59 · 464 阅读 · 0 评论 -
【CSS】“flex: 1“有什么用？
这种设置对于实现灵活、响应式的布局非常有用。例如，我们可以将导航栏中的项目设置为。属性设置为 1，相当于将其分配了一个相对于其他元素相同的可伸缩空间。会使该元素尽可能地占据父容器中的剩余空间，同时保持其他元素的相对位置和大小。无论导航栏的宽度如何变化，链接都会自动调整大小，以适应父容器的空间。在这个示例中，通过设置链接的。，使其自动平分导航栏的宽度。属性为 1，实现了它们的。原创 2024-11-07 16:46:16 · 961 阅读 · 0 评论 -
【CSS】居中样式
【代码】【CSS】居中样式。原创 2024-11-07 16:35:05 · 536 阅读 · 0 评论 -
【CSS】清除浮动（父元素塌陷）
在CSS布局中，“清除浮动”通常指的是消除由浮动元素引起的某些副作用，特别是当这些浮动元素影响到后续元素或者父元素的高度计算时。浮动元素会使它们脱离正常的文档流，这可能导致一些意料之外的效果，比如父元素高度塌陷（即父元素无法正确包裹住所有的子元素）。原创 2024-11-05 10:47:48 · 492 阅读 · 0 评论 -
【CSS】标准&怪异盒模型
【代码】【CSS】标准&怪异盒模型。原创 2024-11-05 10:44:54 · 368 阅读 · 0 评论 -
【CSS】尺寸单位
对于电脑显示器，px 通常与屏幕的物理像素相对应，但这也会受到屏幕分辨率和缩放设置的影响。例如，在标准分辨率（通常为 96 DPI 左右）的显示器上，1 px 大约等于 1/96 英寸。由于移动设备具有不同的屏幕密度（例如标准密度、高密度、超高密度等），同样的 px 值在不同密度的屏幕上显示的物理尺寸会有所不同。通常，DPI 的值越高，图像的清晰度和细节就越丰富。在 CSS 中，font-size: 50% 表示字体大小为父元素字体大小的 50%。在不同的设备上，px 对应的物理尺寸并不固定。原创 2024-09-06 16:27:16 · 651 阅读 · 0 评论 -
用黑白的纯净致敬逆行者
今天，举国哀悼，同时向逆行者致敬，许多网站纷纷响应，将五颜六色的元素纷纷置为黑白，其实只需简单修改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 · 280 阅读 · 0 评论 -
css 自定义滚动条样式
总是记不住这几个修改滚动条的伪类，抄过来记录一下：你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式: ::-webkit-scrollbar — 整个滚动条. ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头). ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块. ::-webk...原创 2020-04-02 11:35:49 · 339 阅读 · 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 · 798 阅读 · 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 · 767 阅读 · 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 · 537 阅读 · 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 · 1078 阅读 · 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 · 1199 阅读 · 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 · 144 阅读 · 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 · 4989 阅读 · 0 评论 -
CSS做等边三角形
这里我列举的两种方法：一种用边框也就是border实现（比较简单）另一种是用五个div旋转溢出隐藏实现一、用border在我们平常使用边框的时候往往是一个很窄的边框，所以在视觉效果上边框看似为直线，事实呢？给一个小的盒子加一个很宽的边框，如下：html代码：<div id="triangle"></div>css代码：#triangle{ ...原创 2018-05-09 20:48:30 · 11242 阅读 · 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 · 402 阅读 · 0 评论 -
flex布局交叉轴方向对齐方式详解
今天重新研究了一下flex布局发现了一个一直没有理解透而忽略的问题~align-content属性和align-items属性的作用和区别？之前学flex布局时看的是阮一峰大神的博客感觉很不错，今天回过头来研究我发现对于align-content属性和align-items属性作用的解释并不是很清楚（可能是我理解能力太差吧）不过没关系，通过查资料和实践最终领悟了~先看大神的解释:(直接截图啦让我最...原创 2018-05-04 21:43:29 · 10779 阅读 · 0 评论 -
transform 3D那些~
以前在学css的时候只是稍微看了一遍transform 变换尤其是3D的，今天在做一个小demo的时候才重点研究了一些，所以整理了下来。 一说3D估计大家最先想到的就是我们平常看到3D电影还有VR了，所为3D就是立体了，我们日常生活中使用的实物当然毋庸置疑的是3D的啦，举个与我们网页制作类似的例子，我们平常玩的游戏里的人物，便是3D的。先想想看，如果游戏里的人物都和纸片一样没有丝...原创 2018-04-27 23:50:42 · 983 阅读 · 0 评论 -
h1——h6标签内容对应像素
浏览器默认为body:100%=16px;浏览器计算得出:h1=32pxh2=24pxh3=18.72pxh4=16pxp=16pxh5=13.28pxh6=12px原创 2018-05-06 18:50:54 · 2037 阅读 · 0 评论 -
css选择器优先级和权重
优先级按从高到低排列有：内联样式 (例如, style="font-weight:bold") 总会覆盖外部样式表的任何样式 因此可看作是具有最高的优先级。ID选择器（例如, #example）类选择器（class selectors） (例如,.example)，属性选择器（attributes selectors）（例如, [type="radio"]），伪类（pseudo-classes）（...原创 2018-05-07 20:21:02 · 521 阅读 · 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 · 274 阅读 · 0 评论 -
多行文本溢出
大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。CSS代码：overflow: hidden;text-overflow: ellipsis;white-space: nowrap;但是这个属性并不支持多行文本溢出显示省略号，这里根据应用场景介绍几个方法来实现这样的效果。Web...原创 2018-07-31 19:46:07 · 429 阅读 · 0 评论 -
行内元素空白消除
转载自:奇舞周刊 相信大家应该都遇到过下面这个问题：“HTML源码中行内元素之间的空白显示在了屏幕上”。可能大家都有自己的小技巧来消除这些意料之外的空白。但是方法有很多，有时候不能满足于一种方法，不同的方法适合于不同的场景。就像我之前一直用的方法，今天总结了之后才发现还有更好的方法。废话不多说，接下来我给大家总结一下消除行内元素HTML源码空白的小技巧。下文中以一个div中的两个spa...转载 2018-11-13 18:50:47 · 466 阅读 · 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 · 607 阅读 · 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 · 351 阅读 · 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 · 1173 阅读 · 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 · 4541 阅读 · 0 评论