前往顾页
以后地位: 主页 > 收集编程 > Asp实例教程 >

CSS技能汇总

时候:2018-12-28 13:26来源:知行网www.zhixing123.cn 编辑:麦田守望者

一向在学习着关于网页标准化的一些知识和观点,实际的固然不是很多,在平常的事情中也总结出了很多需求重视的技能和细节。明天抽暇把 CSS 经常常利用到的一些技能汇总一下与年夜家一路分享,希望可以起到举一反三的感化。本篇文章会随时保持更新,如果年夜家有甚么好的CSS技能欢迎留言给我。
 

1.css布局的居中问题

首要的款式定义以下:

body {TEXT-ALIGN: center;}
#center { MARGIN: 0 auto; }

申明:起首在父级元素定义TEXT-ALIGN: center;这个的意义就是在父级元素内的内容居中;对IE如许设定就已可以了。但在mozilla中不克不及居中。处理体例就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ” 需求申明的是,如果你想用这个别例使全部页面要居中,小我建议不要套在一个DIV里,可以顺次拆出多个div,只需在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 便可以了。

2.兼容多种浏览器

现在我年夜部分都是用!important来hack,对ie6和firefox测试可以一般显现,但是ie7对!important可以精确解释,会导致页面没按请求显现!搜刮了一下,找到一个针对IE7不错的hack体例就是利用“*+html”,现在用IE7浏览一下,应当没有问题了。

现在写一个CSS可以如许:

#example { color: #333; }
* html #example { color: #666; }
*+html #example { color: #999; }

那么显现结果在firefox下字体色彩显现为#333,IE6下字体色彩显现为#666,IE7下字体色彩显现为#999,他们都互不滋扰。

3. 盒模型不合解释

#main {width: 768px !important;width : 770px;}

IE不支撑声明(!important),

FIREFOX等浏览器辨认作声明(!important),接管WIDTH:768PX;

IE5.X不熟谙声明(!important),则接管第二次定义的WIDTH:770PX ;

IE6起首接管第一次定义的WIDTH:768PX,而接上去无法解释这个空的注释语句,是以忽视其后的定义,终究接管WIDTH:768PX。

4. CSS鸿沟紧缩问题

块级元素,未浮动的垂直相邻元素上下鸿沟会被紧缩,取此中较年夜的值。

浮动元素的垂直鸿沟不紧缩,且浮动元素不声明宽度,则其宽度趋势于0。

5. 断根浮动

体例一:

