“CSS”的版本间的差异
跳到导航
跳到搜索
防止
增加
在
（→笔记） |
|||
| （未显示同一用户的2个中间版本） | |||
| 第1行： | 第1行： | ||
[[Category:Frontend]] | [[Category:Frontend]] | ||
| + | == 符号的含义 == | ||
| + | |||
| + | ;<code>~</code> (tilde): Subsequent-sibling combinator（之后的所有 sibling） <ref>https://www.w3.org/TR/selectors-4/#general-sibling-combinators</ref> | ||
| + | ;<code>+</code> (plus): Next-sibling combinator（紧挨着的下一个 sibling） <ref>https://www.w3.org/TR/selectors-4/#adjacent-sibling-combinators</ref> | ||
| + | |||
== 笔记 == | == 笔记 == | ||
| + | |||
| + | === 防止 <code>textarea</code> overflow === | ||
| + | |||
| + | 直接对 <code>textarea</code> 设置 <code>width: 100%</code> 会因为存在 padding 和 border 而 overflow。解决方法：<ref>https://davidwalsh.name/textarea-width</ref> | ||
| + | <syntaxhighlight lang=css> | ||
| + | textarea { | ||
| + | -webkit-box-sizing: border-box; | ||
| + | -moz-box-sizing: border-box; | ||
| + | box-sizing: border-box; | ||
| + | width: 100%; | ||
| + | } | ||
| + | </syntaxhighlight> | ||
=== 增加 <code>br</code> 行间的高度 === | === 增加 <code>br</code> 行间的高度 === | ||
2021年11月19日 (五) 21:45的最新版本
符号的含义
~(tilde)- Subsequent-sibling combinator（之后的所有 sibling） [1]
+(plus)- Next-sibling combinator（紧挨着的下一个 sibling） [2]
笔记
防止 textarea overflow
直接对 textarea 设置 width: 100% 会因为存在 padding 和 border 而 overflow。解决方法：[3]
textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}
增加 br 行间的高度
实际上 br 没有高度，但可通过更改 line-height 的值来实现。[4]
在 body 中居中一个 div
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;
}
<div class="container">
<div class="main">
Stuff
</div>
</div>