div与span及 block-line块元素与in-line内联元素的区别(H5)

来源:互联网 发布:java 常用算法函数 编辑:程序博客网 时间:2024/05/19 02:28
> DIV与SPAN区别及div与san用法
div占用的位置是一行,span占用的是内容有多宽就占用多宽的空间距离;
如果div的class为yangshi,则对内的span设置css属性则,代码如下
.yanshi span{属性及属性值};
div与span区别及用法- http://blog.csdn.net/cao478208248/article/details/25719735

> block inline-block与inline的区别
  display:block
block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。
  display:inline
inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
  display:inline-block
简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
  一般我们会用display:block,display:inline或者display:inline-block来调整元素的布局级别,其实display的参数远远不止这三种,仅仅是比较常用而已。

  IE(低版本IE)本来是不支持inline-block的,所以在IE中对内联元素使用display:inline-block,理论上IE是不识别的,但使用display:inline-block在  IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表象。

> in-line内联元素和block-line块元素
  div与span区别:
div占用的位置是一行;span占用的是内容有多宽就占用多宽的空间距离
  浏览器的兼容问题:不能随便放置<span>标签在<table>中等。
  HTML中为何P标签内不可包含DIV标签?有些块元素不可以包含另一些块元素  ,DTD中规定了块级元素是不能放在P里;
P标签内包含块元素时,它会先结束自己,比如:<*p><*div>测试p包含div<*/div><*/p>,那么浏览器会解释成:<*p><*/p><*div>测试p包含div<*/div><*p><*/p>  会多解释出一个p.

  深究:我们先来认识in-line内联元素和block-line块元素,因为HTML里几乎所有元素都属于内联元素或者块元素中的一种。in-line这个词有很多种解释:内嵌、内联、行内、线级等,但是,它们都是表示相同的意思,在这里我们选择习惯的叫法--内联。可以通过CSS把div定义成内联元素,把span定义成块元素,但是,我们却不能在HTML里任意转化它们,块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,它只能包含其他的内联元素. 

0 0
原创粉丝点击