前端奇学淫巧：一些有趣的 CSS 重置小技巧-JavaScript中文网-JavaScript教程资源分享门户

CSS 重置是前端开发中的一项基础技能，用于消除浏览器默认样式的影响，统一页面样式表现。但是仅仅掌握了基本的 CSS 重置知识是不够的，实际开发中常常需要一些巧妙的技巧来应对各种特定的场景，本文将分享一些有趣的 CSS 重置小技巧，详细探究其原理和应用，希望能够对前端开发者们有所启发和指导。

技巧一：去除 input 框默认外边框

当我们使用原生的 input 元素时，经常需要将其外边框去掉，为了保证不同浏览器的兼容性，通常的做法是将其边框改为 0，但是这样会导致 input 框的边框样式在 focus 状态下也被去掉了，无法显示出 focus 状态下的边框效果，此时我们可以使用如下技巧来解决这个问题：

input:focus {
    outline: none;
}

这段 CSS 代码的作用是在 input 元素被 focus 状态时，去掉其默认边框，但是不影响 focus 状态下的边框效果。

技巧二：清除浮动

当使用 float 属性排版时，经常会碰到浮动元素不幸撑爆了容器宽度的尴尬情况，此时解决问题的方法很简单，就是在浮动元素后面手动添加一个空 div，设置 clear:both 属性，这样就能清除浮动带来的影响，如下所示：

<div class="wrapper">
    <div class="float-left"></div>
    <div class="float-right"></div>
    <div style="clear: both;"></div>
</div>

但是这样写起来费劲，因为需要每次在最后添加一个清除浮动的 div，CSS 世界中有更为优雅的解决方案，直接在容器 div 上添加一个伪元素来清除浮动，代码如下：

.wrapper::after {
    content: "";
    display: block;
    clear: both;
}

这样无论有多少个浮动元素，都不用再手动添加清除浮动的 div 了。

技巧三：修改滚动条样式

浏览器的滚动条样式相当难看，但却是我们经常不得不面对的问题，使用 CSS 调整滚动条样式可以大大改善用户体验，但是不同浏览器的滚动条样式有较大的差异，兼容性问题也很容易出现，下面是一段兼容多浏览器的滚动条样式修改代码：

-- -------------------- ---- -------
-- ------ --
------------------- -
    ------ ----
    ------- ----
    ----------------- --------
-

------------------------- -
    -------------- ----
    ----------------- --------
-

-- ------- --
-- ------------- -------- ------ --

-- -- --
--------------- -
    ------ ----
    ------- ----
    ----------------- --------
-

--------------------- -
    -------------- ----
    ----------------- --------
-

技巧四：固定 header/footer 并让 content 自适应高度

在 web 开发中，固定 header/footer 是非常常见的需求，但是如何实现固定 header/footer 并让 content 自适应高度却需要一些巧妙的技巧。

<div class="wrapper">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

首先我们将 header/footer 固定在页面顶部/底部，CSS 代码如下：

-- -------------------- ---- -------
------- -
    --------- ------
    ---- --
    ------ -----
    ------- -----
-

------- -
    --------- ------
    ------- --
    ------ -----
    ------- -----
-

然后我们将 content 的 margin-top/margin-bottom 设置为 header/footer 的高度，如下所示：

.content {
    margin-top: 50px;
    margin-bottom: 50px;
}

最后我们将 wrapper 设置为相对定位，以便让 content 能够占据剩余的空间，如下代码所示：

.wrapper {
    position: relative;
    min-height: 100%;
}

这样就实现了固定 header/footer 并让 content 自适应高度的效果，兼容性好，应用广泛。

技巧五：让 div 完全占据父元素剩余高度

有时候我们需要将某个 div 占满父元素的剩余高度，但是又不想使用 position:absolute 等方式，此时我们可以使用 flex 布局来实现这个效果，如下代码所示：

<div class="wrapper">
    <div class="header"></div>
    <div class="content"></div>
</div>

-- -------------------- ---- -------
-------- -
    -------- -----
    --------------- -------
    ----------- ------
-

-------- -
    ----- --
-

这样就能够让 content div 实现占满父元素剩余高度的效果了。

总结

本文介绍了一些有趣的 CSS 重置小技巧，包括去除 input 框默认外边框、清除浮动、修改滚动条样式、固定 header/footer 并让 content 自适应高度、让 div 完全占据父元素剩余高度等，希望能够为前端开发者们提供一些启发和指导，帮助大家更好地应对实际工作中的各种场景。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64687750968c7c53b08ab9d5