根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。

块级元素：

占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；

行内元素：

自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。

例子：
      链接 a 元素，在默认情况下是是“行内元素”，因此对a元素设置高度、宽度等属性，都是无效的。而比如div，p，li，img等默认情况下的display属性值就是“block”。所以对于链接a来说只能这样：display:block;强制将它改成块元素。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        span, div {

            background-color: #F60;

            margin-bottom: 5px;

            margin-left: 5px;

            height: 50Px;

        }

    </style>

</head>

<body>

<div style="background-color:#F60">Div默认为 block</div>

<span style="display:block;">加了block属性</span>

<span style="display:block;">加了block属性</span>

<span style="display:block;">加了block属性</span>

<span>没加block属性</span>

<span>没加block属性</span>

<span>没加block属性</span>

</body>

</html>

效果图：

css display block 和 inline的更多相关文章

  1. DIV CSS display(block,inline,none)的属性教程

    display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...

  2. display:block、inline、inline-block的区别及应用案例

    A.display:block就是将元素显示为块级元素. block元素的特点是: 1.总是在新行上开始: 2.高度,行高以及顶和底边距都可控制: 3.宽度缺省是它的容器的100%,除非设定一个宽度; ...

  3. css(二) block，inline和inline-block概念和区别

    转: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-leve ...

  4. HTML/CSS：block，inline和inline-block概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  5. CSS中block，inline和block-inline的区别（转载）

    http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level e ...

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

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

  7. display:block 不起作用

    jquery中$("#Main").css("display","none"); $("#Day").css('disp ...

  8. [CSS3] CSS Display Property: Block, Inline-Block, and Inline

    Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...

  9. CSS 基础 例子 display属性：block、inline和inline-block的区别

    HTML中块级元素(block)和行级元素(inline):比如div就是常见的块级元素,span就是常见的行级元素. 可以通过css的display属性来设置一个元素到底是块级,还是行级元素:dis ...

随机推荐

  1. javafx这些学会后，开发就不难了，往tablecloumn列中添加按钮，修改javafx中tableview中tablecell中的值，修改完回车表示保存到内存中

    javafx开发过程中遇见难题,往tablecloumn列中添加按钮 想了很久的方法,也配有办法判断每行中有数据的地方添加按钮set bank_caozuo.setCellFactory((col)- ...

  2. iOS App转让、转移、迁移(App transfer) -- 仅需四步

    当需要将某个 App 出售给其他开发人员,或想要将其移至其他 App Store Connect 组织,则您需要转让该 App.您无需将 App 从 App Store 下架,即可将其所有权转让给另一 ...

  3. xcode简单教程

    1.使用Xcode软件.Xcode是一个苹果系统上的集成开发环境(IDE),就是说用Xcode就能编写C语言程序,并编译运行.也能开发ios程序等,是一种软件.在windows上类似这种能编c语言的还 ...

  4. [ ceph ] 基本介绍及硬件配置

    1. Ceph简介 所有的 Ceph 存储集群的部署都始于一个个 Ceph节点.网络和 Ceph存储集群.Ceph 存储集群至少需要一个 Ceph Monitor.一个 Manager和一个Ceph ...

  5. [转]Ubuntu18.04 主题美化以及常用软件

    原文地址:https://www.jianshu.com/p/7d153a484f72

  6. 破解FTP登录密码的几种方法

    工具 Hydra X-Hydra Medusa Ncrack Patator Metasploit Hydra hydra -L /root/Desktop/user.txt -P /root/Des ...

  7. csu 1978: LXX的图论题

    1978: LXX的图论题 Submit Page   Summary   Time Limit: 1 Sec     Memory Limit: 128 Mb     Submitted: 71   ...

  8. java对象池化技术

    https://blog.csdn.net/tiane5hao/article/details/85957840 文章目录 先写一个简单通用的对象池 通过上面的通用池实现jedis连接池 连接池测试 ...

  9. 超级简单POI导出Excel实战

    在一般的生产管理系统都会将数据通过页面导出到Excel,这里以Java为例通过第三方开源poi进行对Excel的操作,具体操作如下 1.引入jar包依赖 这里我以maven的方式引入jar包,具体依赖 ...

  10. 怎么删除json 键值对

    var obj = { 'id': 1, 'name': 2 } delete obj.id delete obj['id'] console.log(obj) //{ 'name': 2 }