CSS

符号的含义

• ~ (tilde): Subsequent-sibling combinator（之后的所有 sibling） ¹
• + (plus): Next-sibling combinator（紧挨着的下一个 sibling） ²

笔记

防止 textarea overflow

直接对 textarea 设置 width: 100% 会因为存在 padding 和 border 而 overflow。解决方法：³

textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}

增加 br 行间的高度

实际上 br 没有高度，但可通过更改 line-height 的值来实现。⁴

在 body 中居中一个 div ⁵

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
}
.container {
  height: 100%;
  width: 100%;
  display: table;
}
.main {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  text-align: center;
}

<div class="container">
  <div class="main">
    Stuff
  </div>
</div>

Footnotes

1. https://www.w3.org/TR/selectors-4/#general-sibling-combinators ↩

2. https://www.w3.org/TR/selectors-4/#adjacent-sibling-combinators ↩

3. https://davidwalsh.name/textarea-width ↩

4. How to change the height of a <br> ↩

5. How to vertically center a “div” element for all browsers using CSS? ↩