在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. 警告: 隐式声明与内建函数‘exit’不兼容 [默认启用]

    警告: 隐式声明与内建函数‘exit’不兼容 [默认启用] 最近在学习linux下的多任务编程,用到exit等函数时,经常出现该警告,查找资料后发现,原因其实很简单,没有把stdlib.h头文件包含进 ...

  2. wpf在异步中给前台赋值

    wpf,新建异步方法: Thread newThread = new Thread(new ParameterizedThreadStart(GetResult)); newThread.Start( ...

  3. ORACLE CASE WHEN 及 SELECT CASE WHEN的使用方法

    CASE 语句 CASE selector   WHEN value1 THEN action1;   WHEN value2 THEN action2;   WHEN value3 THEN act ...

  4. 详解C++ friend关键字

    1. 为什么要使用友元? 通常对于普通函数来说,要访问类的保护成员是不可能的,如果想这么做那么必须把类的成员都生命成为 public( 共用的) ,然而这做带来的问题遍是任何外部函数都可以毫无约束的访 ...

  5. Android Studio设置Eclipse风格快捷键

    Android Studio的1.1.0版本都发布了,ADT也不会再更新了,童鞋们还有理由不换嘛,不要死守着Eclipse了,Android Studio是你唯一的也是最好的选择.什么?用Eclips ...

  6. Linux常用命令之 查找命令 find（一）

    我们都知道在Linux中有着上千条的命令,而常用命令不过百条. 我们也知道在Linux里面“一切皆文件”,那么如何能够快速的找到你想要找的东西就显得尤为重要. find是Linux里面最重要的命令之一 ...

  7. python 下的数据结构与算法---2:大O符号与常用算法和数据结构的复杂度速查表

    目录: 一:大O记法 二:各函数高阶比较 三:常用算法和数据结构的复杂度速查表 四:常见的logn是怎么来的 一:大O记法 算法复杂度记法有很多种,其中最常用的就是Big O notation(大O记 ...

  8. sql server代理中作业执行SSIS包失败

    RT,执行失败了,总是只提示一句“以xxxx用户身份执行失败”,很难找原因. 引用 http://bbs.csdn.net/topics/300059148 Sql2005如何用dtexec运行ssi ...

  9. 网络NSURLSession

    简单下载图片 dispatch_queue_t queue =dispatch_queue_create(NULL, DISPATCH_QUEUE_CONCURRENT); dispatch_asyn ...

  10. C#SaveFileDialog的使用

    SaveFileDialog sfd = new SaveFileDialog(); //默认打开的路径 sfd.InitialDirectory = "C:\\Users\\Adminis ...