“CSS”的版本间的差异
跳到导航
跳到搜索
防止
增加
在
（建立内容为“== 在 <code>body</code> 中居中一个 <code>div</code> == <ref>[https://stackoverflow.com/a/12772084/10974106 How to vertically center a “div” element for…”的新页面） |
（→笔记） |
||
| （未显示同一用户的4个中间版本） | |||
| 第1行： | 第1行： | ||
| − | == 在 <code>body</code> 中居中一个 <code>div</code> == | + | [[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> 没有高度，但可通过更改 <code>line-height</code> 的值来实现。<ref>[https://stackoverflow.com/a/1409742/10974106 How to change the height of a <br>]</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> | <ref>[https://stackoverflow.com/a/12772084/10974106 How to vertically center a “div” element for all browsers using CSS?]</ref> | ||
| − | |||
<syntaxhighlight lang=css> | <syntaxhighlight lang=css> | ||
html { | html { | ||
| 第10行： | 第33行： | ||
height: 100%; | height: 100%; | ||
margin: 0; | margin: 0; | ||
| + | padding: 0; | ||
} | } | ||
.container { | .container { | ||
| 第35行： | 第59行： | ||
<references /> | <references /> | ||
| − | |||
| − | |||
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>