根据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. 前端文章索引：HTML+CSS+JS

    1 HTML 1.1 HTML5 HTML5 – 1.基础 HTML5 – 2.新元素 HTML5 – 3.加强版ol HTML5 – 4.canvas 2 CSS 2.1 CSS3 CSS3–1.c ...

  2. nginx安装和命令

    1. nginx安装 1.1 mac上安装 brew search nginx brew install nginx 1.2 windows上安装 下载nginx.zip,解压到D盘,发送快捷方式到桌 ...

  3. postman 测试Excel文件导入导出功能

    1.导入的测试方法 选择form-data,key值填写方法对应的参数,选择File,Value处上传文件即可. 2. 导出的测试方法 在导出文件的时候,响应结果是乱码,然后在测试的时候选择下载,下载 ...

  4. Docker---数据卷Volume的简单使用（使用DockerFile实现）

    DockerFile是什么?Dockerfile是由一系列命令和参数构成的脚本,这些命令应用于基础镜像并最终创建一个新的镜像.它们简化了从头到尾的流程并极大的简化了部署工作.Dockerfile从FR ...

  5. 机器学习中什么是端到端的学习（end-to-end learning）？

    相对于深度学习,传统机器学习的流程往往由多个独立的模块组成,比如在一个典型的自然语言处理(Natural Language Processing)问题中,包括分词.词性标注.句法分析.语义分析等多个独 ...

  6. SQLite数据库简介和使用

    一.Sqlite简介: SQLite (http://www.sqlite.org/),是一款轻型的数据库,是遵守ACID的关联式数据库管理系统,它的设计目标是嵌入式的,而且目前已经在很多嵌入式产品中 ...

  7. 手写MVC框架（一）-再出发

    背景 前段时间把之前写的DAO框架(手写DAO框架(一)-从“1”开始)整理了一下,重构了一版.整理过程中看以前写的代码,只是为了了解实现,只是为了实现,代码写的有点粗糙.既然已经整理了DAO框架,索 ...

  8. 【洛谷】P1308 统计单词数-全AC题解（易理解

    弟弟的混乱代码(易理解 大概 思路: 循环b(被找的字符串),遇空格比较两空格间的长度是否与a(需要查找的字符)相等:不相等继续循环:相等比较内容是否相同(倒数比较,不一样直接退出 ,直到比较到第一个 ...

  9. C复习 （C premier plus和C和指针）

  10. 深度学习-强化学习(RL)概述笔记

    强化学习(Reinforcement Learning)简介 强化学习是机器学习中的一个领域,强调如何基于环境而行动,以取得最大化的预期利益.其灵感来源于心理学中的行为主义理论,即有机体如何在环境给予 ...