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的参数远远不止这三种,仅仅是比较常用而已。
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
- div与span及 block-line块元素与in-line内联元素的区别(H5)
- div 块元素(block)与 span 内联元素(inline)
- 块元素与内联元素的区别
- 块元素与内联元素的区别
- 块元素与内联元素的区别
- xhtml的块级元素(div)和内联元素(span)
- html从入门到放弃(7)-入门标签:块元素与内联元素<div/>和<span/>
- 块级元素与内联元素区别
- 块状元素(div)与内联元素(span)
- 块级元素与内联元素的区别
- 块级元素与内联元素的区别
- CSS的块元素与内联元素
- 块元素(block element)与内联元素(inline element)
- inline-block间隙问题内联元素与块级元素
- span元素与块级元素(div、p)位于同一行时的垂直居中问题
- 块级元素与行内元素(内联元素)的区别和联系
- 块状元素与内联元素的区别
- 块元素和内联元素区别与联系
- ACM A+B Problem
- java可视化编程-eclipse安装windowbuilder插件
- swust.oj.1076
- 并查集_hdu1213
- React-Native 与原生的3种交互通信(Android)
- div与span及 block-line块元素与in-line内联元素的区别(H5)
- 动态规划0—1背包问题
- C++使用ADO连接MySql数据库
- mv 命令批量移动文件夹
- 24点游戏
- 类的加载顺序及静态代码块的执行时机
- CJOJ 1160 热浪
- 显示HWC合成(hwc_display_contents_1_t,hwc_layer_1_t数据结构关系)
- 24点游戏