CSS技巧和经验列表（以下实例默认运行环境都为Standard mode）
img { display:block;}img { vertical-align:top;}// 除了top值，还可以设置为text-top | middle | bottom | text-bottom，甚至特定的<length>和<percentage>值都可以// #test为img的父元素#test { font-size:0; line-height:0;}input { vertical-align:middle;}#test { height:25px; line-height:25px;}// 只需设置文本的行高等于容器的高度即可a:link { color:#03c;}a:visited { color:#666;}a:hover { color:#f30;}a:active { color:#c30;}// 按L-V-H-A的顺序设置超链接样式即可，可速记为LoVe（喜欢）HAte（讨厌）html { scrollbar-3dlight-color:#999; scrollbar-darkshadow-color:#999; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eee; scrollbar-arrow-color:#000; scrollbar-face-color:#ddd; scrollbar-track-color:#eee; scrollbar-base-color:#ddd;}// 将原来设置在body上的滚动条颜色样式定义到html标签选择符上即可#test { width:150px; white-space:nowrap;}// 设置容器的宽度和white-space为nowrap即可，其效果类似<nobr>标签// 此方法Firefox5.0尚不支持#test { width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}// 首先需设置将文本强制在一行内显示，然后将溢出的文本通过overflow:hidden截断，并以text-overflow:ellipsis方式将截断的文本显示为省略号。#test { width:150px; word-wrap:break-word;}// word-wrap的break-word值允许单词内换行#test { clear:both;}// #test为浮动元素的下一个兄弟元素#test { display:block; zoom:1; overflow:hidden;}// #test为浮动元素的父元素。zoom:1也可以替换为固定的width或height#test { zoom:1;}#test:after { display:block; clear:both; visibility:hidden; height:0; content:'';}// #test为浮动元素的父元素#test { cursor:pointer;}// 若将cursor设置为hand，将只有IE和Opera支持，且hand为非标准属性值#test { position:absolute; top:50%; left:50%; width:200px; height:200px; margin:-100px 0 0 -100px;}#test { display:table-cell; width:200px; height:200px; text-align:center; vertical-align:middle;}#test p { margin:0;}#test p img { vertical-align:middle;}// #test是img的祖父节点，p是img的父节点span { display:block; width:200px; height:100px;}// 要使内联元素可以设置宽高，只需将其定义为块级或者内联块级元素即可。所以方法非常多样，既可以设置display属性，也可以设置float属性，或者position属性等等。html,body { height:100%; margin:0;}#test { height:100%;}html,body { height:100%; margin:0;}#test { position:absolute; top:10px; right:10px; bottom:10px; left:10px;}a { outline:none;}.outer { width:200px; height:200px; background:#000; filter:alpha(opacity=20); opacity:0.2;}.inner { width:200px; height:200px; margin-top:-200px;}<div class="outer"><!--我是透明的容器--></div><div class="inner">我是不透明的内容</div>// 原理是容器层与内容层并级，容器层设置透明度，内容层通过负margin或者position绝对定位等方式覆盖到容器层上.outer { width:200px; height:200px; background:rgba(0,0,0,0.2); filter:alpha(opacity=20)\9; /* IE */}.outer .inner { position:relative\9; /* IE */}<div class="outer"> <div class="inner">我是不透明的内容</div></div>// 高级浏览器直接使用rgba颜色值实现；IE浏览器在定义容器透明的同时，让子节点相对定位，也可达到效果body { text-align:center;}#test2 { width:960px; margin:0 auto; text-align:left;}// 定义body的text-align值为center将使得IE5.5也能实现居中// 清除浮动，方法请参考本页第9条// 通常出现这样的情况都是由于没有清除浮动而引起的，所以Debug时应第一时间想到是否有未清除浮动的地方
#test { border-collapse:collapse; border:1px solid #ddd;}#test th, #test td { border:1px solid #ddd;}<table id="test"> <tr> <th>姓名</th> <td>Joy Du</td> </tr> <tr> <th>年龄</th> <td>26</td> </tr></table>#test { border-spacing:1px; background:#ddd;}#test tr { background:#fff;}<table id="test" cellspacing="1"> <tr> <th>姓名</th> <td>Joy Du</td> </tr> <tr> <th>年龄</th> <td>26</td> </tr></table>// IE7及更早浏览器不支持border-spacing属性，但是可以通过table的标签属性cellspacing来替代。body { line-height:n;}// 注意，不要给n加单位相关资料请参阅CSS3属性box-sizing
// 标准模式下：Element width = width + padding + border// 怪异模式下：Element width = width
.test1 { width:200px; height:50px; text-indent:-9999px; background:#eee url(*.png) no-repeat;}<div class="test">以图换字之内容负缩进法</div>// 该方法优点在于结构简洁，不理想的地方：1.由于使用场景不同，负缩进的值可能会不一样，不易抽象成公用样式；2.当该元素为链接时，在非IE下虚线框将变得不完整；3.如果该元素被定义为内联级或者内联块级，不同浏览器下会有较多的差异.test { width:200px; height:50px; background:#eee url(*.png) no-repeat;}.test span { visibility:hidden; /* 或者display:none */}<div class="test"> <span>以图换字之内容隐藏法</span></div>// 该方法优点在于兼容性强并且容易抽象成公用样式，缺点在于结构较复杂.test { overflow:hidden; width:200px; height:0; padding-top:50px; background:#eee url(*.png) no-repeat;}.test { overflow:hidden; width:200px; height:50px; line-height:50; background:#eee url(*.jpg) no-repeat;}<div class="test">以图换字之内容排挤法</div>//该方法优点在于结构简洁，缺点在于：1.由于使用场景不同，padding或line-height的值可能会不一样，不易抽象成公用样式；2.要兼容IE5.5及更早浏览器还得hack.test { overflow:hidden; width:200px; height:50px; font-size:0; line-height:0; color:rgba(0,0,0,0); background:#eee url(*.png) no-repeat;}<div class="test">以图换字之超小字体+文本全透明法</div>// 该方法结构简单易用，推荐使用.box1 { margin:10px 0;}.box2 { margin:20px 0;}<div class="box1">box1</div><div class="box2">box2</div>// 本例中box1的底部margin为10px，box2的顶部margin为20px，但表现在页面上2者之间的间隔为20px，而不是预想中的10+20px=30px，结果是选择2者之间最大的那个margin，我们把这种机制称之为“外边距合并”；外边距合并不仅仅出现在相邻的元素间，父子间同样会出现// 简单列举几点注意事项: // a. 外边距合并只出现在块级元素上； // b. 浮动元素不会和相邻的元素产生外边距合并； // c. 绝对定位元素不会和相邻的元素产生外边距合并； // d. 内联块级元素间不会产生外边距合并； // e. 根元素间不会产生外边距合并（如html与body间）； // f. 设置了属性overflow且值不为visible的块级元素不会与它的子元素发生外边距合并；input, textarea { ime-mode:disabled;}// ime-mode为非标准属性，写该文档时只有IE和Firefox支持不使用list-style-image来定义列表项目标记符号，而用background-image来代替，并通过background-position来进行定位
http://www.css88.com/book/css/experience/skill.htm
BigDecimal method to compare sizes
How to turn off the firewall
html online editor
Bitcoin buying and selling process on Huobi.com
The server cannot be found on the computer solution
How Oracle creates a database
Introduction to the usage of sort() function in python
Which key should I press to recover when I can't type on my computer keyboard?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
