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. nginx 的 负载均衡

    一.正向代理和反向代理 1.正向代理 正向代理类似一个跳板机,代理访问外部资源. 正向代理是客户端和目标服务器之间的代理服务器(中间服务器).为了从指定的服务器取得内容,客户端向代理服务器发送一个请求 ...

  2. XiaoKL学Python（E）Generator Expressions

    在 阅读 https://github.com/vitonzhang/objc_dep 中的 objc_dep.py 时遇到: objc_files = (f for f in files if f. ...

  3. 利用七牛存储7天远程自动备份LINUX服务器

    受服务器空间制约,我们不可能在VPS上每天都备份一份新的网站数据,一是没必要,二是占空间.我们折中一下,采用星期命名,每次备份将覆盖上星期同一天的文件.从而只备份7份数据,不至于占用特别大的空间. 如 ...

  4. UI设计：C4D作品案例分享

    中文名4D电影,外文名CINEMA 4D,研发公司为德国Maxon Computer,特点为极高的运算速度和强大的渲染插件,使用在电影<毁灭战士>.<阿凡达>中,获得贸易展中最 ...

  5. sleep()方法和yield()方法有什么区别？

    两者都是Thread类的静态方法,定义如下 public static void sleep(long millis) throws InterruptedException public stati ...

  6. socket的同步异步的性能差别，以及listen的参数backlog

    先说listen的参数backlog,同步系统中分别设置为5,512,1024的跑分情况 跑分工具apache的ab,参数为:ab -n50000 -c300 backlog=5跑分结果 Reques ...

  7. Spring Boot学习笔记：项目开发中规范总结

    Spring Boot在企业开发中使用的很广泛,不同的企业有不同的开发规范和标准.但是有些标准都是一致的. 项目包结构 以下是一个项目常见的包结构 以上是一个项目的基本目录结构,不同的项目结构会有差异 ...

  8. maven打包证（支付）书问题

    要将证书文件后缀添加到resource文件夹内范围,添加打包文件后缀(include) 添加maven配置: <resources> <resource> <direct ...

  9. spring学习七 spring和dynamic project进行整合

    spring和web项目进行整合,其实就是在项目启动时,就创建spring容器,然后在servlet中使用spring容器进行开. 注意:为了页面可以访问到servlet,因此servlet必须放进t ...

  10. ServiceDesk Plus解析内容，简化工单管理