在CSS的规定中，每个页面元素都有一个display的属性，用于确定这个元素的类型是行内元素，还是块级元素；

（1）行内元素：元素在一行内水平排列，依附于其他块级元素存在，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的；一般行内元素，只能是文本或嵌套行内元素，如常见元素<a>，<input>，<span>，<iframe>和元素样式的display:inline的都是行内元素；

a）设置宽度width和高度height无效，不过高度可以通过line-height来设置；

b）设置margin和padding，只有左右有效，上下都是无效的；

c）只能嵌套行内元素，不能嵌套块级元素，如<p>不能嵌套<div>；

d）行内元素一般是用于网站细节的实现；

（2）块级元素：每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外），两个块级元素连续编辑时，会在页面自动换行显示，块级元素一般可嵌套块级元素或行内元素；块级元素如<h1>，<div>，<form>，<ul>，<table>等等；

a）不在同一行，高度，边距等可设置；

b）宽度默认是它的容器的100%，除非设置一个宽度；

c）可嵌套块级元素或行内元素，有些只能嵌套行内元素，如<h1>，<h2>，<p>，<dt>等；

d）一般用于搭建网站架构、布局、承载内容；

（3）需要注意的：

a）块级元素与块级元素并列、行内元素与行内元素并列；如

<div> <h2></h2><p></p> </div>  正确

<div> <a href=”#”></a> <span></span> </div>  正确

<div> <h2></h2> <span></span> </div>  错误

b）例如，a元素是行内元素，要对它设置高度和宽度等属性，是没有用的，因此，可以通过设置display:block属性，将其强制转化为块级元素；

（4）例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>行内元素，块级元素</title>
</head>

<body>
	<div style="background-color:#99CC00; margin-top:20px; height:50px">div是块及元素，默认为block</div>

	<span style="background-color:#99CC00; margin-top:20px; margin-left:20px; height:50px">span是行内元素</span>

	<span style="display:block;background-color:#99CC00; margin-top:20px; margin-left:20px; height:50px">span加了block属性后，将其强制改为块级元素</span>

</body>
</html>

具体的行内元素或块元素，可查看：http://www.xinran001.com/bbs/thread-180-1-2.html

CSS中display:block的使用介绍的更多相关文章

  1. CSS中display:block属性的作用

    display:block可以理解为块,举个简单的例子!比如你做一个超链接,<li><a href="#">超链接</a></li> ...

  2. 区别CSS中display：box；inline；none以及HTML中 <frame> 标签<table> 标签的 frame 属性

    区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...

  3. Css中display:inline-block用法详解

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

  4. css中line-height的理解_介绍line-height实际应用

    一.line-height的定义 css中line-height行高是指文本行基线之间的距离,不同字体,基线位置不同.line-height只影响行内元素和其他行内内容,而不会直接影响块级元素,如果块 ...

  5. CSS之display:block与display:inline-block

    1.<span style="display:block; border:red solid 1px; width:100px"></span> 行级元素是 ...

  6. css中display:none与visibility: hidden的区别

    display: none; 隐藏元素,不占用其本来空间------对应元素显示用的是display:block; visibility: hidden:元素隐藏,占用其本来的页面空间-------- ...

  7. Css 中的 block，inline和inline-block概念和区别

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

  8. css中的block与none

    *{ display:none; } div{ display:block; } div 会正常显示粗来吗?不会 因为*代表所有元素,包括div的父级元素html,body 父级元素都不显示了,子元素 ...

  9. CSS 中 display:inline-block 属性使用详解

    本文详细描述了display:inline-block的基础知识,产生的问题和解决方法以及其常见的应用场景,加深了对inline-block应用的进一步理解. 基础知识 display:inline- ...

随机推荐

  1. [LeetCode] 11. Container With Most Water My Submissions Question 解题思路

    Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ai).  ...

  2. Java设计模式之简单工厂、工厂方法和抽象工厂

    在前面的学习中(参见前面的博客),我们学到了很多OO原则: 封装变化 多用组合,少用继承 针对接口/超类编程,不针对实现编程 松耦合 开闭原则 让我们从一个简单的类开始,看看如何将之改造成符合OO原则 ...

  3. java，大数据批量插入、更新

    public void exec(Connection conn){ try { conn.setAutoCommit(false); Long beginTime = System.currentT ...

  4. WP独立文件资源字典

    有时候,开发者想把资源字典定义在单独的XAML文件中,在网上找了找,没找到比较详细的,自己弄了许久. 1. 新建xaml资源字典文件,如在根目录下“ResourceDictionary1.xaml”, ...

  5. Showing 2 changed files with 3 additions and 3 deletions.

    4  lib/matplotlib/__init__.py View   @@ -126,9 +126,9 @@ def compare_versions(a, b):     else: ...

  6. 文件上传插件Uploadify在Struts2中的应用，完整详细实例

    —>最近由于项目需要使用到一个上传插件,在网上发现uploadify挺不错,所以决定使用它,但是官网文档和例子是php的,而项目是SSI框架的,所以自己对uploadify在struts2中的使 ...

  7. struts2.1.3之后使用自定义Filter

    struts2中 ActionContextCleanUp, StrutsPrepareAndExecuteFilter, StrutsPrepareFilter,StrutsExecuteFilte ...

  8. jquery 中ajax的参数

    url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...

  9. css3新增的背景属性

    有时候我们需要往边框文字上添加背景与背景图片的时候就有用处了 background的css3有两个新增属性分别是background-clip与background-origin;背景-修剪与背景起点 ...

  10. 详细介绍ASP.NET页面重定向方法

    ASP.NET中页面重定向的使用的很频繁,实现方法也有不同,自己也试过几种,现在总结一下. 一.Transfer Execute Redirect重定向方法介绍 1.Server.Transfer方法 ...