登录模块加载中...
会员投稿 投稿指南 今天是:
打印本页 | 关闭窗口 | 双击滚屏 您的位置首页>>网页制作学习园地>>网页制作>>网站设计原则>>display属性行内元素和块级元素
display属性行内元素和块级元素
来源: ‖ 作者: ‖ 点击: ‖ 时间:12-04-09 14:11:03 ‖ 【 】‖ 我要投稿
也会对他按照标准的CSS规范来解释这个代码。

例如,将上面代码中的第一行,改为:

  1. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >


这时在IE中看到的效果,就会与Firefox中相同了,说明当使用了DOCTYPE指令之后,IE会按照标准的方式解释上面的代码,从而得到与Firefox中相同的效果。

那么如果希望在标准的方式下,在Friefox和IE浏览器中,都能使a元素获得我们希望的效果,该怎么办呢?

解决方法

方法很简单,只需要使用display属性,强制把a元素由inline元素改为block-level即可,方法是,在a元素的CSS样式中增加一条:

  1. display:block;


这时在IE、Firefox中就都可以得到我们想要的效果了,可以随意设置高度宽度等各种几何属性了。

总结与提高

通过display属性,可以方便地改变一种元素的类型,因此如果读者理解这一点,就会知道实际上div元素和span元素,只需要通过display属性,就可以相互转换了。

因此,无论一个网页时有什么样的HTML标记来构成的,比如div、ul、li、p等等,他们本质上都是一些盒子而已,在浏览器的眼中,一个网页就是一大堆盒子,你的任务就是把这些盒子按照你的要求放在合适的位置。至于这个盒子是ul、li、p还是div,都无所谓的。

比如p标记,完全可以理解为有了一些预设属性值的div。比如,你把网页上的p标记,换成div,然后对这个div设置一些CSS属性,就可以和p完全一样了。这就好像,小学我们学习加法和减法,后来才知道,加法和减法本质是一样的,1-1 就等于 1 + (-1) ,同样,乘法和除法也是一样的。

真正把原理理解透彻了之后,在设计的时候,才可能做到天马行空一样的自由。

同样,对于网页来说,作为设计师,在定义网页结构和内容的时候,关注的是网页的结构和内容,在排版的时候,关注的浏览器如何显示这个页面。

我们说,p标记和div标记,实际上都是盒子,是强调了问题的一个方面。而从另一个方面——结构和内容的方面来说,当然是完全不同的,不应该、也没有必要代替的。

|<< << < 1 2 > >> >>|
加入收藏:  加入收藏夹  | 发送给好友:  发送给好友
责任编辑:admin
相关文章列表
请文明参与讨论,禁止漫骂攻击。  
网友评论