高级布局和效果的八个CSS技巧 _布局

本文概述

1.最大化CSS同级选择器
2.一致的HTML元素大小
3.动态高度元素
4.动态宽度元素
5.动态内容的垂直居中
6.等高列
7.超越盒子
8.夜间模式
充分利用CSS

在过去的几年中, Web前端开发领域取得了长足的进步。但是, 正如用户所看到的, Web前端仍然是相同的：用CSS设置HTML标记样式。
起初, 许多布局问题似乎很简单, 但通常被证明是棘手的。如果没有广泛了解某些CSS功能的工作原理, 仅使用CSS似乎无法实现这些高级布局。

文章图片
在本文中, 你将找到八个CSS专家技巧, 这些技巧和技巧利用鲜为人知的CSS功能来实现其中一些高级布局和效果。
1.最大化CSS同级选择器问题：你没有使用同级选择器, 从而失去了优化机会。
解决方案：尽可能使用同级选择器。每当使用项目列表时, 需要以不同的方式对待第一个或最后一个项目时, 你的第一个直觉可能是使用：first-child和：last-child伪CSS选择器。
【高级布局和效果的八个CSS技巧】例如, 创建仅CSS的汉堡菜单图标时：
请参阅CodePen上的Rico Mossesgeld(@ricotheque)撰写的Pen最大化CSS同级选择器1。
这是有道理的：除了最后一个, 每个小节都有一个底边。
通过相邻的同级选择器(+)也可以实现相同的效果：
请参阅CodePen上的Rico Mossesgeld(@ricotheque)撰写的Pen最大化CSS同级选择器2。
这也是有道理的：第一个小节之后的所有内容都具有边距顶部。这个CSS技巧不仅节省了一些额外的字节(可以很容易地添加到任何中型项目中), 而且还开辟了无限的可能性。
考虑以下卡片列表：
请参阅CodePen上的Rico Mossesgeld(@ricotheque)撰写的Pen最大化CSS同级选择器3。
每个标题都有一个标题和文本, 默认情况下隐藏标题和文本。如果只想显示活动卡的文本(带有.active类)和其后的文本, 则可以仅使用CSS来快速完成：
请参阅CodePen上的Rico Mossesgeld(@ricotheque)撰写的Pen最大化CSS同级选择器4。
有了一点JavaScript, 它也可以是交互式的。
但是, 仅依靠JavaScript会产生如下脚本：
请参阅CodePen上的Rico Mossesgeld(@ricotheque)撰写的Pen最大化CSS同级选择器5。
在其中包括jQuery作为依赖项可以使你的代码简短一些。
2.一致的HTML元素大小问题是：HTML元素在不同浏览器中的大小不一致。
解决方案：将所有元素的框大小设置为border-box。 Internet Explorer是Web开发人员长期以来遭受的祸害, 它做对了一件事情：适当地调整了框的大小。
其他浏览器仅在计算HTML元素的宽度时才查看内容, 其他所有内容都视为多余。宽度：200像素div, 具有20像素的填充和2像素的边框, 呈现为242像素的宽度。
Internet Explorer将填充和边框视为宽度的一部分。在这里, 上方的div宽度为200像素。
请参阅CodePen上的Rico Mossesgeld(@ricotheque)的Pen CSS Box Model Demo 1。
一旦掌握了这一点, 即使不遵循标准, 你也会发现后一种方法更具逻辑性。

如果我说宽度为200像素, 天哪, 即使我有20像素的填充, 它也会是200像素的宽框。