.hackbox{display:table;//将工具作为块元素级的表格显现}

体例2:

.hackbox{clear:both;}

体例三:

.f_clear:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.f_clear {display: inline-table;}
* html .f_clear {
height: 1%;
}
.f_clear {
display: block;
}

ps:最后一种是CSS2.0中的伪元素:after,和content属性一路利用,设置在元素后产生的内容,在此用作断根浮动。

6. 浮动在IE中产生的双倍间隔

#box{ float:left; width:100px; margin:0 0 0 100px; }

在下面这类环境之下IE5.x和IE6会产生200px的间隔。

处理体例:用display:inline; 可使浮动忽视。

这里细说一下block和inline两个元素,Block元素的特性是:老是在新行上开端,高度,宽度,行高,边距都可以节制(块元素);Inline元素的特性是:和其他元素在同一行上, 高度,宽度,行高,边距不成节制(内嵌元素);

#box{ display:block; //可以为内嵌元素摹拟为块元素 display:inline; //实现同一行摆列的的结果。

7. 高度不适应

高度不适应是当内层工具的高度产生转变时外层高度不克不及主动进行调度,特别是当内层工具利用margin 或padding时。例:

HTML代码:

p工具中的内容

CSS代码:

#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

处理体例:在P工具上下各加2个空的div工具CSS代码:

#box {height:0px;overflow:hidden;}

或为DIV加上border属性。

8.浮动时鸿沟的双倍问题

IE中在CSS中将元素的FLOAT和TEXT-ALIGN的标的目标设为分歧,则在IE中鸿沟会被显现为声明值的2倍,处理体例:在声明里加上display:inline;

CSS代码:

#box {text-align: left; float: left; margin-left: 100px;}

HTML代码:

p工具中的内容

9. 常常利用文档字体集定义

我通常为如许定义的:

body {font:12px/18px Arial, "宋体",Tahoma, Geneva,Verdana, sans-serif;}

请重视定义中笔墨体要加上引号。

英文操纵体系常常利用字体:Verdana, Arial, Helvetica, sans-serif

10.图片不换行

可定义以下:

.img{white-space: nowrap;}

空格:不换行,可以保持图片不换行。

11.使表格边框堆叠

table{caption-side:bottom;border-collapse:collapse;}

12.不合浏览器的盒模型宽度解释问题

IE和Mozilla浏览器对盒模型的解释不分歧,造成我们定位上的坚苦,首要不同是:

IE计较2个div之间的间隔时候,会把1px的border计较在内,而mozilla没有;

设定div的宽度后,如果给padding加一个值,IE会在宽度内减去这个值,而Mozilla会在宽度根本上加上这个值。

13. 表单实现较好的亲和力

fieldset标签会在包含的文本和input等表单位素内里构成一个方框,legend元素作为题目。

label标签用于表单位素(input,textarea or select)配于for将值通报给呼应的表单位素。

tabindex属性用于input,textarea等标签,给其一个编号,利用键盘上的TAB键就很容易地进入文本框中。

14.释义列表的利用

释义列表的开端标签是<dl>,每个被解释的内容开端标签为<dt>,每个解释的内容开端标签是<dd>。在<dd>标签中的内容可所以段落,回车符,图象,连接或是其他的列表等。

15.透明FLASH的拔出


16.span标签的用法

SPAN标签没有特别的意义,可以用作排版的帮助,比方:

  • (4.23)园子的博客在上海安新家啦!

然后在css中定义span为右浮动,就实现了日期和题目分两侧显现的结果。

17.处理在XHTML 1.1中language属性不法的体例

可将language改成type或在<head>区内插手以下代码:


18.适合标准的外部链接写法

javascript代码:



HTML代码:

园子的博客

19.一般小型企业网站款式表布局

base.css(根基共用款式)module.css(模块款式)forms.css (表单款式)mend.css(补丁款式)print.css(打印款式)

20. 首字下沉款式代码

#article:first-letter {font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; line-height:1.2em;float:left;padding:5px 2px 0 0; color:#c00;}21. 一些罕用的文本标签

 

表示已删除的文档或段落:

这是已删除的文档

删除的部分作出一些增加与点窜。那么时候这个标签就非常有感化了那就是拔出标签<ins></ins>。例:

这是拔出的点窜部分

千万别健忘了给这两个标签加上两个首要的属性:cite与datetime。解释与时候。解释不消说了,只需用笔墨说明为甚么要删除或是为甚么要拔出便可以了。但是这个时候需求明白一下格局。严格的格局是:YYYY-MM-DDThh:mm:ssTZD。与我们平常平凡用的差不多但是有辨别,此中T是表示时候段开端的必须字符,而TZD则是表示时区,Z是表是格林威治本定时候。一般的写法是:2008-03-25T14:26:22Z。

上下标的写法,例:

我是上标,你是下标

22. 改变有序列表的开端值

偶然候我们不想让有序列表值从1开端,这个时候就会用到:

 

23. display:inline-block的用法

语义:将工具呈递为内联工具,但是工具的内容作为块工具呈递。中间的内联工具会被呈递在同一行内,许可空格。支撑的浏览器有:Firefox3 beta、IE8 beta、Opera、Safari。

24. min-width最小宽度的设置

min-width概述:min-width是设置工具最小宽度的款式(Style)。IE其实不支撑此属性。例:

 

25.图文混排的垂直居中

很多人在图片与文本混排的时候想让图片相对文本垂直居中除用IE的公有特性 valign="absmiddle"别无他法。记着,默许下图片就是属于inline-block,你只需简朴的

img {vertical-align:middle;}

便可。

26.摆布列高度自适应代码

#main_l,#main_r{margin-bottom:-32767px;padding-bottom:32767px;}

下面代码是利用负鸿沟法来处理摆布列高度自适应的体例。感谢sypxue的提示,已修改。

27. 万能断根浮动

万能 float 闭合(非常合用!) 可以用这个处理多个div对齐时的间距不对,将以下代码插手CSS 中,给需求闭合的div加上 class=”clearfix” 便可。代码以下:

/* Clear Fix */
.clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden;}
.clearfix {
display:inline-block;
}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */

28.款式居中的写法

垂直居中:将 line-height 设置为 以后 div 不异的高度, 再经由过程 vertical-align: middle.( 重视内容不要换行.)

程度居中: margin: 0 auto;(当然不是万能)

29.一些小总结

  • 若需给 a 标签内内容加上 款式, 需求设置 display: block;(常见于导航标签)。
  • ul 标签在 FF 下面默许有 list-style 和 padding . 最功德先声明, 以避免不需求的费事. (常见于导航标签和内容列表)。
  • 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以到达高度自适应。
  • 关于手形光标. cursor: pointer. 而hand 只合用于 IE。

30. 兼容代码:hack保举款式

/* FF */
.submitbutton { float:left; width: 40px; height: 57px; margin-top: 24px; margin-right: 12px;}

/* IE6 */
*html .submitbutton {
margin-top: 21px;
}

/* IE7 */
*+html .submitbutton {
margin-top: 21px;
}
------分开线----------------------------
标签(Tag):css技能
------分开线----------------------------
保举内容
猜你感兴趣