查看“CSS”的源代码

[[Category:Frontend]]
== 符号的含义 ==

;<code>~</code>: Subsequent-sibling combinator（之后的所有 sibling） <ref>https://www.w3.org/TR/selectors-4/#general-sibling-combinators</ref>
;<code>+</code>: Next-sibling combinator（紧挨着的下一个 sibling） <ref>https://www.w3.org/TR/selectors-4/#adjacent-sibling-combinators</ref>

== 笔记 ==

=== 增加 <code>br</code> 行间的高度 ===

实际上 <code>br</code> 没有高度，但可通过更改 <code>line-height</code> 的值来实现。<ref>[https://stackoverflow.com/a/1409742/10974106 How to change the height of a &lt;br&gt;]</ref>

=== 在 <code>body</code> 中居中一个 <code>div</code> ===

<ref>[https://stackoverflow.com/a/12772084/10974106 How to vertically center a “div” element for all browsers using CSS?]</ref>
<syntaxhighlight lang=css>
html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.container {
  height: 100%;
  width: 100%;
  display: table;
}
.main {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  text-align: center;
}
</syntaxhighlight>

<syntaxhighlight lang=html>
<div class="container">
  <div class="main">
    Stuff
  </div>
</div>
</syntaxhighlight>

== 参考资料 ==

<references />