css display block 和 inline
根据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的更多相关文章
- DIV CSS display(block,inline,none)的属性教程
display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
- display:block、inline、inline-block的区别及应用案例
A.display:block就是将元素显示为块级元素. block元素的特点是: 1.总是在新行上开始: 2.高度,行高以及顶和底边距都可控制: 3.宽度缺省是它的容器的100%,除非设定一个宽度; ...
- css(二) block，inline和inline-block概念和区别
转: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-leve ...
- HTML/CSS：block，inline和inline-block概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- CSS中block，inline和block-inline的区别（转载）
http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level e ...
- CSS——display（Block none inline等）属性的用法
在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...
- display:block 不起作用
jquery中$("#Main").css("display","none"); $("#Day").css('disp ...
- [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 ...
- CSS 基础 例子 display属性：block、inline和inline-block的区别
HTML中块级元素(block)和行级元素(inline):比如div就是常见的块级元素,span就是常见的行级元素. 可以通过css的display属性来设置一个元素到底是块级,还是行级元素:dis ...
随机推荐
- 运维笔记--给正在运行的Docker容器动态绑定卷组(挂载指定目录)
场景描述: 操作系统: ubuntu16.04, docker版本: Docker version 19.03.1 系统运行一段时间后,该服务器上有一个运行中docker容器,需要在容器里边挂载本地服 ...
- Mac OSX系统中Hadoop / Hive 与 spark 的安装与配置 环境搭建 记录
Mac OSX系统中Hadoop / Hive 与 spark 的安装与配置 环境搭建 记录 Hadoop 2.6 的安装与配置(伪分布式) 下载并解压缩 配置 .bash_profile : ...
- 深入解读阿里云Redis开发规范
Key命名设计:可读性.可管理性.简介性 规范建议使用冒号即:进行分割拼接,因为很多Redis客户端是根据冒号分类的.比如有几个Key:apps:app:1.apps:app:2和apps:app:3 ...
- shell基础知识之数组
数组允许脚本利用索引将数据集合保存为独立的条目.Bash支持普通数组和关联数组,前者 使用整数作为数组索引,后者使用字符串作为数组索引.当数据以数字顺序组织的时候,应该使 用普通数组,例如一组连续的迭 ...
- ["Visual Studio快捷键" ,"Vs","IDEA快捷键"]
描述说明 描述 说明 ↑ 方向键.上 ↓ 方向键.下 ← 方向键.左 → 方向键.右 快捷键大比拼 描述 Visual Studio 快捷键 IDEA快捷键 VisualStudio学名 IDEA学名 ...
- 【翻译】Flink Table Api & SQL — Hive —— Hive 函数
本文翻译自官网:Hive Functions https://ci.apache.org/projects/flink/flink-docs-release-1.9/dev/table/hive/h ...
- FastJson序列化时过滤字段(属性)的方法总结
FastJson序列化时(即转成JSON字符串时),可以过滤掉部分字段,或者只保留部分字段,方法有很多,下面举一些常用的方法. 方法一.FastJson的注解 @JSONField(serialize ...
- SQL经典实例笔记
目录 前言 第一章:检索记录 在Where字句中使用别名 前言 本文是根据我阅读的书籍SQL经典实例而写的笔记,只记载我觉得有价值的内容 第一章:检索记录 在Where字句中使用别名 --错误实例 s ...
- c# .net 4.5.2 asp.net mvc 使用hangfire
一定要有hangfire数据库,否则hangfire会报错. (obStorage.Current property value has not been initialized. You must ...
- 【maven学习】构建maven web项目
Maven Web应用 创建Web应用程序 要创建一个简单的java web应用程序,我们将使用Maven的原型 - web应用插件.因此,让我们打开命令控制台,进入到C: MVN目录并执行以下命令m ...