在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. RMI入门教程

    一.什么是RMI Java远程方法调用,即Java RMI(Java Remote Method Invocation)是Java编程语言里,一种用于实现远程过程调用的应用程序编程接口.它使客户机上运 ...

  2. HDU 2187 A sequence of numbers

    题目连接  http://acm.hdu.edu.cn/showproblem.php?pid=2817 题意: 给定三个数,判断是等差数列还是等比数列,然后输出第k项. 做法:直接判断即可 #inc ...

  3. CoreText学习（一）Base Objects of Core Text

    最近要做一个读入Word,PDF格式等的文件并且加以编辑的程序,本来以为使用Text Kit结合Text View来打开doc文件是完全没问题的,结果用了各种方法打开要么是数据是nil,要么打开的文字 ...

  4. 微软在线测试题String reorder

    问题描述: Time Limit: 10000msCase Time Limit: 1000msMemory Limit: 256MB DescriptionFor this question, yo ...

  5. IntelliJ IDEA创建web项目及异常问题解决

    IDEA配置Tomcat: 1.下载Tomcat,本次使用的是apache-tomcat-6.0.43 2.IDEA配置Tomcat 在idea中的Settings(Ctrl+Alt+s)(或者点击图 ...

  6. Java继承与清理

    [程序实例] import java.util.*; class Characteristic { private String s; Characteristic(String s) { this. ...

  7. RequireJS进阶（一）

    为了应对日益复杂,大规模的JavaScript开发.我们化整为零,化繁为简.将复杂的逻辑划分一个个小单元,各个击破.这时一个项目可能会有几十个甚至上百个JS文件,每个文件为一个模块单元.如果上线时都是 ...

  8. Java_io体系之PipedWriter、PipedReader简介、走进源码及示例——14

    Java_io体系之PipedWriter.PipedReader简介.走进源码及示例——14 ——管道字符输出流.必须建立在管道输入流之上.所以先介绍管道字符输出流.可以先看示例或者总结.总结写的有 ...

  9. codeforce 437B The Child and Set

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...

  10. slide from one widget to another

    int main(int argc, char **argv) { QApplication app(argc, argv); QWidget panel; QVBoxLayout *l = new ...