CSS中display:block的使用介绍
在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的使用介绍的更多相关文章
- CSS中display:block属性的作用
display:block可以理解为块,举个简单的例子!比如你做一个超链接,<li><a href="#">超链接</a></li> ...
- 区别CSS中display：box；inline；none以及HTML中 <frame> 标签<table> 标签的 frame 属性
区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...
- Css中display:inline-block用法详解
display:block就是将元素显示为块级元素 block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div&g ...
- css中line-height的理解_介绍line-height实际应用
一.line-height的定义 css中line-height行高是指文本行基线之间的距离,不同字体,基线位置不同.line-height只影响行内元素和其他行内内容,而不会直接影响块级元素,如果块 ...
- CSS之display:block与display:inline-block
1.<span style="display:block; border:red solid 1px; width:100px"></span> 行级元素是 ...
- css中display:none与visibility: hidden的区别
display: none; 隐藏元素,不占用其本来空间------对应元素显示用的是display:block; visibility: hidden:元素隐藏,占用其本来的页面空间-------- ...
- Css 中的 block，inline和inline-block概念和区别
1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现 ...
- css中的block与none
*{ display:none; } div{ display:block; } div 会正常显示粗来吗?不会 因为*代表所有元素,包括div的父级元素html,body 父级元素都不显示了,子元素 ...
- CSS 中 display:inline-block 属性使用详解
本文详细描述了display:inline-block的基础知识,产生的问题和解决方法以及其常见的应用场景,加深了对inline-block应用的进一步理解. 基础知识 display:inline- ...
随机推荐
- [LeetCode] 61. Rotate List 解题思路
Given a list, rotate the list to the right by k places, where k is non-negative. For example:Given 1 ...
- Linux内核数据包的发送传输
本文主要讲解了Linux内核数据包的传输流程,使用的内核的版本是2.6.32.27 为了方便理解,本文采用整体流程图加伪代码的方式从内核高层面上梳理了二层数据包发送传输的流程,希望可以对大家有所帮助. ...
- 小结OC中Retain cycle（循环引用）
retain cycle 的产生 说到retain cycle,首先要提一下Objective-C的内存管理机制. 作为C语言的超集,Objective-C延续了C语言中手动管理内存的方式,但是区别于 ...
- 为什么p标签不能嵌套div??
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- apue
#ifndef apue_h #define apue_h #define _POSIX_C_SOURCE 200809L #if defined(SOLARIS) /* Solaris 10 */ ...
- [原创作品] 对获取多层json值的封装
今天篇头不废话了,交流加群:164858883 在我们接收后端返回的json数据的时候,在数据缺失的时候,如果直接接收会导致致命错误的发生.可能有些同学会说通常都会有,不用判断直接获取也行.之前我也是 ...
- mysql Encryption and Compression Functions
Name Description AES_DECRYPT() Decrypt using AES AES_ENCRYPT() Encrypt using AES COMPRESS() Return r ...
- CentOS6.x升级MySQL版本号5.1到5.6
有一些虚拟机.云主机提供商仍然使用的是老版本号的安装套件. 预装的应用软件版本号非常低. 比方 techbrood.com 使用的云server,当中MySQL预装版本号为老版本号5.1.x. 而最新 ...
- 关于js中 document.body.scrollTop 不能返回正确值的原因
本来是为了通过document.body.scrollTop来获取浏览器垂直滚动条向下滚动的像素,但是不管滚动条在什么位置总是返回是0,造成这样的原因和html的头部声明有关,如果头部声明 为:< ...
- springmvc入门详解
首先,我们先写一个入门小案例,先熟悉一下springmvc是什么,了解一下springmvc的运行流程,对加强springmvc的深层理解有很大帮助 .第一步,创建一个maven项目: <?xm ...