根据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. UltraISO安装windows10时0x8007000D错误解决办法

    进入安装界面之后提示错误:windows无法打开所需的文件 F:\Sources\install.wim.请确保安装所需的所有文件可用,并重新启动安装.错误代码:0x8007000D 原因: 肯定是i ...

  2. Spring生态研习【五】：Springboot中bean的条件注入

    在springboot中,开发的确变的简单了很多,但是,开发者现在希望开发傻瓜式的方便搞定项目中的各种奇怪的需求最好了,不用烧脑,本来程序猿的生活就是枯燥的,不要再给自己添加更多的烦恼. 今天,就为了 ...

  3. Data Flow ORB-SLAM for Real-Time Performance on Embedded GPU Boards

    张宁 Data Flow ORB-SLAM for Real-Time Performance on Embedded GPU Boards 数据流ORB-SLAM可在嵌入式GPU板上实现实时性能链接 ...

  4. 泡泡一分钟：Collaborative Mapping with Pose Uncertainties using different Radio Frequencies and Communication Modules

    张宁 Collaborative Mapping with Pose Uncertainties using different Radio Frequencies and Communication ...

  5. （十二）springboot中shiro的使用

    一.引入maven配置 <dependency>     <groupId>org.apache.shiro</groupId>     <artifactI ...

  6. 【SQL骚操作】SqlServer数据库表生成C# Model实体类SQL语句

    已知现有表T1 想快速获取cs类结构 /// <summary> /// T1 /// </summary> public class T1 { /// <summary ...

  7. Centos7根据yum源安装指定版本docker

    yum install -y yum-utils device-mapper-persistent-data lvm2 yum-config-manager --add-repo https://mi ...

  8. [LeetCode] 929. Unique Email Addresses 唯一的电邮地址

    Every email consists of a local name and a domain name, separated by the @ sign. For example, in ali ...

  9. Swarm 集群并用 Portainer 管理

    https://blog.csdn.net/zhrq95/article/details/79430284 使用docker-proxy代理服务(所有节点): docker pull docker.i ...

  10. 基础自动化部署搭建过程【Jenkins】

    测试环境搭建 为了快速搭建一套PHP测试环境我决定用laradock了,虽然文件很多,但是里面封装的东西也是比较全的,后期开发不知道会用到什么技术,就决定先用这个,随时可以启动用得到的服务.larad ...