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. UVA-1364.Knights of the Round Table 无向图BCC

    题目链接:https://vjudge.net/problem/UVA-1364 题意:有n个人参加会议,互相憎恨的人不能坐在相邻的位置,并且每个会议参加的人数必须是奇数,求有多少个人不能参加任何一个 ...

  2. JSR 规范目录

    JSR 规范目录 一.Servlet 规范 1.1 Servlet 2.x 规范 1.2 Servlet 3.x 规范 - 注解和异步请求规范 每天用心记录一点点.内容也许不重要,但习惯很重要!

  3. javascript的use strict(使用严格模式)

    上一篇博文学习变量声明带var和不带的区别.搜索相关的文章. 引出了另一个概念. "use strict" 使用严格模式 对于一个使用者而不是概念研究者,我觉得没有意义争论或者讨论 ...

  4. JDBC连接MySql，配置url报错

    使用JDBC连接MySql时出现:The server time zone value '�й���׼ʱ��' is unrecognized or represents more than one ...

  5. mybatis学习五 log4j

    1.  log4j(log for java)由 apache 推出的开源免费日志处理的类库.2. 为什么需要日志: 2.1 在项目中编写 System.out.println();输出到控制台,当项 ...

  6. canvas和图片互转

    原文:http://www.jb51.net/html5/160920.html 这么神奇么?先记录一下. 使用JavaScript将图片拷贝进画布 要想将图片放入画布里,我们使用canvas元素的d ...

  7. codeforces C. Functions again

    题意:给定了一个公式,让你找到一对(l,r),求解出公式给定的F值. 当时没有想到,我把(-1)^(i-l)看成(-1)^i,然后思路就完全错了.其实这道题是个简单的dp+最长连续子序列. O(n)求 ...

  8. LCA(最近公共祖先)模板

    Tarjan版本 /* gyt Live up to every day */ #pragma comment(linker,"/STACK:1024000000,1024000000&qu ...

  9. 《团队-爬取豆瓣电影TOP250-设计文档》

    搭建环境: 1.安装python3.4 2.安装pycharm集成开发环境 3.安装Git for Windows 4.安装python第三方包 bs4开发阶段: 1.团队成员申请并配置github账 ...

  10. BP神经网络测试MNIST记录

    约定: 所有的初始化权值范围,如下,就是说更换激活函数的情况,没有过大的调整初始权重. if(randomMode==1): numpy.random.seed(seedWih) self.wih = ...