block,inline和inlinke-block区别

1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行; inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。

2.大体来说HTML元素各有其自身的布局级别(block元素还是inline元素):
常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。

常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。

3. block元素可以包含block元素和inline元素;但inline元素只能包含inline元素。要注意的是这个是个大概的说法,
每个特定的元素能包含的元素也是特定的,所以具体到个别元素上,这条规律是不适用的。比如 P 元素,
只能包含inline元素,而不能包含block元素。

4. 一般来说,可以通过display:inline和display:block的设置,改变元素的布局级别。

block,inline和inlinke-block细节对比

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的同行特性。

时间: 2024-08-24 18:47:43

block,inline和inlinke-block区别的相关文章

display:block,inline,inline-block,none的区别

display几个常用的属性以及区别 none,block,inline,inline-block; none:会隐藏元素,不占据dom空间,下文会提到; block:块级元素,前后会有换行符,占据一行;可以进行宽高设置,上下左右的padding,margin属性也可以设置; inline:行内元素,前后没有换行符,不能进行宽高设置;由左到右,从上到下排列,不可以设置上下margin,padding属性; inline-block:既有宽高属性,又不会换行; display:none跟visib

block,inline和inline-block的区别

概念 block是块级元素,会被现实认为是单独的一块,会单独占一行. 常见的block元素有: DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等. inline内联元素,不会产生换行,一系列的inline在一行内显示,直到排满为止. 常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等. inline-block:是将对象呈现为inline对象,但是对象的内容作为b

display:block / inline / inline-block 三个之间的区别

块元素特点: 每次都是从新行开始: 可以设置宽.高,行高,顶底边距等: <div>  <ul> <ol> <li> <dl> <dt> <dd> <table> <form>  <p>  <hr/><textarea>等都是 行元素特点: 和别的元素在同一行: 不可以设置宽高,行高,顶底边距等: <span> <img> <var&g

CSS中block,inline和block-inline的区别(转载)

http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 大体来说HTML元素各有其自身的布局级别(block元素还是inline元素)

display:block、display:inline与displayinline:block的概念和区别

总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 大体来说HTML元素各有其自身的布局级别(block元素还是inline元素): 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL,

2016/2/25 1, margin auto 垂直方向测试 无效 2,margin重叠 3,哪些是块状哪些是内联 4,display:block inline 导航栏把内联转块状最常见+ 扩展

1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;}    竖直方向上margin:auto;无效.2.测试margin重叠的发生条件及现象,并自行搜索“父子div”也会发生margin重叠,写出代码及效果图. <!DOCTYPE html> <html> <head> <title>测试父子DIV-margin</tit

dispay属性的block,inline,inline-block

转自下面的几位大神: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 大体来说HTML元素各有其自身的布局级别(block元素

display:block;inline;inline-block大总结

总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 大体来说HTML元素各有其自身的布局级别(block元素还是inline元素): 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL,

当inline元素包裹block元素时会发生什么

经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a> 点击图片自动跳转,不用增加新的点击事件,光标滑过时变成小手等等,这都是a标签的功劳. 但是inline元素包裹block元素后,inline元素本身是否会变成blcok元素,还有待求证,于是做了如下对比: <div>这里是块元素</div> <span>用于测试(没有

block的学习(block和timer的循环引用问题)

一.什么是回调函数? 回调函数,本质上也是个函数(搁置函数和方法的争议,就当这二者是一回事).由"声明"."实现"."调用"三部分组成. 在上面的例子中,我可以看出,函数amount(其实是Block),的声明和调用在A类中,而实现部分在B类中.也就是说,B类实现了amount函数,但并没有权限调用,最终还是 由A类触发调用.我们称这样的机制为"回调".意思是"虽然函数的实现写在B类中,但是真正的调用还是得由A类来完