无论如何, 以下CSS可以在所有浏览器中使元素大小(以及布局)保持一致：
请参阅CodePen上的Rico Mossesgeld(@ricotheque)的Pen CSS Box Model Demo 2。
第二组CSS选择器可保护样式设置为无边框的HTML元素免受布局中断的影响。
box-sizing：border-box非常有用, 它是相对流行的CSS框架sanitize.css的一部分。
3.动态高度元素问题是：使HTML元素的高度与宽度成比例。
解决方案：使用垂直填充代替高度。
假设你希望HTML元素的高度始终与其CSS宽度匹配。 height：100％不会更改与内容高度匹配的元素的默认行为。
请参阅CodePen上的Rico Mossesgeld(@ricotheque)的” 笔动态高度元素1″ 。
答案是将高度设置为0, 然后使用padding-top或padding-bottom设置.container的实际高度。每个属性都可以是元素宽度的百分比：
请参阅CodePen上的Rico Mossesgeld(@ricotheque)的” 笔动态高度元素2″ 。
现在, 无论.container变多, 它都将保持正方形。溢出：隐藏使长时间的内容不会超出此比率。
进行一些修改后, 此技术非常适合创建可保留其纵横比为任何大小的视频嵌入。只需将嵌入与.container的顶部和左侧对齐即可：绝对, 将嵌入的两个尺寸都设置为100％, 以使其” 填满” .container, 然后更改.container的填充底部以匹配视频的长宽比。
请参阅CodePen上的Rico Mossesgeld(@ricotheque)的Pen Dynamic Height Elements 3。
position：.container的相对位置, 可确保iframe绝对定位正常工作。新的填充底部是宽高比除以其宽度乘以100。例如, 如果视频嵌入的宽高比为16：9, 则填充底部百分比应为9除以16(.5625)并乘以100(56.25)。
4.动态宽度元素问题是：使HTML元素的宽度与高度成比例。
解决方案：使用字体大小作为元素尺寸的基础。
现在, 相反, 或者容器随着高度改变宽度呢？这次, 它的字体大小适合救援。请记住, 宽度和高度可以以ems为单位, 这意味着它们可以是元素的字体大小的比率。
字体大小为40px, 宽度为2em, 高度为1em的元素将是80像素(40 x 2)宽和40像素(40 x 1)高。
请参阅CodePen上的Rico Mossesgeld(@ricotheque)的” 笔动态宽度元素” 。
是否要更改.container的高度？更改字体大小。
唯一需要注意的是, 不可能仅通过CSS自动使元素的字体大小与其父级的高度匹配。但是, 此技术允许将Javascript调整大小脚本从以下内容中删除：

var container = document.querySelector( '.container' ); container.style.height = yourDesiredHeight + 'px'; container.style.width = yourDesiredHeight * yourDesiredRatio + 'px';

至：

document.querySelector( '.container' ).style.fontSize = yourDesiredHeight + 'px';

5.动态内容的垂直居中问题：将HTML元素(高度未知)垂直居中放置在另一个元素内。
解决方案：将外部元素设置为display：table, 然后将内部元素转换为CSS table-cell。或者只是使用CSS Flexbox。
可以将一行文本的垂直居中高度设置为行高：
请参阅CodePen上Rico Mossesgeld(@ricotheque)撰写的动态内容1的笔垂直居中。
对于多行文本或非文本内容, CSS表就是答案。将.container的显示设置为表格, 然后对.text使用display：table-cell和vertical-align：middle：
请参阅CodePen上的Rico Mossesgeld(@ricotheque)撰写的《动态内容2的笔垂直居中》。
将此CSS技巧想像为margin的垂直等效项：0 auto。如果可以接受Internet Explorer的越野车支持, 则CSS3的Flexbox是此技术的理想选择：
请参阅CodePen上的Rico Mossesgeld(@ricotheque)撰写的动态内容3的笔垂直居中。
6.等高列问题：保持列的高度相同。
解决方案：对于每列, 使用大的负边距底值, 并使用同样大的底距将其抵消。 CSS表和Flexbox也可以使用。
使用float或display：inline-block, 可以通过CSS创建并列的列。
请参阅CodePen上的Rico Mossesgeld(@ricotheque)的” 钢笔同高栏” 1。
请注意使用box-sizing：border-box来正确调整.cols的大小。请参阅上方的” 一致的HTML元素大小调整” 。
第一列和最后一列的边界不会一直向下。它们与第二列的高度不匹配。要解决此问题, 只需将溢出：隐藏到.row中即可。然后将每个.col的边距底部设置为99999px, 将其下距设置为100009px(99999px +应用于.col另一侧的10px填充)。
请参阅CodePen上的Rico Mossesgeld(@ricotheque)的” 笔高度相同的列2″ 。
一个更直接的替代方法是Flexbox。同样, 仅在不需要Internet Explorer支持的情况下才使用此功能。
请参见CodePen上的Rico Mossesgeld(@ricotheque)撰写的” 钢笔相同高度的专栏3″ 。
具有更好的浏览器支持的另一种替代方法：CSS表(不垂直对齐：中间)。
请参阅CodePen上的Rico Mossesgeld(@ricotheque)的” 笔高度相同的列4″ 。
7.超越盒子问题：方框和直线是如此陈词滥调。
解决方案：使用transform：rotation(x)或border-radius。
从市场营销或小册子网站上获取一系列典型的窗格：垂直堆叠的带有奇点的幻灯片。其标记和CSS可能如下所示：
参见CodePen上的Rico Mossesgeld(@ricotheque)撰写的《超越盒子的笔》。
以使标记更加复杂为代价, 这些方形的窗格可以变成一堆平行四边形。
参见CodePen上的Rico Mossesgeld(@ricotheque)撰写的《超越盒子2的笔》。
这里发生了很多事情：
每个窗格的高度由.pane-container控制。底边负数可确保窗格紧密堆叠。

