您需要知道的CSS+DIV技巧

正如多数人的认知一样,HTML和CSS并不难学难用,从学习曲线上来说确实如此,难度甚至不如使用VIM。但是写不写得好又是另一回事,好的CSS代码能用最少的代码量实现功能,易修改且性能佳。易修改,举个最简单的例子,比如要求修改一个div的高宽且保持其子div自适应高宽,若是写死了子div的高宽,修改工作很麻烦,所以最好是将子div在需求下尽可能写成自适应,这样修改时就只需要修改父div的高宽即可。性能佳,能用CSS实现的绝对不用js实现,不管是网页布局还是动画效果,原生的CSS都是快速又具备高度兼容性的选择。

清除浮动

清除浮动是个常见问题,不少人的解决办法是添加一个空的 div 应用 clear:both。事实上仅需要使用after伪类即可在元素尾部自动清除浮动

.clear-fix { overflow: hidden; zoom: 1; }
.clear-fix:after { display: table; content: ""; width: 0; clear: both; }

DIV同行排列

最容易想到的是将一行div全设置为display:inline-block,但这种做法会使得两个div之间存在“间隔”,这个“间隔”的大小通常由font-size决定。清除间隔可以通过使用注释的方法实现。

<div class="item"></div><!--   
--><div class="item"></div>

更好的方式自然还是使用float

.item {float: left}  

当然,现在时代已经变了,需要flxed了;

两栏自适应布局

适用于一栏宽度不固定,比如大小不确定的图片,另一栏自动调整占满剩余宽度的场景。

.box {
width: 70%;
}
.content {
display: table-cell;
border: 1px solid #eee;
}
.fix {
float: left;
color: #a8c;
}

<div class="box">
<div class="fix">This is left fixed block</div>
<div class="content">
风住尘香花已尽,日晚倦梳头。物是人非事事休,欲语泪先流。闻说双溪春尚好,也拟泛轻舟。只恐双溪舴艋舟,载不动许多愁。
</div>
</div>

把几个class属性写在一起。 

通常情况写,属性里面的class只有一个值,但这并不是意外着你只能给它赋一个class名,我们可以赋2个以上。比如

<p class="text side">...</p>

不过,需要注意的是,class里面是用空格把他们分开来的,而不是“,”,这点需要注意一下。这样运用了,那么text和side的class 就会运用到p元素中。

CSS的 border的默认值

border也就是边框的值,我在做项目开发的时候,很习惯的做法是:

div{
border:1px solid red;
}

第一个指的是框的大小,第二个是指样式,第三个是指颜色。

不过,这里3个并非都是必须要的,必须要用的是border的样式。其余2个有默认值。

比如,你这样写:

div{
border: solid
}

如果你这样写了,那么默认值第一个大小的默认值是:medium(相对于3px或4px左右)以及颜色指的是文本里面的颜色。

块级元素的居中效果

块级元素?你不会这个都不懂了。不懂,我就罗嗦一下,就是指div、h1、table这类元素。相对应的就是inline元素了,比如label等等。

通俗点就是,一个会占一行(当然在没有其他属性的支持下),另一个不会。OK。

一般来说,对div居中,我都会写下面的写法:

#content  

{  

width: 700px;  

margin: 0 auto;  

}

然后,我们很高兴的 就能在正常的浏览器到效果,请注意,我说了正常2个子,那这也说明,有不正常的情况下?什么情况呢?和上面的第六点一样,也是IE5的问题,在IE5下面,它根本就不懂这个,你说它能解决问题嘛?。

所以,我们只好按照下面的来实现:

body  

{  

text-align: center;  

}  

#content  

{  

text-align: left;  

width: 700px;  

margin: 0 auto;  

}

OK,就样就能很好的兼容了。

css font的简写规则

当我们写字体样式的时候,我们也许会这样子

比如:

html{
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif
}

其实,这样写是完全多余的,我可以只用font来写就OK了。

html{
font: 1em/1.5em bold italic small-caps verdana,serif
}

!important 在IE中会被忽视

因为浏览器之间的不兼容性,我们在写css的时候,为了保证网站能在各个浏览器之间保持兼容性,所以 我们需要使用!important这个属性。

如果你在css使用了这个,那么它的优先级会比和它同名属性的优先级高。

这个是给除了给IE以外的浏览器用的。

比如

div{
margin-top: 3.5em !important; margin-top: 2em
}

上面指的是,除IE之外的浏览器是3.5em,而IE是2em。这个很有用。

盒模型hack问题

这个问题比较难,不过说实在话的现在用的机会也比较少。因为它涉及到IE5问题,现在谁敢说还在用IE5?拉出去毙了。

