`
yuanjianhang
  • 浏览: 110219 次
  • 性别: 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;
}

分享到:
评论

相关推荐

    html5+css3中英文文档

    CSS3是CSS的第三个主要版本,带来了许多强大的样式和布局功能。例如,选择器的扩展允许更精确地定位元素,如nth-child()、nth-of-type()等。媒体查询(Media Queries)则实现了响应式设计,使得网页能适应不同设备的...

    众妙之门—精通CSS3(PDF版)

    - **范例1:CSS3过渡(transitions)效果**:通过具体实例展示了如何使用CSS3中的`transition`属性实现平滑的过渡效果,增强了用户体验。 - **范例2:背景剪裁(background-clip)**:讲解了`background-clip`属性的...

    [CSS精粹].pdf

    《CSS精粹》这本书是CSS学习者的...《CSS精粹》通过101个必备技巧、窍门和黑客方法,旨在让读者深入理解CSS,提升网页设计和开发的专业技能。无论你是初学者还是经验丰富的开发者,这本书都将提供有价值的指导和灵感。

    CSS相关综合专栏。 计划包含四个方面: ①CSS基础②进阶专题③面试题汇总④一些有意思的奇技淫巧。.zip

    此外,可能还包括如何利用CSS Hack来解决特定浏览器的兼容性问题,或者是一些提高开发效率的小技巧,如使用CSS变量、 calc() 函数进行动态计算等。 文件“569”可能是压缩包内的一个文档,详细讲解了以上提到的一个...

    div+css布局

    **div+css布局**是网页设计中不可或缺的一部分,它是一种将HTML元素以视觉层次结构进行组织的方法,通过CSS(Cascading Style Sheets)来控制页面的样式和布局。本教程旨在帮助你深入理解和熟练运用div+css技术,...

    PHP深度分析:101个核心技巧、窍门和问题解决方法(原书第2版).pdf+PHP 内核文档.chm

    《PHP深度分析:101个核心技巧、窍门和问题解决方法》是PHP开发者的一本宝贵资源,这本书深入探讨了PHP编程中的诸多关键概念和技术,旨在帮助读者提升技能,解决实际开发中遇到的问题。结合《PHP 内核文档》CHM格式...

    CSS Tips 合集.zip

    这个名为“CSS Tips 合集.zip”的开源项目,显然是一份集合了各种实用CSS技巧和窍门的资源,旨在帮助开发者提升其CSS技能,更好地进行网页设计与布局。 1. **CSS基础知识**:了解CSS的基本语法,如选择器(类选择器...

    The.CSS艺术

    在“开始使用CSS”这一章节中,作者首先介绍了CSS的基本概念和工作原理,包括选择器、属性和值等核心要素。随后,通过“文本样式和其他基础知识”部分,详细讲解了如何利用CSS来调整字体、颜色、间距等,从而实现对...

    Head First HTML with CSS & XHTML 源代码

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

    Html Utopia - Designing Without Tables Using CSS 完整版

    - **CSS杂项 (CSS Miscellany)**:收集了一些CSS相关的技巧和窍门。 - **CSS颜色参考 (CSS Color Reference)**:提供了一套全面的颜色代码和名称列表。 - **CSS属性参考 (CSS Property Reference)**:详尽列举了所有...

    Dreamever如何嵌入css样式?html嵌入css方法介绍

    下面我们将详细探讨如何在Dreamweaver中嵌入CSS样式,以及相关的html嵌入css的方法。 首先,创建一个网页项目。在Dreamweaver CS6中,你需要新建一个站点,这通常涉及到选择一个存储文件夹来保存你的所有文件。站点...

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

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

    CSS商业网站布局之道

    《CSS商业网站布局之道》这本书深入探讨了CSS在标准网站布局中的应用,旨在帮助读者从布局的角度理解CSS的精髓。CSS并非仅仅是样式设计,而是一种需要逻辑思维和系统设计的技术,尤其是在网页布局方面。书中详细介绍...

    CSS.The.Missing.Manual.4th.Edition.2015.8.pdf

    本书通过一系列实用的技巧、窍门和基于教程的指导,帮助读者学习最新的CSS工具和技术,如Flexbox和Sass,从而构建出既美观又高效的网页布局。 **重要的知识点包括:** 1. **从基础开始**: - 学习如何编写对CSS...

    CSS3.The.Missing.Manual.3rd.Edition

    《CSS3:The Missing Manual, Third Edition》这本书就是为了解决这个问题而存在的,它提供了宝贵的小技巧、窍门和步骤指导,帮助读者将HTML和CSS的技能提升到新的层次。读者将快速学会如何创建既美观又能在各种设备...

    css布局九决 学css不再难

    以下将详细解释这九个诀窍: 一、IE边框若显若无,须注意,定是高度设置已忘记 在Internet Explorer(IE)浏览器中,如果元素的边框显得不完整或有时出现,可能是因为没有明确设置高度。这是因为IE在某些情况下不会...

    非常漂亮的页面导航代码,纯CSS+JQUERY

    在这个案例中,CSS将用于定义导航栏的外观,如颜色、字体、布局和动画效果。例如,你可以用CSS创建渐变背景、悬停时的变化、下拉菜单的展开动画等。以下是一些可能的CSS技术: 1. `position`属性:用于定位导航元素...

Global site tag (gtag.js) - Google Analytics