随笔分类 - Stylus、CSS和HTML
摘要：两行css如下： .waterfall-container { /*分几列*/ column-count: 2; /*列间距，可有可无，默认30px*/ /*column-gap: 0;*/ } .waterfall-item { /*不留白，不知道什么意思可以取消这个样式试试*/ break-in
阅读全文
摘要：如果问，CSS 中 position 属性的取值有几个？大部分人的回答是，大概是下面这几个吧？static、relative、absolute、fixed。其实还可以有下面3种取值：inherit（继承）、initial（默认）、unset（不设置） unset：名如其意，unset 关键字我们可以
阅读全文
摘要：参考之前思路：conic-gradient：圆锥形渐变存在兼容性问题，无法使用，要不然其实实现效果也蛮好的 <div class="precoss"> <div class="skew"></div> </div> .precoss{ width 26px height 26px border:2p
阅读全文
摘要：一、conic-gradient conic-gradient：圆锥形渐变，它的两个兄弟line-gradient(线性渐变)、radial-gradient(径向渐变)，算是最早认识的渐变属性。 1、特点：圆锥渐变的起始点是图形中心，渐变方向以顺时针方向绕中心旋转实现渐变效果。 2、兼容性： 根据
阅读全文
摘要：接着聊一下BFC、IFC，与FFC、GFC，GFC是一种二维度的布局方式，现在也蛮火，但是因为兼容性问题比较大，现在用的不多。其实这些布局方式经常会遇到，主要是想了解一下相关的各种概念和术语。 想要理解BFC与IFC，首先要理解另外两个概念：Box 和 FC（即 formatting context
阅读全文
摘要：外边距合并其实经常会遇到，这里稍微总结一下，以及一些相关的术语 一、什么是外边距合并？(折叠外边距) 外边距合并指的是当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者；而左右外边距不合并。 在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是
阅读全文
摘要：1、shadow-dom 是什么 shadow-dom，直译的话就是 影子dom ？我觉得可以理解为潜藏在黑暗中的 DOM 结构，也就是我们无法直接控制操纵的 DOM 结构。 shadow-dom 其实是浏览器的一种能力，它允许在浏览器渲染文档（document）的时候向其中的 Dom 结构中插入一
阅读全文
摘要：今年是一个特殊的清明节，举国哀悼，很多网站也都实现了变灰。很多网站包括主页和内容也都已经变成了灰色，比如百度、B 站、爱奇艺、CSDN 等等。大家可以看到全站的内容都变成灰色了，包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢？有人会以为所有的内容都统一换了一个 CSS 样式，图片也全换成灰
阅读全文
摘要：在开发应用的过程中，想要使得窗口在普通大小可以拖动，经常会设置该css属性：-webkit-app-region: drag; 但是设置了这个属性后，发现双击全屏和 restore size 等功能又废了，包括鼠标样式等等，实际上加了该属性就触发不了鼠标的相关事件。 通过搜索不难发现，有如下方案：
阅读全文
摘要：CSS Variables，一个并不是那么新的东西，但对css来说绝对是一场革命。之前使用变量的时候，需要借助sass、less等预处理工具来实现，现在我们可以直接使用css来声明变量。 一、兼容性 先来看下兼容性 二、语法 语法有点难看但很简单，--*来声明变量名，var(--*)来使用，也许你要
阅读全文
摘要：一、min()、max()、clamp() min()、max()、clamp() 适合放在一起讲，它们的作用彼此之间有所关联。 max()：从一个逗号分隔的表达式列表中选择最大（正方向）的值作为属性的值 min()：从一个逗号分隔的表达式列表中选择最小的值作为属性的值 clamp()：把一个值限制
阅读全文
摘要：一、CSS实现16:9等比例盒子 问题：图片的宽度100%，高度要始终自适应为16:9 解决方案： 1、通过js程序算出绝对高度再进行设置。这是解决问题最容易想到的方法 2、但是，我们的原则是能用css实现的功能尽量用css，这有利于后期项目的维护。css同样可以实现这个问题，我们可以利用边距的百分
阅读全文
摘要：一、BFC 知识 1、BFC 是什么？ BFC 全称：Block Formatting Context， 名为 "块级格式化上下文"。 W3C官方解释为：BFC 它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用。当涉及到可视化布局时，Block Formatting Context
阅读全文
摘要：任何一个容器都可以指定为 Flex 布局。行内元素也可以使用flex布局（display:inline-flex;）。 注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 采用 Flex 布局的元素，称为 Flex 容器，它的所有子元素自动成为容
阅读全文
摘要：我们常见的 z-index 看上去其实很简单，根据 z-index 的高低决定层叠的优先级，实则深入进去，会发现内有乾坤。 一、层叠顺序 问题背景：拥有共同父容器的两个 DIV 重叠在一起，是 display:inline-block 叠在上面，还是float:left 叠在上面？ 有人可能会说，D
阅读全文
摘要：一、字体兼容写法 font-family的调用方法： font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei; font:bold 12px/0.75em Arial,'Times New Roman','Microsoft YaHe
阅读全文
摘要：当我们的内容超出了我们的div，往往会出现滚动条，影响美观。尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。 这里介绍一个简单的方法：大体思路是在div外面再套一个div。这个div设置overflow:h
阅读全文
摘要：一、viewport 表示SVG可见区域的大小，或者可以想象成舞台大小，画布大小。 上面的SVG代码定义了一个视区，宽500单位，高300单位。 注意这里的措辞是“单位”，不是“像素”。虽然说，width/height如果是纯数字，使用的就是“像素”作为单位的。也就是说，上面SVG的视区大小就是50
阅读全文
摘要：1、svg image标签降级技术： svg不能很好的在anroid2.3中得到支持，需要额外的补充，IE8-以及Android 2.3默认浏览器是不支持SVG的。 svg image标签降级技术，这是一个名叫Alexey Ten首先提出来的，类似下面的代码： 即所有浏览器，包括IE，会把image
阅读全文
摘要：1、绝对定位元素溢出父元素，怎么隐藏问题？ 通常，为了让DIV子元素超出部分隐藏，都是在父元素设置overflow:hidden，这样即可防止子元素撑开父元素，使子元素能够溢出隐藏！ 但是，对于position:absolute定位的子元素，仅仅使用overflow:hidden没办法将其溢出部分隐
阅读全文
