随笔分类 - CSS
摘要：JavaScript 和 CSS 已经并存超过了 20 年。但是在它们之间共享数据非常困难。当然也有大量的尝试。但是我所想到的是一些简单而直观的内容——不涉及结构更改，而是使用 CSS 自定义属性甚至 Sass 变量。 CSS 自定义属性和 JavaScript 自定义属性在这里应该不会令人感到惊讶
阅读全文
摘要：页脚置底（Sticky footer）就是让网页的footer部分始终在浏览器窗口的底部。当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被推到网页底部；但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。 1、将内容部分的底部外边距设为负数 这是个比较主流的用法，把内容部分最小高度设
阅读全文
摘要：雪碧图(sprite)是减少请求次数的有效手段，其原理是把多张图片进行合成，使用时通过css进行定位。 1.先看一下雪碧图 没有使用雪碧图时图标是这样一个个的单独文件： 合成雪碧图后是这样拼在一起的一张图： 2.雪碧图的使用 首先确定要使用的图标的位置和大小（可以通过ps测量）， 如下的雪碧图大小统
阅读全文
摘要：利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。 使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。 方法一 这个方法把一些
阅读全文
摘要：当你的用户需要一些额外的上下文来放置图标，或者当他们需要一些保证来点击按钮，或者可能是一个复活节彩蛋的标题来搭配一个图片时，工具提示是一个很好的方法来增强用户界面。现在让我们来制作一些动画工具提示，只使用HTML和CSS。 演示 以下是我们的工作目标: 主要目标是拥有一种添加工具提示的简单方法，因此
阅读全文
摘要：复杂的网页布局都是通过各种网页元素灵活定位实现的，网页中的各种元素定位都有自己的特点。下面我们来看一下css的几种定位方式。 float定位（即浮动定位）： 这种定位方式很简单，只需规定一个浮动的方向（如：float:left;就表示这个元素向左边摆放），它的定位是相对于父元素容器； 如果该元素设置
阅读全文
摘要：再日常项目中可能会用到一些特殊的样式，比如大写字母转小写、小写字母转大写、首字母大写等。 可以通过 CSS 的 text-transform 属性来实现： text-transform 转换不同的文本 属性值： none 带有小写字母和大写字母的标准的文本（默认属性）。 capitalize 首字母
阅读全文
摘要：通过设置元素的pointer-events属性设置为none，来实现元素不可点击。此方法是通过设置元素的鼠标事件失效来实现元素不可点击。 css设置不可点击： css代码： .disable { pointer-events: none; } 示例： const disabled = true; <
阅读全文
摘要：在css中有很多好看的样式都可以实现，css设置出来的样式让整个网页看起来也会非常美观，今天的这篇文章就给大家来介绍一下在css中怎么设置文字的透明度，让你的文字在网页中看起来是透明的。 CSS设置透明度可用如下两类方法实现： 1、使用rgba2、使用opacity 使用rgba设置文字不透明度的方
阅读全文
摘要：基线 baseline：字符x的底部 x-height: 字母x的高度，vertical-aling设置为middle的时候，对齐的是baseline往上1/2的x-height，所以vertical-aling设置为middle不是整正的居中对齐 line-height 1.内容高度 思考：未
阅读全文
摘要：微信h5页面下拉露出网页来源的解决办法：将document的touchmove事件禁止掉 //禁止页面拖动 document.addEventListener('touchmove', function(e) { e.preventDefault(); }, { passive: false });
阅读全文
摘要：1： readonly规定输入字段为只读可复制，但是，用户可以使用Tab键切换到该字段，可选择,可以接收焦点，还可以选中或拷贝其文本。 <input type="text" value="哈哈哈" readonly="readonly"> 2：disabled 被禁用的 input 元素可复制，不能
阅读全文
摘要：具体用法 使用 -- 声明变量，使用 var() 函数获取变量。 :root{ --header-height: 70px; } body { --color: white; } .header { height: var(--header-height); } var() 函数还可以使用第二个参数
阅读全文
摘要：pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。 /* Keyword values */ pointer-events: auto; pointer-events: none; pointer-events: visibl
阅读全文
摘要：高度自适应第一种情况 1.高度不去设置，或者高度设置auto 内容撑开父元素的高度。2.内容撑开父元素的高度 -> 最小高度的设置 min-height3.浮动元素添加高度自适应 -> 添加浮动元素的父元素没有高度，会出现高度塌陷 解决高度塌陷的方法 (1)给出现高度塌陷的元素添加：overflow
阅读全文
摘要：在CSS中，可以使用filter属性来模糊处理图像；filter属性用于将图像转换为模糊图像。该属性主要用于设置图像的视觉效果。 语法： filter: blur() 属性值： ● blur()：给图像设置高斯模糊，值越大越模糊。如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比
阅读全文
摘要：定义和用法 z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 注释：元素可拥有负的 z-index 属性值。 注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;） 说明 该属性设置一个定位元素沿 z 轴的位置，z
阅读全文
摘要：每次全国哀悼日，各大网站首页都变成了灰色，添加以下全局CSS样式，可以实现此效果： 方法一 html { -webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);}
阅读全文
摘要：最近，我从 Grover网站 上发现以一个好玩儿的悬停动画，这个动画是将鼠标移动到订阅按钮上移动光标，会跟随光标实现相应的彩色渐变。这个想法很简单，但是它能使这个按钮脱颖而出，人们一下子就注意到它了，增加了点击的概率。
阅读全文