.pane-background, 其子.mask-box和其孙子.image都设置为position：absolute。每个元素具有不同的上, 左, 下和右值。这消除了下面详述的旋转产生的任何间距。
.mask-box旋转2度(逆时针)。
.image旋转了-2度以抵消.mask-box的旋转。
.mask-box的溢出是隐藏的, 因此其旋转的顶部和底部会夹住.image元素。

与此相关的是, 将图像变成圆形或椭圆形非常简单。只需将border-radius：100％应用于img元素。
参见CodePen上的Rico Mossesgeld(@ricotheque)撰写的《超越盒子的笔》。
诸如此类的实时CSS修改减少了在网站上发布内容之前准备内容的需求。 Web开发人员无需在Photoshop中对照片应用圆形蒙版, 而只需通过CSS即可应用相同的效果, 而无需更改原始照片。
另一个优点是, 通过保持内容不变而不依赖于网站的当前设计, 可以促进将来的重新设计或改版。
8.夜间模式问题：在不创建新样式表的情况下实现夜间模式。
解决方案：使用CSS过滤器。
某些应用程序具有夜间模式, 在该模式下, 界面变暗以在弱光下获得更好的可读性。在较新的浏览器上, CSS滤镜可以通过应用类似Photoshop的效果来创建相同的效果。
有用的CSS过滤器是反转的, 它(毫无意外)可以反转元素内所有内容的颜色。这样就不必创建和应用一组新的样式。
请参阅CodePen上的Rico Mossesgeld(@ricotheque)的Pen Night Mode 1。
在黑色文本和白色背景上使用此过滤器可模拟夜间模式。！important确保这些新颜色覆盖任何现有样式。
请参阅CodePen上的Rico Mossesgeld(@ricotheque)的Pen Night Mode 2。
不幸的是, 图像看起来很奇怪, 因为其颜色与其他所有颜色都被反转了。好消息是, 可以同时应用多个过滤器。添加色相旋转滤镜可将图像和其他视觉内容恢复为正常：
请参阅CodePen上的Rico Mossesgeld(@ricotheque)的Pen Night Mode 3。
为什么这样做？ hue-rotate(180deg)产生的效果与invert(1)相同。这是演示如何通过JavaScript驱动的按钮切换夜间模式CSS的示例。
充分利用CSS 除非将来浏览器或网站的构建方式发生巨大变化, 否则对CSS的全面了解将仍然是Web开发领域的一项基本技能。
所有这些CSS技巧都有一个共同点：它们最大限度地利用CSS作为一种样式语言, 从而使浏览器本身可以承担繁重的工作。而且, 如果操作正确, 这将始终产生更好的结果, 更好的性能, 从而带来更好的用户体验。
让我们知道你是否有CSS技巧, 可以在下面的评论部分找到有趣和有用的技巧。