HTML中块级元素(block)和行级元素(inline)；比如div就是常见的块级元素，span就是常见的行级元素。

　　可以通过css的display属性来设置一个元素到底是块级，还是行级元素；display:block将元素设置成块级的，display:inline将元素设置成行级的。

　　span的实际显示宽度和高度由其内容决定。

一、display:block的特点

　　1、block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
　　2、block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
　　3、block元素可以设置margin和padding属性。

二、display:inline的特点

　　1、inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
　　2、inline元素设置width,height属性无效。
　　3、inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, 　　margin-bottom不会产生边距效果。

三、display:inline-block的特点

　　1、让行内块可以设置宽度高度。

　　span是行级元素，所以不能设置其宽度和高度；如果将span设置成block，那么又会自动换行。怎么让多个span在同一行显示，而且能够固定宽度呢？这就需要用到display:inline-block了。

例子：

<head>

     <style>

         span{

            background-color:#43be60;

            width:100px;

            height:50px;

            margin-top:20px;

            margin-left:20px;

            display:inline-block;

         }

     </style>

</head>  

<body>

    <div style="background-color:#ededed;width:400px;height:400px;">

         <span>1</span>

         <span>10</span>

         <span>100</span>

         <span>1000</span>

    </div>

</body>

CSS 基础 例子 display属性：block、inline和inline-block的区别的更多相关文章

  1. CSS中的display属性（none,block,inline,inline-block,inherit）

    css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...

  2. 理解与应用css中的display属性

    理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...

  3. CSS中的display属性

    CSS中的display属性 display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的,几个span元素是在同一行内的,如果给sp ...

  4. 转: 详解css中的display属性

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

  5. 细说CSS中的display属性

    相信大部分奋战在前端的,尤其在前端攻城的过程中,有一种越陷越深的感觉,不错,一如前端深似海,从此妹子是浮云啊,前端上手容易,深入难啊!下面我就CSS中的display属性讲下我自己所积累的,与大家共享 ...

  6. HTML&CSS基础-标签的属性

    HTML&CSS基础-标签的属性 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!-- html 根标签,一个页面中有且只有一个根标签,网页中的 ...

  7. HTML&CSS基础-边框简写属性

    HTML&CSS基础-边框简写属性 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> ...

  8. CSS基础-行快属性，hover

    CSS基础 1.行快属性 在css中有很多标签,分为行内标签,块标签,标签行内块标签,他们有着不同的属性.     块标签         div,ul,li,ol,h1~h6,p         可 ...

  9. CSS visibility与display 属性

    所有主流浏览器都支持 visibility 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持 "inherit" 和 "colla ...

随机推荐

  1. RoCE vs iWARP

    两种以太网 RDMA 协议: iWARP 和 RoCE 转载 2017年03月08日 16:10:09 1510 http://weibo.com/p/1001603936363903889917?m ...

  2. Chat room

    /* Vasya has recently learned to type and log on to the Internet. He immediately entered a chat room ...

  3. iOS.KVC.setValue:forKey:

    Foundation Framework 定义了 NSObject(NSKeyValueCoding), - (void)setValue:(id)value forKey:(NSString *)k ...

  4. VS“当前上下文中不存在名称“ViewBag”，当前上下文不存在名称“model””-已解决

    自己的项目出现了错误提示,却能编译成功,但是有点强迫症,总是想解决这个错误. 上网找了一堆,都是删除缓存等一些方法,但是没有多大用处,我觉得还是版本号不对,没有引用进来相应的配置,所以配置下了Conf ...

  5. PS合成的5个要点：场景、对比、氛围、模糊、纹理

    是否觉得做合成打开PS之后无处下手,做完之后总觉得缺少故事情节?这一次分享的5个要点,是个人觉得需要重视的,每一点都有一个案例来让作品变得多一份惊喜.(申明:文中素材均来自网络,这里仅作分享交流作用) ...

  6. win7 64位远程连接oracle11g64位

    1.首先下载即时客户端 instantclient-basic-windows.x64-11.2.0.4.0,下载地址:http://www.oracle.com/technetwork/topics ...

  7. oracle导入sql文件关闭回馈

    set feedback off --关闭回馈 set define off --关闭转义关键字

  8. 27 isinstance与issubclass、反射、内置方法

    isinstance与issubclass issubclass:判断子类是否属于父类,是则返回True,否则返回False isinstance:判断对象是否属于类,是则返回True,否则返回Fal ...

  9. PHP标准库 SPL

    PHP SPL笔记 这几天,我在学习PHP语言中的SPL. 这个东西应该属于PHP中的高级内容,看上去很复杂,但是非常有用,所以我做了长篇笔记.不然记不住,以后要用的时候,还是要从头学起. 由于这是供 ...

  10. 2019.01.19 洛谷P2787 语文1（chin1）- 理理思维（ODT）

    传送门 ODTODTODT水题. 题意:有一个字母序列,支持区间赋值,查询区间某个字母的数量,区间按字母序排序. 思路: 可以开262626棵线段树搞过去,然而也可以用ODTODTODT秒掉. 如果用 ...