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. 转录组分析综述A survey of best practices for RNA-seq data analysis

    转录组分析综述 转录组 文献解读 Trinity cufflinks 转录组研究综述文章解读 今天介绍下小编最近阅读的关于RNA-seq分析的文章,文章发在Genome Biology 上的A sur ...

  2. CH#56C 异象石

    一道LCA 原题链接 先跑一边\(dfs\),求出每个节点的时间戳,如果我们将有异象石的节点按时间戳从小到大的顺序排列,累加相邻两节点之间的距离(首尾相邻),会发现总和就是答案的两倍. 于是我们只需要 ...

  3. Maven构建JavaWeb

    查看java和mvn版本 java -version mvn -v D:\software\yiibai\spring-1.4.3.RELEASE>java -versionjava versi ...

  4. js实现环形菜单效果

    点击中间的圆点,会弹出环形菜单,效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

  5. DB2有五种约束

    DB2有五种约束: NOT NULL 约束是这样一种规则,它防止在表的一列或多列中输入空值. 唯一约束(也称为唯一键约束)是这样一种规则,它禁止表的一列或多列中出现重复值.唯一键和主键是受支持的唯一约 ...

  6. OneZero第三周第三次站立会议（2016.4.6）

    1. 时间: 13:05--13:15  共计10分钟. 2. 成员: X 夏一鸣 * 组长 (博客:http://www.cnblogs.com/xiaym896/), G 郭又铭 (博客:http ...

  7. PHP删除空格函数

    删除空格或其他字符的相关函数 ltrim函数 描述:实现删除字符串开始位置的空格或其他字符 语法:string ltrim(string $str [,string $charlist]) 说明:ch ...

  8. rails 数据迁移出问题

    数据migrate重置 rails db:migrate:reset 具体的,,还不清楚,想起来了再去补充

  9. chattr改变文件属性

    Linux chattr命令用于改变文件属性. 这项指令可改变存放在ext2文件系统上的文件或目录属性,这些属性共有以下8种模式: a:让文件或目录仅供附加用途. b:不更新文件或目录的最后存取时间. ...

  10. 2018.11.06 洛谷P1941 飞扬的小鸟（背包）

    传送门 上升看成完全背包. 下降看成01背包. 注意边界转移就行了. 代码: #include<bits/stdc++.h> using namespace std; inline int ...