Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

两种性质,三类元素,浅谈inline和block的基本性质

  现在,我要说的是inline性质和block性质,并是不是display里面的inline和block。所以如果觉得和自己曾经学过的东西有冲突那是很正常的。。下面是这连个性质的定义。
    inline性质:
      复数个inline性质的元素在一起,它们会尽量在同一行显示出来。
    block性质:
      具有block性质的元素有完整的盒子模型,可以做定义大小等操作。
  也许你会觉得奇怪,定义就这么简单?没错,定义本身是最简单的,就像1+1=2的定义。而定义总结出公理、公理推到出定理、定理模拟出公式。这才是研究自然科学的方法。
  DIV默认是block元素吧,为什么会占一整行?DIV元素之所以会占一整行,不是因为它具有block性质,而是因为它缺少inline性质。性质的缺乏,本身也会对元素造成影响。所以这里就可以总结出三类元素:
    inline元素:具有inline性质且不具有block性质的元素
    block元素:具有block性质且不具有inline性质的元素
    inline-block元素:同时具有inline和block性质的元素
  通常,修改元素性质可以使用display这个属性可以使用的值很多,除了常用的inline和block以外还有table的一堆,我就不一一说明了,如果想了解每个属性的性质,自己逐个尝试就好。另外还有一些样式可以可以改变元素的性质:
    position:absolute;
    position:fixed;
    float:left;
    float:right;
  这些属性可以改变让元素同时拥有inline和block性质。当然这些属性本身也有一些特定的布局方式,比如position:absolute;之后的元素,虽然有inline属性,但是它有比inline定位级别更高的top、left、right、bottom定位方式,所以inline属性在它这儿也只是虚有其表而已。
  除了CSS,还以一些标签本身的属性也对标签性质有影响,比如IMG标签。你无论如何也无法删除它的block性质。
  其它也没啥好说的了,这篇文章就这儿吧。主要还是需要靠自己积累,看文章学到的知识如果没有经常用就会忘记掉。
网名:
3.80.32.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^