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. display:inline-block,block,inline的区别与用法

    一.首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置   margi ...

  7. 2017-08-20 block,inline和inline-block概念和区别

    display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...

  8. display:inline、block、inline-block区别

    display:inline.block.inline-block区别 display:block就是将元素显示为块级元素. display:inline就是将元素显示为行内元素. inline-bl ...

  9. display:inline、block、inline-block的区别(摘抄)

    display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...

  10. display:inline、block、inline-block的区别 摘】

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

随机推荐

  1. 【Bugly安卓开发干货分享】Android APP 快速 Pad 化实现

    项目背景 采用最新版本手机 APP(之后称为 MyApp)代码,实现其 Pad 化,为平板和大屏手机用户提供更好的体验.为实现 MyApp 的 Pad 化工作,需要我们首先来了解一下 MyApp 项目 ...

  2. Linux 网络编程(epoll)

    服务器端代码 #include<stdio.h> #include<stdlib.h> #include<string.h> #include<sys/soc ...

  3. linux 2.6 驱动笔记(一)

    本文作为linux 2.6 驱动笔记,记录环境搭建及linux基本内核模块编译加载. 环境搭建: 硬件:OK6410开发板 目标板操作系统:linux 2.6 交叉编译环境:windows 7 + v ...

  4. 淘宝UWP桌面版公测-谁需要邀请码?

    今天taobaoUWP桌面版上线beta测试了.哪位朋友需要邀请码的,请与我联系. 前提是,您的PC已经升级到Windows 10 10586版本了,否则无法使用. 邀请码数量有限,一人一枚,共20枚 ...

  5. 【C语言学习】《C Primer Plus》第9章 函数

    学习总结 1.函数有利于我们可以省去重复的代码,函数可以使程序更加模块化,从而有利于程序的阅读.修改和完善.我们在系统设计或架构设计的时候,往往追求的是模块化.组件化.松耦合,而函数就是其代码的表现. ...

  6. Aoite 系列(01) - 比 Dapper 更好用的 ORM

    Aoite 是一个适于任何 .Net Framework 4.0+ 项目的快速开发整体解决方案.Aoite.Data 适用于市面上大多数的数据库提供程序,通过统一封装,可以在日常开发中简单便捷的操作数 ...

  7. 教你如何完美保存Html编辑器编辑过的文本到Word中

    有时候在网页上面编辑了一段文字,有图片,想保存一份到word文档里面,但是复制粘贴以后发现格式并没有保存下来,今天就来教大家如何完整的保存Html编辑器编辑过的文字(可以包含图片,但是图片必须是绝对路 ...

  8. Unity3D使用经验总结 优点篇

    09年还在和其它小伙伴开发引擎的时候,Unity3D就初露头角. 当时就对这种基于组件式的设计结构很不理解. 觉得拆分过于细致,同时影响效率. 而时至今日,UNITY3D已经成为了众多团队的首选3D引 ...

  9. java中基本类型和包装类型实践经验

    至今,小菜用java快两年了,有些事,也该有个总结. 基本类型和包装类型的概念在本文不作赘述. 如果这两种类型直接使用,倒没什么值得讨论的,无非就是自动装箱拆箱,java可以让你感觉不到他们的存在,但 ...

  10. Composer使用

    是什么 如果你知道yum.apt-get.npm.bower等命令中的一种或者多种,那么,你也能很快知道composer是什么了.没错,它就是PHP里快速安装类库的.平时,我们安装一个PHP类库,需要 ...