![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
hkwBest
这个作者很懒,什么都没留下…
展开
-
CSS3: linear-gradient 线性渐变
日常开发中线性渐变是必不可少的技能之一,今天来简单聊一聊。线性渐变的优势就不赘述了,直接看看用法吧。渐变规则要想了解渐变的规则首先要明白渐变线的规则,渐变线是垂直向上的,在不指定角度时,如:background-image: linear-gradient(red,blue) 颜色是有上至下由红渐变为蓝色。可是这明显与渐变线垂直向上不符啊,其实在不显示指定渐变角度时,默认是180deg。在...原创 2019-10-18 14:42:58 · 813 阅读 · 0 评论 -
span间距问题
span布局中常常会遇到这种问题:由于父级元素设置了font-size且span(其实不止是span,确切说是子元素)设置了行内块样式,导致span间的空格和换行会有空隙 like this:<div> <span>11</span> <span>22<span></div>/* CSS */div...原创 2019-02-12 15:04:15 · 9192 阅读 · 0 评论 -
sticky定位
我们都知道常见的定位方式有static、relative、absolute、fixed,今天来介绍一种‘粘性定位’sticky。定义粘性定位可以被认为是相对定位(relative)和固定定位(fixed)的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。也就是说sticky会让元素在页面滚动时如同在正常流中(relative定位效果),但当滚动到特定位置时就会固定在屏幕上如同 fixe...原创 2019-02-12 15:58:39 · 12264 阅读 · 0 评论 -
margin合并
从事前端工作的小伙伴都知道margin合并也叫做margin折叠。今天总结如下。定义块级元素的上外边距或下外边距有时(直接接触/相邻时)会合并为一个外边距,这种合并行为叫做margin合并。注意浮动元素或者有绝对定位的元素不会发生margin合并的行为。合并原则正正取最大,负负取最负,正负就相加分类1. 相邻元素之间margin合并相邻元素之间的margin合并规则很简单,按照上述的...原创 2019-03-01 10:42:53 · 2495 阅读 · 0 评论 -
CSS实现垂直/水平居中
前端开发中经常用到水平/垂直居中,现总结如下。//html<div class="box"> <div class="content">this is content</div></div>//css .box { width: 600px; height: 400px; border: 1px solid ...原创 2019-03-01 11:45:18 · 145 阅读 · 0 评论 -
CSS实现等高布局
等高布局的实现方式有很多种这介绍两种非常实用的主流的方法,如下://html<div class='box'> <div class='left'> <div class='bor'></div> dasdsgerfadcdasdsfdsfdsfdsfdsfdfsdf </div> ...原创 2019-03-01 16:25:56 · 3631 阅读 · 0 评论 -
为什么解析 CSS 选择器时一定要从右往左解析
为什么解析 CSS 选择器时一定要从右往左解析?今天逛论坛时无意中看到这个熟悉的命题。勾起了一段心酸的往事,记得刚毕业面试时被这个问题ko过。今天总结一下算是祭奠下当年那个菜鸟的我。首先来了解下页面是如何渲染的:首先浏览器会把HTML文档解析为DOM tree,然后解析CSS为CSS tree,接着把DOM tree和CSS tree组合构建成为一棵可以渲染的render tree,最终用来绘...原创 2019-05-21 15:45:45 · 634 阅读 · 1 评论 -
图片加载失败占位符
当网络不佳加载图片时会出现加载失败或者延时加载的情况,此时原本的图片位置会显示空白状态,这造成了不好的用户体验,所以我们需要加一个图片占位符。有两种方式可以实现:js其实这种方式也很简单,监听onerror事件就可以了。举个栗子:<img src="http://xxxx" onerror="{this.src='/statictest.png'}" />监听onerror...原创 2019-06-25 11:25:28 · 1903 阅读 · 0 评论