基础 CSS 厨房水槽标签

CSS 厨房水槽标签是指编写 CSS 时，使用的一些基础样式代码，类似于我们使用厨房水槽进行简单的清洗和预处理。这些标签不仅提供了一些基础样式，还可以节省编写代码的时间，提高开发的效率。以下是一些常见的基础 CSS 厨房水槽标签, 一起来了解下吧！

CSS Reset

CSS Reset 是一种用于规范化浏览器默认样式的技术。由于不同浏览器对于 HTML 元素默认样式的差别，可能会影响布局的一致性，因此需要对浏览器默认样式进行重置、统一。以下是一个常见的 CSS Reset 样式表：

html,
body,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
table,
fieldset,
form,
label,
legend,
input,
textarea,
button,
select {
  margin: 0;
  padding: 0;
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset,
img {
  border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal;
}

ol,
ul {
  list-style: none;
}

caption,
th {
  text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

q:before,
q:after {
  content: '';
}

abbr,
acronym {
  border: 0;
}

Box-sizing

box-sizing 属性决定了元素盒子的尺寸计算方式。默认情况下，盒子的尺寸计算包括 padding 和 border。使用 box-sizing: border-box 可以让盒子的尺寸计算包括 padding 和 border。

* {
  box-sizing: border-box;
}

Clearfix

清除浮动是一种解决父元素高度塌陷的方法。以下是通过 Clearfix 清除浮动的代码：

.clearfix::after {
  content: '';
  clear: both;
  display: block;
}

在父元素加上 .clearfix 类，就可以清除其中的浮动元素。

Flexbox

Flexbox 是一种为布局提供灵活性的 CSS3 布局模式。Flexbox 可以用来创建响应式布局，比如将一个容器中的子元素均分多个等份，使其在不同屏幕尺寸下都能显示合适的大小。以下是一个使用 Flexbox 布局的示例：

.parent {
  display: flex;
  justify-content: space-between;
}

.child {
  width: 30%;
  height: 200px;
}

Normalize

Normalize 是一种类似于 CSS Reset 的技术，它会保留一些浏览器默认样式，同时对其进行规范化，可以使得网页在不同浏览器中显示一致。以下是一个常见的 Normalize 样式表：

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted; /* 2 */
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

button,
input { /* 1 */
  overflow: visible;
}

button,
select { /* 1 */
  text-transform: none;
}

[type="button"],
[type="reset"],
[type="submit"],
button {
  -webkit-appearance: button;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0; /* 1 */
}

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

总结

本文介绍了一些常见的基础 CSS 厨房水槽标签，这些标签虽然基础，但却非常实用，可以让 CSS 编写更加高效。当然，这仅仅是冰山一角，还有很多其他好用的标签，了解它们，可以帮助我们更好地编写优秀的前端代码。