block: 英语翻译过来是“”意思,就跟小时候玩过的积木方块一样,一块一块往上搭。

inline: 英语翻译过来就是“内联”的意思,内联不好理解,我的理解就是行内元素;

blockinline都是比较通俗的说法,block应该是“block-level elments”(块级元素),inline应该是“inline elements”(行内元素)

细节对比:

display:block的元素;

  1、在网页中会单独占一行,默认情况下他的宽度是填满父级宽度,即使他的宽度比浏览器窗口小很多也不会让后面的元素挤上来跟他同占一行(比较小气);

  2、可以设置width和height;

  3、还可以设置padding和margin;

display:inline;

  1、这样样式的元素就不一样啦,他比较大方,他可以和多个inline元素同占一行,直到他们的宽度总和超过了浏览器窗口的宽度才会将多出来的元素往下挤(因为实在太挤了);

  2、不能用width和height,因为这两个个属性在inline身上无效;

  3、padding-left、padding-left、margin-left、margin-right有效,其他方向上(上下)的padding和margin属性无效;

display:inline-block;

  1、简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。但width、height属性对他们仍有效;

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

那么如何让IE低版本支持inline-block呢?

方法1:先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display 要先后放在两个css声明中才有效果,这是ie的一个经典bug,如果先定义了display:inline-block,然后再将display设回 inline或block,layout不会消失)。代码如下:

div{ display:inline-block;}
div{ display:inline;}

方法2:直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1等)。代码如下:

div{ display:inline-block;
     zoom:;
}

常见的块级元素:div、p、form、h1-h6、pre、ol、ul、dl等等;

常见的内联元素:span、a、img、input、textarea、br、em、label、strong、select等等

block,inline,inline-block的区别的更多相关文章

  1. display:inline、block、inline-block 的区别

    一.块级元素 与  行级元素 要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫 ...

  2. css学习--inline-block详解及dispaly:inline inline-block block 三者区别精要概括

    *知识储备: 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行. 块级元素:是可以控制宽和高.margin等,并且会换行. 1.inline-block 详解 (1)一句话就是在 ...

  3. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  4. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  5. block, inline和inline-block的区别

    display:block元素的特点是:总是在新行上开始:高度,行高以及顶和底边距都可控制:宽度缺省是它的容器的100%,除非设定一个宽度<div>, <p>, <h1& ...

  6. block,inline和inline-block概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  7. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

  8. block,inline和inline-block概念和区别(转)

    转自  http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-lev ...

  9. css中inline、block、inline-block的区别

    http://www.cnblogs.com/fxair/archive/2012/07/05/2577280.html display:inline就是将元素显示为块级元素. block元素的特点是 ...

随机推荐

  1. vmware workstation安装 Mosrosoft Runtime DLL安装程序未能完成安装

    不要点确定.开始菜单运行输入'%temp%',在弹出的窗体中找到一个文件名中含'{132E3257-14F1-411A-BC6C-0CA32D3A9BC6}~setup'(不一定一样,反正就是第一行的 ...

  2. Discuz!模板解析语法

    <!--{eval echo autostart("); }--> PHP中使用template()函数显示已存在模板 在Discuz!程序执行中可以通过 include tem ...

  3. 贼溜的更新Android-SDK的方法(亲测很好用)

    启动 Android SDK Manager ,打开主界面,依次选择「Tools」.「Options...」,弹出『Android SDK Manager - Settings』窗口:在『Androi ...

  4. Vim以及Terminal 配色方案---&quot;Solarized&quot;配色

    linux用户给vim 以及terminal的配色方案---Solarized配色 官网地址:http://ethanschoonover.com/solarized 看这配色:八卦乾坤,赏心悦目,高 ...

  5. 网页中的CSS换行控制

    在进行DivCSS布局时,需要对文本进行控制,向大家介绍一下,CSS中控制换行的四种属性.一.white-space 可以实现HTML中PRE标签的效果,以及单元格的noWrap效果.语法: whit ...

  6. 【HDU】3506 Monkey Party

    http://acm.hdu.edu.cn/showproblem.php?pid=3506 题意:环形石子合并取最小值= =(n<=1000) #include <cstdio> ...

  7. DLUTOJ #1394 Magic Questions

    传送门 Time Limit: 3 Sec  Memory Limit: 128 MB Description Alice likes playing games. So she will take ...

  8. 斯坦福大学CS224d基础1:线性代数回顾

    转自 http://blog.csdn.net/han_xiaoyang/article/details/51629242 斯坦福大学CS224d基础1:线性代数知识 作者:Zico Kolter ( ...

  9. SGU 170 Particles(规律题)

    题目链接:http://acm.sgu.ru/problem.php?contest=0&problem=170 解题报告:输入两个由'+'和'-'组成的字符串,让你判断第二个串能不能由第一个 ...

  10. 如何让Service自动重启而不被kill掉

    重写service的onStartCommand方法. @Override    public int onStartCommand(Intent intent, int flags, int sta ...