CSS常用技巧

最新推荐文章于 2024-09-16 23:33:40 发布

fjctlzy

最新推荐文章于 2024-09-16 23:33:40 发布

阅读量419

点赞数

分类专栏： CSS 文章标签： css class 浏览器 border ie div

本文链接：https://blog.csdn.net/fjctlzy/article/details/3421557

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

rel="File-List" href="file:///C:%5CUsers%5Cspace%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_filelist.xml"> rel="Edit-Time-Data" href="file:///C:%5CUsers%5Cspace%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_editdata.mso"> rel="themeData" href="file:///C:%5CUsers%5Cspace%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_themedata.thmx"> rel="colorSchemeMapping" href="file:///C:%5CUsers%5Cspace%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_colorschememapping.xml">

CSS使用技巧

1. *{margin:0; padding:0}

可以避开CSS的盒模型考虑问题，指定margin和padding的值的时候在分别另外指定，后面的只将覆盖前面的值。

2. Img{border:0; display:block;}

可以避免带链接的图片边缘出现蓝色边框，将图片以块级元素显示。

/*3．#nowrap{table-layout:fixed}

有时候我们要在首页动态打印一列十条文章，要放在一个css容器div里面，若每行文字太多，元素很容易破坏容器而使整个布局变坏。*/

4．Div{white-space:nowrap;}有时候中文文字很长，不管IE还是FF，到达边界都会自动换行。但是如果我们不希望着这样的话，例如：当几个li并排排列的时候，不想让没行的最后一个li文字自动换行，那就可以使用本属性。在遇到本属性的时候，文本只有在遇到空格和换行符的时候才能换行。

5. block和inline元素对比

所有的html元素都属于block和inline之一。

Block的特点：

总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

Inline的特点：

和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

用display: inline 或display: block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢？
让一个inline元素从新行开始；
让块元素和其他元素保持在一行上；
控制inline元素的宽度（对导航条特别有用）；
控制inline元素的高度；
无须设定宽度即可为一个块元素设定与文字同宽的背景色。

6. 关于float的使用

Float的概念很简单，但是实际使用的时候，浮动溢出的问题却很棘手。所谓“浮动溢出”是指：当容器内有浮动元素的时候，由于浮动元素已经脱离了流，所以容器的高度不能自动伸长以适应浮动元素的高度，使得内容溢出到容器外面。

如果是下面这段代码

<div style="border:1px solid #000000;">
<div style="float: left;">hello, world.</div>
</div>

显示的结果是：

方法一：W3推荐的解决方法是在浮动元素的下面使用clear，代码如下：

<div style="border:1px solid #000000;">
<div style="float: left;">hello, world.</div>
<div style="clear: both;"></div>
</div>

虽然这是W3推荐的标准方法，但是在网页里平白无故加入一个空的Div，无论如何都是坏味道。

方法二：有人提出了利用overflow清除浮动的方法，代码如下：

<div style="border:1px solid #000000; overflow: auto; zoom: 1;">
<div style="float: left;">hello, world.</div>
</div>

或者：

<div style="border:1px solid #000000; overflow: hidden; zoom: 1;">
<div style="float: left;">hello, world.</div>
</div>

其中的zoom是为了兼容IE。

可惜overflow有时候会引起一些意料之外的麻烦（相关链接），所以还是少用为妙。

7. 关于background的写法

