CSS奇技淫巧
文章平均质量分 65
ExMaterial
材料→前端→实施→???
展开
-
CSS垂直居中指南
CSS中最简单的垂直居中方法是给容器相等的上下内边距,让容器和内容自行决定自己的高度。不管容器里的内容显示为行内、块级或者其他形式,这种方法都有效,但有时我们想给容器设置固定高度,或者无法使用内边距,因为想让容器内另一个子元素靠近容器的顶部或者底部。这在等高列中也是一个常见的问题,尤其是用浮动布局这种较传统的技术实现时。还好CSS表格和Flexbox能够轻松实现居中。(如果用传统的技术,需要用别的办法处理内容居中。)不同的情况有不同的处理方法,具体参考如下所示。在容器里让内容居中最好的方式是根据特定场景考虑转载 2022-06-23 04:00:00 · 62 阅读 · 0 评论 -
用六行CSS代码实现一个三角形
要实现一个三角形,可以先给一个块元素加上四个方向的边框。将另外三个边框的颜色变成透明,块元素的宽高都变为零,即可得到一个三角形。原创 2022-06-20 12:00:00 · 105 阅读 · 0 评论 -
重学CSS之相对单位(二)
上一篇文章介绍的em和rem都是相对于font-size定义的,但CSS里不止有这一种相对单位。还有相对于浏览器视口定义长度的视口的相对单位。视口——浏览器窗口里网页可见部分的边框区域。它不包括浏览器的地址栏、工具栏、状态栏。如果你不熟悉视口的相对单位,请先看下面的简单介绍。比如,50vw等于视口宽度的一半,25vh等于视口高度的25%。vmin取决于宽和高中较小的一方,这可以保证元素在屏幕方向变化时适应屏幕。在横屏时,vmin取决于高度;在竖屏时,则取决于宽度。视口相对长度非常适合展示一个填满屏幕的大图。原创 2022-06-17 12:00:00 · 211 阅读 · 0 评论 -
重学CSS之相对单位(一)
响应式——在CSS中指的是样式能够根据浏览器窗口的大小有不同的“响应”。这要求有意地考虑任何尺寸的手机、平板设备,或者桌面屏幕。如果给一个元素设置800px的宽度,在小窗口下会是什么样?水平菜单如果无法在一行显示会是什么样?在写CSS的时候,我们既要考虑整体性,也要考虑差异性。当有很多方法解决同一个问题时,我们要选择能够兼顾更多情况的方法。相对单位就是CSS用来解决这种抽象的一种工具。我们可以基于窗口大小来等比例地缩放字号,而不是固定为14px,或者将网页上的任何元素的大小都相对于基础字号来设置,然后只用改原创 2022-06-16 10:01:17 · 433 阅读 · 1 评论 -
重学CSS之层叠
CSS,即层叠样式表(英文全称:Cascading Style Sheets),本系列第一篇就来讲CSS中的第一个C,即层叠(Cascading)。浏览器遵循三个步骤,即来源、优先级、源码顺序,来解析网页上每个元素的每个属性。你添加到网页里的样式表并不是浏览器唯一使用的样式表,还有其他类型或来源的样式表。你的样式表属于作者样式表,除此之外还有用户代理样式表,即浏览器默认样式。用户代理样式表优先级低,你的样式会覆盖它们。...原创 2022-06-14 22:26:32 · 801 阅读 · 0 评论