几个常用经典的css技巧

使用 line-height 垂直居中

line-height:24px;
使用固定宽度的容器并且需要一行垂直居中时,使用 line-height 即可(高度与父层容器一致),更多的垂直居中总结可以看这里。

清除容器浮动

#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.

(0)

相关推荐

  • 几个常用经典的css技巧

    使用 line-height 垂直居中 line-height:24px; 使用固定宽度的容器并且需要一行垂直居中时,使用 line-height 即可(高度与父层容器一致),更多的垂直居中总结可以看这里. 清除容器浮动 #main { overflow:hidden; } 期前也提到过这样的问题,更多信息可以看这里. 不让链接折行 a { white-space:nowrap; } 上面的设定就能避免链接折行,不过个人建议长链接会有相应的这行(有关换行方面的讨论,参看圆心的记录). 始终让 F

  • 常用SQL语句优化技巧总结【经典】

    本文实例总结了常用SQL语句优化技巧.分享给大家供大家参考,具体如下: 除了建立索引之外,保持良好的SQL语句编写习惯将会降低SQL性能问题发生. ①通过变量的方式来设置参数 好: stringsql = "select * from people p where p.id = ? "; 坏: stringsql = "select * from people p where p.id = "+id; 数据库的SQL文解析和执行计划会保存在缓存中,但是SQL文只要有

  • CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)

    本文实例总结了CI框架常用经典操作类.分享给大家供大家参考,具体如下: 1. 超级对象中的URI CI_URI类的解析url的相关信息 直接使用$this->uri可以使用它的相关属性 system/core/URI.php文件中 部分常用属性: (1) 分段获取url相关信息 $this->uri->segment(4); //获取url中pathinfo //的第四段的值 入口文件.php/控制器/动作/参数1/参数2/... (2) 通过方法中的形参传参 需要设默认值和顺序要注意

  • Android开发常用经典代码段集锦

    本文实例总结了Android开发常用经典代码段.分享给大家供大家参考,具体如下: 1.图片旋转 Bitmap bitmapOrg = BitmapFactory.decodeResource(this.getContext().getResources(), R.drawable.moon); Matrix matrix = new Matrix(); matrix.postRotate(-90);//旋转的角度 Bitmap resizedBitmap = Bitmap.createBitma

  • php常用经典函数集锦【数组、字符串、栈、队列、排序等】

    本文实例总结了php常用经典函数.分享给大家供大家参考,具体如下: 数组函数 数组操作 range(start,end) 创建一个数组,值从start开始,一直到end结束 如果range里面的参数是数字,那么他直接按照数字大小的顺序排序,如果里面的参数是一个字符,那么他将按照ascii编码的顺序排序. array_merge() 作用:将几个数组,然后生成一个新的数组. 如果合并数组的下标是数字,那么他会无视下标,直接生成一个新的数组,然后下标从0开始重新排序 如果合并数组的下标是字符串,那么

  • 常用的DIV+CSS的基本框架结构但不推荐都放一个div里

    常用的DIV+CSS的基本框架结构但不推荐都放一个div里css样式代码:  程序代码 复制代码 代码如下: /*---全局样式---*/  * { margin:0px; padding:0px;}  body {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;background:#fff;} /*---主体样式---*/  #container {}  .clearfloat {clear:both;he

  • javascript简写常用的12个技巧(可以大大减少你的js代码量)

    前言 本文主要给大家分享了javascript简写常用的12个技巧,无论你是初学者还是资深人士,都值得一读!下面话不多说了,来一起看看详细的介绍: 1. 空(null, undefined)验证 当我们创建了一个新的变量,我们通常会去验证该变量的值是否为空(null)或者未定义(undefined).这对于JavaScript编程来说,是一个经常要考虑到的验证. 如果直接写,像下面这样: if (variable1 !== null || variable1 !== undefined || v

  • 36个Android开发常用经典代码大全

    本文汇集36个Android开发常用经典代码片段,包括拨打电话.发送短信.唤醒屏幕并解锁.是否有网络连接.动态显示或者是隐藏软键盘等,希望对您有所帮助. //36个Android开发常用代码片段 //拨打电话 public static void call(Context context, String phoneNumber) { context.startActivity( new Intent(Intent.ACTION_CALL, Uri.parse( "tel:" + pho

  • 不错的整理的24则css技巧

    虽然在许多的文档中,多次提及过这方面的内容,但依然有很多朋友在这些问题上犯错.我们今天看看这些CSS技巧,认真读一读,或许您并不能完全理解,您可以进行搜索,扩展您所想要得到的知识,相信您会有很多收获! 一.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值.  二.同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次.对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效,是因为id的权重要比class大

  • MyBatis常用标签以及使用技巧总结

    前言 MyBatis常用标签及标签使用技巧 MyBatis的常用标签有很多,比如 <sql id="">:预定义可以复用的sql语句 <include refid="">:根据id引用定义的sql语句 <trim>:空白补全,配合<if>标签使用 <if test="">:条件判断,该语句返回的true,则该标签内的语句就生效 <bind name="" val

随机推荐