css
userkang
这个作者很懒,什么都没留下…
展开
-
inline-block元素高度为0,父级仍被撑起,问题元凶—strut
背景最近遇到一个问题,在 div 元素下插入一个 iframe 元素,宽、高、边框都设置为0了,但 div 还是被撑起了一个高度。 <div style="background: orangered;"> <iframe src="/" style="width: 0; height: 0;" frameborder="0"></iframe> &...原创 2020-03-29 05:21:31 · 1961 阅读 · 1 评论 -
CSS3 Multicol 的一些基本概念
多列布局(通常称为multicol)是一种规范,用于将内容布置到一组列框中,就像报纸中的列一样。本指南解释了规范如何与一些常见的用例示例一起使用。关键概念和术语Multicol与CSS中的任何其他布局方法不同,它将内容(包括所有后代元素)分段为列。这与在使用CSS Paged Media时将内容分段为页面的方式相同,例如通过创建打印样式表。规范定义的属性有:column-widthco...原创 2018-11-02 19:59:47 · 851 阅读 · 0 评论 -
最常用的移动端 1px 实现
关于移动端实现 1px 的方式有很多,这里只讲述最常使用也是兼容性较好的两种:1、利用 transfrom 的 scale 缩放来实现2、利用 background 的 line-gradient 线性渐变来实现实现效果代码<!DOCTYPE html><html lang="en"> <head> <meta charset="...原创 2018-11-22 14:38:15 · 1654 阅读 · 0 评论 -
CSS 多列等高的几种实现方式
什么是多列等高简单的说,就是多个列,但是所有列的高度都希望以最高的那个列为准。如下图,每个列的高度都靠里面的内容撑起来。但是有些情况我们需要每个列能与最高的那个列等齐。如下图:实现利用 padding、margin 来实现table 布局实现flex 布局实现来直接看看测试代码吧,可以直接复制代码,查看结果&lt;!DOCTYPE html&gt;&lt;html la...原创 2018-11-22 17:10:41 · 4921 阅读 · 0 评论 -
svg圆圈loading的实现
效果:代码:&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1, minimum-scale=1, maximum原创 2018-12-03 11:53:10 · 1950 阅读 · 0 评论 -
svg之viewBox缩放
举个栗子原创 2018-12-03 16:22:03 · 12608 阅读 · 6 评论 -
css 实现移动端横滑
效果实现 &lt;div class="tab-part-wrapper"&gt; &lt;div class="tab-part"&gt; &lt;ul class="scroll-hidden"&gt; &lt;li class="tab-item原创 2018-12-17 17:16:12 · 699 阅读 · 0 评论 -
flex 常见用法终极版
相信大家都体验过 flex 布局的强大。这里是flex的常见的用法集合。可能刚开始会不习惯这种复杂的命名,但是如果适应了,就会觉得很好用,指数级提高开发效率。一般建议在项目全局引入。下面分别列出了纯css版本,还有sass版本,大家也可以根据项目的需求,进行删减和增加。用法说明:// .flex flex容器默认水平流方向// .flecol flex容器垂直流方向// .flex-...原创 2019-09-06 15:04:44 · 848 阅读 · 0 评论