摘要: 简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。 用法 两个方法,其中,querySe 阅读全文
posted @ 2020-03-15 10:39 Ever-Lose 阅读(615) 评论(0) 推荐(0) 编辑
摘要: 问题描述 先来一段html代码 此刻效果是正常的一倍效果 接着加入container缩放 则会出现极细致的一条白色边,原因大概就是.parent元素的border和.son的height经过缩放后不会是整数,两个数值的小数点被省去不渲染,导致两者叠加起来和真正要的效果差1px,而让.parent的背 阅读全文
posted @ 2020-03-14 18:56 Ever-Lose 阅读(1220) 评论(2) 推荐(0) 编辑
摘要: 案例重现 布局时经常能发现inline元素和inline block元素水平呈现的元素间,会存在着一些意想不到的间距,举例: 由于换行和空格分割符的存在,行内元素间将被渲染为一个小间距了。 解决办法1 元素间移除空格和换行 这样看着仍旧不太舒服,尤其是项目里缩进层级深的时候 解决办法2 父元素设置 阅读全文
posted @ 2020-03-14 18:54 Ever-Lose 阅读(177) 评论(0) 推荐(0) 编辑
摘要: 一、浮动布局+百分比 该样式兼容性较好,但是无法实现当里面的列增多时比例也随着变化,必须手动修改,当然你也可以使用一个JS来调整了。 二、行内元素(inline block)+百分比 三、display:table + display:table cell 我们知道表格可以根据内容进行划分,CSS也 阅读全文
posted @ 2020-03-14 18:42 Ever-Lose 阅读(1452) 评论(0) 推荐(0) 编辑
摘要: 简介 background attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。可能的值有三个: scroll 默认值。背景图像会随着页面其余部分的滚动而移动。 fixed 当页面的其余部分滚动时,背景图像不会移动。 inherit 规定应该从父元素继承 background 阅读全文
posted @ 2020-03-14 18:39 Ever-Lose 阅读(416) 评论(0) 推荐(0) 编辑
摘要: 原理 ch等宽字体 + text indent 动画负缩进 显示效果如 loading... 代码 阅读全文
posted @ 2020-03-14 18:33 Ever-Lose 阅读(162) 评论(0) 推荐(0) 编辑
摘要: 块级格式上下文(Block formatting context) 什么是BFC? 块格式化上下文(block formatting context) 是页面 CSS视觉渲染的一部分。它是用于决定块盒子的布局及浮动相互影响的一个区域。 – MDN 块格式上下文 BFC是一个容器,在这个容器中的元素不 阅读全文
posted @ 2020-03-14 18:20 Ever-Lose 阅读(130) 评论(0) 推荐(0) 编辑
摘要: 简介 HSL色彩模式是工业界的一种颜色标准,是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,HSL即是代表色调,饱和度,亮度三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。HSLA是在HSL的基础 阅读全文
posted @ 2020-03-14 18:00 Ever-Lose 阅读(339) 评论(0) 推荐(0) 编辑
摘要: 直接抄 "postcss css reset" 代码吧。 pc mobile 阅读全文
posted @ 2020-03-14 17:40 Ever-Lose 阅读(341) 评论(0) 推荐(0) 编辑
摘要: 单行截断 此方法兼容到ie6过。不过只能单行。 多行截断 此方法webkit私有,并且使用flex布局,只得在移动端和高版本 webkit 系列浏览器使用。 多行截断2 利用浮动元素特性模拟最后的省略号。 兼容性好,对各大主流浏览器有好的支持。 响应式截断,根据不同宽度做出调整。 文本超出范围才显示 阅读全文
posted @ 2020-03-14 17:35 Ever-Lose 阅读(1406) 评论(0) 推荐(0) 编辑