DIV.comment{background:#f0f0f0 url(url address) repeat-x left top}

1）您可以看到background的第一个定义是一个颜色值这表示在背景图片失效的时候颜色将起作用。

2）url括号中的引号是没有必要的，我们可以不写引号

8. 同时使用两个Class定义
一般我们只会给内容块指定一个Class，但这并不代表我们只能指定一个。实际上只要你愿意，可以同时把任意多个Class赋给某块内容。比如：

多个Class之间用空格分隔即可。当多个Class之间的属性发生重叠的时候，将根据各个 Class在CSS定义文件中被定义的位置，后定义的Class属性自动覆盖之前定义的Class属性（而不是根据你在class="text side"这里排列的顺序来进行覆盖）

9. CSS中的内容垂直对齐/用CSS实现表格
用传统的table来实现垂直对齐很容易，只要用 vertical-align: middle 就可以让table的内容垂直居中。但这个属性在CSS里面却行不通。
解决方法是把内容的行高设置成与内容块一样高。比如你的div高是32px，那就在你的CSS定义里面添加属性 line-height: 32px; 这样文字看上去就垂直居中于层里面了。不过这个方法只适用于单行文字，对于多行文字，似乎没有什么好方法。

10. 让背景色能够垂直拉齐到底部
CSS与传统的table来说另一个让人不爽的地方是它的垂直层的对齐。如果你的页面分为两列，其中一列比较长而另一列比较短，同时两列的背景色和页面总的背景色是不同的话，显示出来的效果就比较丑陋，不像table 那样只要把td的高度设成100%就能够把每一列的高度拉到一样长。
要解决这个问题似乎只能用一个取巧的办法，根据每列的宽度和背景色设置背景图片，让用户看上去似乎拉平了：

body
{
background: url(blue-image.gif) 0 0 repeat-y
}

11.设置页面的最小宽度（适用于IE5.x和IE6）
CSS语法中很有用的一个属性是 min-width 。通过这个属性你可以设置任何元素的最小宽度。也就是说你也可以用这个来限制页面显示的最小宽度。
但有个小问题是：IE浏览器无法为<body>元素设置min-width，因此要让这个属性起作用，我们需要走点弯路。
首先在<body>后面插入一个<div>：

然后在CSS定义里面定义最小宽度为600px：

#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}

第一个属性是最小宽度定义的标准写法；第二个属性则是只有IE能够理解的javascript表达式。
你也可以同时设定页面的最大最小宽度：

#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}

12. IE中消失的文字和图片
IE有个很莫名其妙的Bug：有时候文字或者背景图片死活显示不出来。如果你全选整个页面，会发现那些内容实际上还在那里，或者重新刷新一下页面显示就正常了。
通常来说这个问题都发生在那些跟在浮动元素后面显示的文字或背景图片身上。要解决这个问题，可以试试给你的那些消失的元素加上position: relative 属性。如果还不行，再试试设置一下width属性。一般来说这样做之后问题就解决了

13. 关闭输入法状态

使用户只能输入英文状态下的字符，类似输入密码

input {ime-mode: disabled ; }

14. 之所以有这么多box黑客方法，是因为IE在6之前对box的理解跟别人都不一样，它的宽度要包含边线宽和空白。要想让IE5等同其他浏览器保持一致，可以用CSS的方法：
padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;
第一个宽度所有浏览器都认得，但IE5.x不认得第2行的宽度设置，只因为那一行上有空白的注释符号（多么蠢的语法分析！），所以IE5.x就用20减掉一些空白，而其他浏览器会用14这个宽度，因为它是第2行，会覆盖掉第1行。

15. IE与宽度和高度的问题
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
.box
{
width: 80px;
height: 35px;
}
html>body .box
{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}
所有的浏览器都可以使用第一个box设置，但IE不认得第2段设置，因为其中用到了子选择器命令。第2个设置更特殊些，所以它会覆盖掉第1个设置。

16. 不论因为何种原因希望某些网页文字不在浏览器中显示，比如为了打印或为了小屏幕而让某些文字不显示，都可以用 display: none 。这非常简单，但有时对某些人这有点没用，他们能去掉这个控制，这时就要用到： position: absolute; left: -9000px 。
这实际上是把文字指定在页面以外显示。

17. 在不同页面上使用同样的导航代码
许多网页上都有导航菜单，当进入某页时，菜单上相应这一项就应该变灰，而其他页亮起来。一般要实现这个效果，需要写程序或专门为每一页做设计，现在靠CSS就可以实现这个效果。
首先，在导航代码中使用CSS类：
<ul>
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About us</a></li>
<li><a href="#" class="contact">Contact us</a></li>
</ul>
然后分别为每一页的Body指定一个id，和上面类同名。如<body id="contact">。
然后设计CSS如下：
#home .home, #about .about, #contact .contact
{
commands for highlighted navigation go here
}
这里，当id设为home时，.home就会起作用，也就是class设为home的那一行导航条就会显示出特殊效果来。其他页也是如此。

18. 使用!important改变样式的优先级

所谓的样式优先级是指，浏览器在应用样式时总是根据就近原则来应用样式，假定我们在一个页面中有三处都有对某个元素的定义，一处是在外部的css文件中，一处是在文件的head标签中定义内联css，另一处是在这个元素的标签内，那么根据就近原则此元素最终使用的样式是在标签内定义的样式，如果我们需要打破这种规则我们就可以使用!important指令

a.test{color:red!important}

19.常用文本处理，例如缩进，首字下沉，竖排文字等等，可以参考此链接

20. 用正确的顺序指定链接的样式
当你用CSS来定义链接的多个状态样式时，要注意它们书写的顺序，正确的顺序是：:link :visited :hover :active。抽取第一个字母是”
LVHA”，你可以记忆成”LoVe HAte”(喜欢讨厌)。为什么这么定义，可以参考Eric Meyer的《Link Specificity》。
如果你的用户需要用键盘来控制，需要知道当前链接的焦点，你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置，如果你希
望聚焦元素显示:hover效果，你就把:focus写在:hover前面；如果你希望聚焦效果替代:hover效果，你就把:focus放在:hover后面。

21. 针对IE的优化
有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在发布的IE7
beta版里是否更好的支持CSS，这两种方法都是最安全的。
1.注释的方法
(a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):
body p {
/* 定义内容 */
}
(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)
* html p {
/* declarations */
}
(c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用”反斜线”技巧：
/* /*/
* html p {
declarations
}
/* */

22.圆角的做法

好处是便于维护,只有一个图片.还可以某种程度上的任意缩放.缺点是多了无意义的html代码.
—————-css—————–
.c,.c i,.c i i,.c b,.c b b,.c p{
background-image:url(http://pics.taobao.com/bao/album/promotion/uiblog/purple.png);/*背景图片*/
background-repeat:no-repeat;
}
.c{
width:200px;/*临时定的宽度*/
background-position:0 -4px;
}
.c i{
display:block;
height:4px;
}
.c i i{
margin:0 0 0 4px;
background-position:right 0;
}
.c b{
display:block;
height:4px;
background-position:0 bottom;
}
.c b b{
margin:0 0 0 4px;
background-position:right bottom;
}
.c p{
margin:0 0 0 4px;
padding:0 4px 0 0;
background-position:right -4px;
}

—————html—————–

< div class="c">
< i>< i>< /i>< /i>
< p>
按钮按钮按钮按钮按钮按钮
按按按按按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮
< /p>
< b>< b>< /b>< /b>
< /div>

23. caption这个标签在firefox下会有左边有1px空隙的bug,很讨厌.能想到的简单的方法只有-1px的margin了.

—————-css—————–
table{
border-collapse:collapse;
}
table caption,table td,table th{
border:1px solid #a2bbdd;/*边框颜色*/
background:#c3d9ff;/*背景颜色*/
}
table caption{
text-align:left;
border-bottom:none;
margin-left:-1px;
}

—————html—————–

<table>

<tr>

</tr>

<tr>

</tr>

</table>

24. acronym这个标签用来解释名词很爽,但是用得太少.

—————-css—————–
acronym{cursor:help}
—————html—————–
<acronym title="段正淳又是金庸笔下一个十分奇特的人物。他奇特在到处留情，情人极多，见一个爱一个，而又绝不是徒然风流薄幸，当他是单独对着一个情人的时候，他真是真心真意爱这个情人的，只好说这个人的感情特别丰富，别无其他解释。" >文字</acronym>

25.input在各个浏览器里面的统一

可以参考http://ued.taobao.com/blog/wp-content/uploads/2008/01/input.html