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

display:block就是将元素显示为块级元素.

　　block元素的特点是：
　　总是在新行上开始；
　　高度，行高以及顶和底边距都可控制；
　　宽度缺省是它的容器的100%，除非设定一个宽度
　　<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

　　display:inline就是将元素显示为行内元素.

　　inline元素的特点是：
　　和其他元素都在一行上；
　　高，行高及顶和底边距不可改变；
　　宽度就是它的文字或图片的宽度，不可改变。
　　<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

　　inline和block可以控制一个元素的行宽高等特性，需要切换的情况如下：

　　让一个inline元素从新行开始；
　　让块元素和其他元素保持在一行上；
　　控制inline元素的宽度（对导航条特别有用）；
　　控制inline元素的高度；
　　无须设定宽度即可为一个块元素设定与文字同宽的背景色。

　　display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

　　inline-block的元素特点：

　　将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)

　　并不是所有浏览器都支持此属性，目前支持的浏览器有：Opera、Safari在IE中对内联元素使用display:inline-
block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了
display:inline-block属性的表症。从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-
block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout，而它本就是行
布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联对象。

　　IE下块元素如何实现display: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; zoom:1;...}

　　

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <title>display:inline、block、inline-block的区别</title>
</head>
<style>
    div, span {
        background-color: palevioletred;
        margin: 0px;
        border: 1px solid #333;
        padding: 0px;
        height: 52px;
        color: #fff;
    }

    .b {
        display: block;
    }

    .i {
        display: inline;
    }

    .ib {
        display: inline-block;
    }

</style>
<body>
<div class="i">div display:inline</div>
<div class="ib">div display:inline-block</div>
<div class="b">div display:block</div>

<span class="i">span display:inline</span>
<span class="b">span display:block</span>
<span class="ib">span display:inline-block</span>

</body>

结果：
aaarticlea/png;base64,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" alt="" />

DIV CSS display(block,inline,none)的属性教程的更多相关文章

  1. css display block 和 inline

    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...

  2. CSS 概念 Block Inline Containing block

    Block 元素 包括 "block-level box," "block container box," and "block box" ...

  3. display:inline-block的div 与 display:block的div之间有间隔问题（div与div之间有间隔的可能性）

    首先看一下我出现的问题如下图: 如上图所示,我的导航栏是由三部分组成的,三部分样式如下: .logo{ /*红框*/ position: relative; display: inline-block ...

  4. CSS——display（Block none inline等）属性的用法

    在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...

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

    1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;}    竖直方向 ...

  6. div+css兼容 ie6_ie7_ie8_ie9_ie10和FireFox_Chrome等浏览器方法

    1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行   ...

  7. DIV CSS 网页兼容全搞定 （IE6 IE7 IE8 IE9 火狐 谷歌）

    CSS兼容常用技巧 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middl ...

  8. 转载:DIV+CSS有可能遇到的问题

    [总结]DIV+CSS有可能遇到的问题 一.超链接访问过后hover样式就不出现的问题? 被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H- ...

  9. DIV+CSS解决IE6，IE7，IE8，FF兼容问题

    1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了:1. <metahttp-equivmetahttp-equiv ...

随机推荐

  1. 【Linux】Face Recognition的封装

    使用虹软的人脸识别 写了一个linux下的Face Recognition的封装,当作是练习. C++的封装,结合opencv,使用方便.https://github.com/zacario-li/F ...

  2. Python3 Tkinter-Listbox

    1.创建 from tkinter import * root=Tk() lb=Listbox(root) for item in ['python','tkinter','widget']: lb. ...

  3. 安装HIVE

    参考:https://cwiki.apache.org/confluence/display/Hive/GettingStarted 1.下载hive安装包     到apache官网或者其它地方下载 ...

  4. 小茜（xi）的减肥之路

    Description 今天,多年未见的小钧和小江在街头偶遇,小江想看看当年那个蠢蠢的小钧有没有变聪明一些,他灵机一动,说:“当初小茜立了个flag,说一定要减肥,她想着第一天跑一米,第二天跑两米,第 ...

  5. python 抓取网上OJ试题

    学校工作需要,需架设一台内网OJ服务器,采用了开源的hustoj.试题下载了hustoj的freeprblem的xml文件.导入时出现很多错误,不知什么原因.另外要将历年noip复赛试题加上去,但苦于 ...

  6. window对象与document对象的区别

    [window对象] 它是一个顶层对象,而不是另一个对象的属性,即浏览器的窗口. 属性 defaultStatus 缺省的状态条消息 document 当前显示的文档(该属性本身也是一个对象) fra ...

  7. 【alpha】Scrum站立会议第2次....10.17

    小组名称:nice! 小组成员:李权 于淼 杨柳 刘芳芳 项目内容:约跑app 1.任务进度 成员 已完成 今日完成 李权 数据库设计 消息发送代码实现 于淼 注册.登录界面,以及登录界面后台代码.发 ...

  8. 大全Kafka Streams

    本文将从以下三个方面全面介绍Kafka Streams 一. Kafka Streams 概念 二. Kafka Streams 使用 三. Kafka Streams WordCount   一. ...

  9. monaco editor 实现自定义提示（sql为例）

    monaco editor :https://www.cnblogs.com/XHappyness/p/9414177.html 这里实现自己定义的提示: .vue <template> ...

  10. 安全的API接口解决方案

    在各种手机APP泛滥的现在,背后都有同样泛滥的API接口在支撑,其中鱼龙混杂,直接裸奔的WEB API大量存在,安全性令人堪优 在以前WEB API概念没有很普及的时候,都采用自已定义的接口和结构,对 ...