css技能:經典CSS应用技能几则

2021-03-16 09:48 jianzhan

MacJi “偷懒”汉语翻译了一部分,中午冒着被 BOSS 开除的风险将其补完(原文连接)。
应用 line-height 竖直垂直居中
line-height:24px;
应用固定不动宽度的器皿而且必须1行竖直垂直居中时,应用 line-height 便可(高宽比与父层器皿1致),更多的竖直垂直居中总结能够看这里。
消除器皿波动
#main {
overflow:hidden;
}

期前也提到过这样的难题,更多信息内容能够看这里。
不让连接折行
a {
white-space:nowrap;
}

上面的设置就可以防止连接折行,但是本人提议长连接会有相应的这行(相关换行层面的探讨,参看圆心的纪录)。
自始至终让 Firefox 显示信息翻转条
html {
overflow:-moz-scrollbars-vertical;
}

更多的 Mozilla/Firefox 独享 CSS 特性能够参照这里。需跨访问器的适用,还可以应用
body, html {
min-height:101%;
}

使块元素水平垂直居中
margin:0 auto;
实际上便是
margin-left: auto;
margin-right: auto;

这个技能基础上全部的 CSS 教科书都会有表明,别忘掉给它再加个宽度。Exploer 下还可以应用
body{
text-align: center;
}

随后界定里层器皿
text-align: left;
修复。
掩藏 Exploer textarea 的翻转条
textarea {
overflow:auto;
}

Exploer 默认设置状况下 textarea 会有竖直翻转条(不必问我为何)。
设定复印分页查询
h2 {
page-break-before:always;
}

page-break-before 特性能设定复印网页页面时的分页查询。
删掉连接上的虚线框
a:active, a:focus {
outline:none;
}

Firefox 默认设置会在连接得到聚焦点(或点一下时)再加条虚线框,应用上面的特性能够删掉。
最简易的 CSS 重设
* {
margin: 0; padding: 0
}

假如想“繁杂”,参照YUI 的做法(也有这里)。原文留言中也是有客户说了她们的见解
I have to agree with Niall Doherty, * {margin: 0px; padding: 0px;}
basically means "traverse every css element and give it these
attributes". That is a very unnecessary strain on the server and
a bad semantic practice, as you have to give some elements
padding/margin again, after stripping them.