不管如何,我们还了解一下 总没有坏处。

IE5和其他浏览器(IE 6+ 以及chrome等等)对边框的计算是不一样的呢,怎么说呢?

是我们现在正确的理解,就是说整个box盒子的width的值是:内容的width+padding+boder 3个值的相加。

然而,在IE5中不是这样子的哦,请看上图,它的内容只有170px。所以这就出现了问题了。

比如 代码说明:

#sidebar {

width: 200px;

padding: 10px;

border: 5px solid black;

}

把宽度设定为200像素,但是侧边栏实际需要230像素的空间,除了IE5 for Windows以外. IE5 for Windows 里侧边栏总共会占用200像素,把内补丁和边框都算在里面.图2 显示的是当width属性指定为200像素时,边框和内补丁会占用内容空间,而不是内容空间之外.

对IE5 for Windows来说,则需要把宽度指定为230像素(加上两侧内补丁和边框的宽度),接着再以200像素覆盖回来,让符合标准的浏览器得到正确的宽度.

sidebar {  

padding: 10px;

border: 5px solid black;

width: 230px; /* for IE5/Win */  

voice-family: "\"}\"";

voice-family: inherit;  

width: 200px; /* actual value */  

}

留意IE5 for Windows的值先出现,接着几条让IE5 for Windows认为声明已经结束的规则,在此我们使用voice-family属性,原因单纯只是浏览器认得它的话也不会改变视觉效果,最后指定实际的宽度,覆盖最初的width规则,第二个width规则会被IE5 for Windows忽略.

结果在IE5 for Windows以及其他所有兼容CSS2的浏览器上看起来应该完全相同.没有使用这个hack的话,IE5 for Windows的使用者就会看到比设计还瘦的栏宽。

不需要给背景图片路径加引号

如果您是下面这样的写法

background:url("images/***.gif") #333;

你应该把CSS background属性引号去掉

