`
yuanjianhang
  • 浏览: 109109 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

8个小方法,css使用中的八个诀窍

阅读更多

1. 使用line-height(行高)垂直居中

line-height:24px;

对于拥有确定高度的元素,使用line-height可以将其内部元素垂直居中。PS. 原来的做法 valign 是一个不正确的做法。

2. 防止确定宽度的浮动元素布局被其内部超宽的元素破坏

#main{
overflow:hidden;
}

对于拥有确定宽度的浮动(float)元素,如果内部有一个超宽元素(比如一个很宽的图片),那你精心设计的布局可能就无法正常显示,最简单有效的防止手段就是 overflow:hidden;
虽然会隐藏掉一部分元素,但最大限度保证了整体布局的正确。

3. 防止链接换行

a{
white-space:nowrap;
}

很多时候,链接会非常长,如果换行变成2行乃至多行,可能对用户造成误导,建议使用这个方法防止该情况。(我本人到觉得要根据具体情况分析)

 

4. 始终显示Firefox的垂直滚动条

html{
overflow:-moz-scrollbars-vertical;
}

Firefox默认是不显示垂直滚动条的,为了避免滚动条在有和无之间切换,建议使用该方法强制显示。(还真没意识到这个问题:-))

5. 块级(block)元素水平居中

margin:0 auto;

这个基本是处理水平居中的最简单方法了。(CSS mastery 中提供了另外几种方法,不过这个是我最喜欢的)

6. 去除IE中textarea的垂直滚动条

textarea{
overflow:auto;
}

如果你和我一样讨厌这个,去掉它。

7. 打印网页时强制换页

h2{
page-break-before:always;
}

这个可以强制打印网页是换页。 (/qiang)

8. 去除链接的虚线框

a:active, a:focus{
outline:none;
}

分享到:
评论

相关推荐

    CSS 特效,小窍门

    CSS 滤镜 字体 等诸多 小窍门 ,很实用的

    divcss布局:CSS布局方法介绍

    CSS布局常用思路方法 CSS常用布局例子 CSS布局高级窍门技巧

    CSS Mastery Advanced Web Standards Solutions

    <br/>甚至在CSS方面非常有技巧的一些朋友对CSS的理解还很模糊,这是因为大部分CSS开发者都是自学,从别人文章看到的诀窍或其他人设计制作的源码等等。令人惊奇的是,因为CSS规范复杂充满矛盾因素,为浏览器服务...

    Head First HTML with CSS & XHTML 源代码

    如果你曾经读过深入浅出(Head First)系列图书中的任一本,就会知道书中展现的是什么:一个按人脑思维方式设计的丰富的可视化学习模式。本书的编写采用了许多最新的研究,包括神经生物学、认知科学以及学习理论,这...

    CSS商业网站布局之道

    本书是一本CSS技术专著,主要从布局这个角度全面、系统和深入地讲解CSS在标准网站布局之中的应用。很多读者经过初步的学习之后就能够使用CSS设计出一些漂亮的网页样式,于是便乐在其中,踌躇满志,这是好事,但千万...

    用CSS播放声音的几种技巧方法

    我不建议在生产中使用它,因为音频可能还会被 <audio> 元素或 JavaScript 进行控制。 窍门 用 CSS 播放声音有好几种方法,但是其基本思想是相同的:将音频文件作为网页中的隐藏对象或文档插入,并在有操作发生...

    CSS3秘笈第3版.part2

    CSS3指引你创建看起来相当专业的Web站点,即使对于有经验的Web设计师,学习CSS3的各种细节也能够使设计更加灵活。本书向你展示如何将你的HTML和CSS技巧提升到新的台阶,并学习到有价值的技巧、窍门,以及一步步的...

    CSS3秘笈第3版.part1

    CSS3指引你创建看起来相当专业的Web站点,即使对于有经验的Web设计师,学习CSS3的各种细节也能够使设计更加灵活。本书向你展示如何将你的HTML和CSS技巧提升到新的台阶,并学习到有价值的技巧、窍门,以及一步步的...

    Experimenting-CSS:有关CSS的技巧和窍门

    实验CSS 有关CSS的技巧和窍门

    WebKit中可用的CSS高级特性

    使用在WebKit中可用的CSS高级特性,可以为你的网站或网络应用带来一个新的更令人兴奋的东西。 在阅读下面文章前,你可以先了解下软件开发网以前介绍的WebKit文章:浏览器Apple Safari和Google Chrome内核webkit ...

    CSS提示和技巧

    现代CSS技巧和窍门

    CSS-Tricks-React-Series:CSS-Tricks.com上的文章的一系列指南

    ** 警告 *** 如果您正在看我在CSS-... 此仓库中的文档将向您展示该系列中未显示的许多内容,例如安装和运行代码的步骤Webpack和Babel设置的说明额外的技巧和窍门新的ES6语法指南文件每个版本在此仓库中都有其自己的指南

    最流行的web开发前端模版HTML5 Boilerplate.zip

    这个小小的源码包集合了100位开发者的经验,你可以将这些经验运用在你的项目中。 Google统计、图标 和 更多 压缩包内包含了 一个干净、移动终端友好的HTML模版;优化过的Google统计代码;触摸屏设备上使用的图标...

    Sublime Text3_64.rar

    Sublime Text3 中文个人授权版Sublime Text 3 应用技巧和诀窍 1.选择 以下是一些Sublime Text选择文本的快捷键: Command + D 选中一个单词 Command + L 选中一行 Command + A 全选 Ctrl + Command + M`...

    CodeStackMeetUpRNGPart2-CSS

    我们将为您提供上次会议的完成版本,以便您可以从我们这里重新开始 :thumbs_up: 这是Alex和Kenneth的最后一个项目的一个小偷 :down_arrow: 对于这次聚会,我们将向大家展示如何为该项目添加更多样式。 ►我们将...

    grunt-examples:使用最佳实践使用Grunt的各种方法的示例

    咕unt的例子使用最佳实践使用的各种方法的示例例子 完整注释的Gruntfile直观地记录了如何开始。 将Sass编译为CSS的Grunt任务的基本示例。 Grunt任务的中间示例,该任务监视Sass文件并将其编译为CSS。 在尝试任何示例...

    网页设计典型应用技巧html源码

    指导你熟练运用电脑技巧,帮助你真正掌握电脑技能学习电脑应用的技巧与方法是至关重要的一步。主要内容:表格动态与互特效;CSS滤镜高级应用;弹出窗口完全控制;定制个性图形表单;网页配色技巧与实用方案;网页...

    前端技巧:前端开发的超小巧,快速的技巧,窍门和最佳实践

    前端提示前端开发的一系列超细微,快速... 要提交您喜欢的提示,请创建一个markdown文件,并将其放在文件夹中。 markdown文件的内容必须看起来像---title: ___category: ___date: ___tags: - postslayout: layouts/post

Global site tag (gtag.js) - Google Analytics