在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. Jmeter接口测试-badboy录制脚本（二）

    1.脚本录制,采用badboy进行录制,操作步骤很简单 2.badboy简介: Badboy是一款免费WEB自动化测试工具. 官方下载地址:http://www.badboy.com.au badbo ...

  2. android 几种发送短信的方法

    android中发送短信很简单, 首先要在Mainfest.xml中加入所需要的权限: ? 1 2 3 <uses-permission android:name="android.p ...

  3. Web服务的体系架构

    Web简介: Web是WWW(World Wide Web)的简称,又称为万维网,是建立在客户机/服务器上的,以HTML语言和HTML协议为基础,提供面向Internet服务的,有一致用户界面的一种信 ...

  4. Spring Data Redis—Pub/Sub（附Web项目源码）

    一.发布和订阅机制 当一个客户端通过 PUBLISH 命令向订阅者发送信息的时候,我们称这个客户端为发布者(publisher). 而当一个客户端使用 SUBSCRIBE 或者 PSUBSCRIBE ...

  5. [React Testing] Setting up dependencies && Running tests

    To write tests for our React code, we need to first install some libraries for running tests and wri ...

  6. FIR滤波器设计

    FIR滤波器的优越性: 相位对应为严格的线性,不存在延迟失真,仅仅有固定的时间延迟: 因为不存在稳定性问题,设计相对简单: 仅仅包括实数算法,不涉及复数算法,不须要递推运算,长度为M,阶数为M-1,计 ...

  7. 设计模式14---设计模式之命令模式（Command）（行为型）

    1.场景模拟 请用软件模拟开机过程 按下启动按钮 然后电源供电 主板开始加电自检 BIOS依次寻找其他设备的BIOS并且让他们初始化自检 开始检测CPU,内存,光盘,硬盘,光驱,串口,并口,软驱即插即 ...

  8. hdu 1042

    貌似之前也写过这个题目的解题报告...老了,记性不好 从贴一遍吧! 代码理解很容易 AC代码: #include <iostream> #include <stdio.h> # ...

  9. jQuery animate easing使用方法

    从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...

  10. javaScrip中的“？”

    例如window.location.href="./user/userUpdate?id="+id; 在这里“?”是传入参数或是带个参数id,这样就可以获得到主键了. String ...