background:url(images/***.gif) #333;

如果你加了引号,反而会引起一些浏览器的错误。

Image的alt属性

我们在网站开发的时候,我们常常被建议使用HTML标签来显示文本,而不是图像。这样可以使得网站具有更快的加载速度以及可访问性。举个例子说,你开发了一个网站,你想在你网站的每一个页面的页面顶端放一个”购买物品”。现在加入你是一个卖家,那么你很期望你的物品能被搜索引擎找到,也许你会这么做:

<h1><img src="widget-image.gif" alt="购买物品" /></h1> 

实现了,但是这里需要注意的是,搜索引擎并不会关注img标签alt里的关键字因为现在很多的卖家都是这样子),所以白搭。所以,我们可以用css来代替

如下:

<h1><span>购买物品</span></h1> 

然后定义css:

h1  {  

background: url(widget-image.gif) no-repeat;  

}  

h1 span  {

position: absolute;  

left:-2000px  

}

这样子就OK了,迎合了搜索引擎的口味。所以呀,搜索引擎真的伤不起呀。

绝对定位和相对定位

这个应该是在css教程里比较难的部分吧,一下子也真的很难说清楚,有兴趣的可以找找资料看。给个例子:

<style>

#container { position: relative }
</style>

<div id="container"><div id="navigation">...</div></div> 

  接着我设定里面navigation的样式

#navigation

{

position: absolute;

left: 30px;

top: 5px

}

这个说明了里面的navigationo相对于外面的来说 进行CSS定位。

垂直调整(vertical aligning) 

当我们在使用table的时候,如果我们需要把一列的内容居中排列怎么做?不用问,我们理所当然的是,用下面的这行句话:

vertical-align: middle

很多时候,这样可以工作,可总有例外。比方说,你现在有一个导航菜单,它的高度是2em,如果你插入这个命令的话,sorry,它不会进行执行,并且会把文字放到顶端。

那怎么解决呢?很简单。

你只需要把box模型的的高度的line-height指定成一样就可以了。如下:

line-height: 2em

下面是在一个网站上看到的:

  • 1、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。
  • 2、同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次;对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效,是因为ID的权值要比CLASS大。
  • 3、一个兼容性调整(IE和Mozilla)的笨办法: 初学可能会碰到这样一个情况:同样一个标签的属性在IE设置成A显示是正常的,而在Mozilla里必须要设成B才能正常显示,或者两个倒过来。 临时解决方法:选择符{属性名:B !important;属性名:A}
  • 4、如果一组要嵌套的标签之间需要些间距的话,那就留给位于里面的标签的margin属性吧,而不要去定义位于外面的标签的padding
  • 5、li标签前面的图标推荐使用background-image,而不是list-style-image。
  • 6、IE分不清继承关系和父子关系的差别,全部都是继承关系。
  • 7、在给你的标签疯狂加选择符的时候,别忘了在CSS里给选择符加上注释。 等你以后修改你的CSS的时候就知道为什么要这么做了。
  • 8、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。
  • 9、定义链接的四种状态要注意先后顺序: Link Visited Hover Active
  • 10、与内容无关的图片请使用background
  • 11、定义颜色可以缩写#8899FF=#89F
  • 12、table在某些方面比其它标签表现的要好的多。请在需要列对齐的地方用它。
  • 13、<script>没有language这个属性,应该写成这样: <script type=”text/javascript”>
  • 14、标题是标题,标题的文字是标题的文字。有时候标题不一定需要显示文字,所以:<h1>标题内容</h1> 改成 <h1><span>标题内容</span></h1>
  • 15、完美的单象素外框线表格(在IE5、IE6、IE7及FF1.0.4以上中均可通过测试) table{border-collapse:collapse;} td{border:#000 solid 1px;}
  • 16、margin取负值可以在标签使用绝对定位的时候起到相对定位的作用,在页面居中显示时,使用绝对定位的层不适合使用left:XXpx这个属性。把这个层放到一个要相对定位的标签旁,然后使用margin的负值是个好方法。
  • 17、绝对定位时使用margin值定位可以达到相对于本身所在位置的定,这与top,left等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。
  • 18、如果文字过长,则将过长的部分变成省略号显示:IE5,FF无效,但可以隐藏,IE6有效 <DIV STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”> <NOBR>就是比如有一行文字,很长,表格内一行显示不下.</NOBR>
  • 19、在IE中可能由于注释带来的文字重复问题时可以把注释改为: <!?[if !IE]>Put your commentary in here…<![endif]?>
  • 20、如何用CSS调用外部字体 语法: @font-face{font-family:name;src:url(url);sRules} 取值: name:字体名称。任何可能的 font-family 属性的值 url(url):使用绝对或相对 url 地址指定OpenType字体文件 sRules:样式表定义
  • 21、如何让一个表单中的文本框中的文字垂直居中? 如果用行高与高度的组在FF中是没有效果的,办法就是定义上下补白就可以实现想想的效果了。
  • 22、定义A标签要注意的小问题: 当我们定义a{color:red;}时,它代表了A的四种状态的样式,如果此时要定义一个鼠标放上的状态只要定义a:hover就可以了,其它三种状态就是A中所定义的样式。 只定义了一个a:link时,一定要记得把其它三种状态定义出来!
  • 23、并不是所有样式都要简写: 当样式表前定义了如p{padding:1px 2px 3px 4px}时,在后续工程中又增加了一个样式上补白5px,下补白6px。我们并不一定要写成p.style1{padding:5px 6px 3px 4px}。可以写成p.style1{padding-top:5px;padding-right:6px;},你可能会感觉这样写还不如原来那样好,但你想没想过,你的那种写法重复定义了样式,另外你可以不必去找原来的下补白与左补白的值是多少!如果以后前一个样式P变了话,你定义的p.style1的样式也要变。
  • 24、网站越大,CSS样式越多,开始做前,请做好充分的准备和策划,包括命名规则。页面区块划分,内部样式分类等。
  • 25、几个常用到的CSS样式:
    -1)中文字两端对齐:text-align:justify;text-justify:inter-ideograph;
  • -2)固定宽度汉字截断:overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不过只能处理文字在一行上的截断,不能处理多行。)(IE5以上)FF不能,它只隐藏。
  • -3)固定宽度汉字(词)折行:table-layout:fixed; word-break:break-all;(IE5以上)FF不能。
  • -4)<acronym title=”输入要提示的文字” style=”cursor:help;”>文字</acronym>用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到,而国内的少又少。
  • -5)图片设为半透明:.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5测试通过,FF未通过,这是因为这个样式是IE私有的东西;
  • -6)FLASH透明:选中swf,打开原代码窗口,在</object>前输入<param name=”wmode” value=”transparent”> 以上是针对IE的代码。 针对FIREFOX 给<embed> 标签也增加类似参数wmode=”transparent”
  • -7)在做网页时常用到把鼠标放在图片上会出现图片变亮的效果,可以用图片替换的技巧,也可以用如下的滤镜: .pictures img { filter: alpha(opacity=45); } .pictures a:hover img { filter: alpha(opacity=90); }

未经允许不得转载:WEB前端开发 » 您需要知道的CSS+DIV技巧

赞 (0)