https://bigshans.github.io/tags/css/ Recent content in CSS on Bigshans' Blog Hugo en bigshans Fri, 13 Jan 2023 09:27:13 +0800 https://bigshans.github.io/post/css-box/ Fri, 13 Jan 2023 09:27:13 +0800 https://bigshans.github.io/post/css-box/ <p>一个 HTML 文档在浏览器内将会被解析为一棵文档树，这是众所周知的。 CSS 的盒子模型则描述了文档上的每一个节点所生成的模型，这是 CSS 布局排版的基础。</p> <h2 id="标准盒型">标准盒型</h2> <figure> <img src="https://www.w3.org/TR/2016/WD-CSS22-20160412/images/boxdim.png" alt="盒子模型示意图"/> <figcaption aria-hidden="true">盒子模型示意图</figcaption> </figure> <p>每一个盒子都一块内容（content）区域，围绕内容从内向外分别是内边距、边框和外边距（padding 、 border 、 margin）。</p> https://bigshans.github.io/post/css%E4%B8%89%E6%A0%8F%E5%B8%83%E5%B1%80/ Tue, 10 Jan 2023 09:27:35 +0800 https://bigshans.github.io/post/css%E4%B8%89%E6%A0%8F%E5%B8%83%E5%B1%80/ <p>三栏布局是比较经典的 CSS 布局，特点就是中间内容自适应，首先渲染，其次左右内容大小保持不变分布两旁。结构上打破了一般意义上的左中右的顺序，变成了中左右的顺序，但视觉展示仍然要求是左中右的布局，于是，如何将中间内容放回到中间，并重新分布左右则是此类技术的核心所在。在 <code>flex</code> 之前，前端多用 <code>float</code> 实现，出现了双飞翼和圣杯布局两种实现，现在我们可以用 <code>flex</code> 来很简单的实现。</p> https://bigshans.github.io/post/drop-shadow-hidden-origin-image/ Fri, 03 Dec 2021 16:32:50 +0800 https://bigshans.github.io/post/drop-shadow-hidden-origin-image/ <p>看到张鑫大佬的<a href="https://www.zhangxinxu.com/wordpress/2016/06/png-icon-change-color-by-css/">这篇文章</a>很有意思。</p> <p>张鑫大佬讲述了如何使用 <code>filter</code> 中的 <code>drop-shadow</code> 实现 png 图标改颜色的技巧，本质上是利用阴影偏移实现的。不过我有一点我一直没有搞明白就是如何将原始图像遮住。</p> https://bigshans.github.io/post/why-bfc-can-clear-flow/ Sun, 07 Nov 2021 17:27:40 +0800 https://bigshans.github.io/post/why-bfc-can-clear-flow/ <p>有些学问还是自己研究最为靠谱，像是 <code>overflow</code> 为什么能清 <code>float</code> ，都知道是 BFC ，但是为什么呢？因为在文档流中，普通的 <code>div</code> 其实也是 <code>BFC</code> ，所以，理论上添加 <code>overflow</code> 为非 <code>visible</code> 的时候，它也仍然是 BFC 啊？所以，问题在哪里呢？</p> https://bigshans.github.io/post/css%E7%BB%98%E5%88%B6%E4%B8%89%E8%A7%92%E5%BD%A2/ Sun, 22 Dec 2019 21:21:47 +0000 https://bigshans.github.io/post/css%E7%BB%98%E5%88%B6%E4%B8%89%E8%A7%92%E5%BD%A2/ <p>最近写前端要一个下拉箭头，所以选择用 css 画一个三角形来用，话不多说，看代码：</p>