1. 根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。

  2.  

    块级元素：

    动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；

    行内元素：

    自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。

    例子：

    链接 a 元素，在默认情况下是是“行内元素”，因此对a元素设置高度、宽度等属性，都是无效的。而比如div，p，li，img等默认情况下的display属性值就是“block”。所以对于链接a来说只能这样：display:block;强制将它改成块元素。看完概念看代码：

     <!DOCTYPE html>
    
 <html>
    
 <head>
    
     <meta charset="utf-8">
    
     <title></title>
    
     <style>
    
         span,
    
         div {
    
             margin-bottom: 5px;
    
             margin-left: 5px;
    
             height: 50Px;
    
         }
    
     </style>
    
 </head>

 <body>
    
     <div style="background-color:#F60">Div默认为 block</div>
    
     <span style="display:block;">加了block属性</span>
    
     <span>没加block属性</span>
    
 </body>

 </html>

Display:Block的更多相关文章

  1. display:inline; display:block;

    block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...

  2. display:block 不起作用

    jquery中$("#Main").css("display","none"); $("#Day").css('disp ...

  3. display:block、display:inline与displayinline:block的概念和区别

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

  4. display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px;

    总的来说:这是CSS3.0的对于文章段P容器的定义方法语句! display:block这个样式,只定义了P容器为一个块; 后面四句是CSS3中的样式定义方法: -webkit-margin-befo ...

  5. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

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

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

  7. display:block; 块级元素。<a>,<span>标签设置宽度和高度

    display:block;是让对象成为块级元素(比如a,span等) 转化后 可以对a或者span标签进行width和height设置,否则设置不了 display有很多对象,具体可以参考http: ...

  8. display:inline 跟 display:block 跟 display:inline-block区别

    我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...

  9. CSS中display:block的使用介绍

    在CSS的规定中,每个页面元素都有一个display的属性,用于确定这个元素的类型是行内元素,还是块级元素: (1)行内元素:元素在一行内水平排列,依附于其他块级元素存在,因此,对行内元素设置高度.宽 ...

随机推荐

  1. 给你一个承诺 - 玩转 AngularJS 的 Promise（转）

    在谈论Promise之前我们要了解一下一些额外的知识:我们知道JavaScript语言的执行环境是“单线程”,所谓单线程,就是一次只能够执行一个任务,如果有多个任务的话就要排队,前面一个任务完成后才可 ...

  2. 【转】Linux 之 /etc/profile、~/.bash_profile 等几个文件的执行过程

    原文网址:http://blog.csdn.net/ithomer/article/details/6322892 在登录Linux时要执行文件的过程如下:在刚登录Linux时,首先启动 /etc/p ...

  3. 图片的android:src 及android:background共存

    ---恢复内容开始--- 需求:给ImageView添加背景色 效果: 实现分析: 1.目录结构: 代码实现: 1.activity_main.xml <merge xmlns:android= ...

  4. [FIX BUG]获取theme中自定义textColor时报的错误

    我在Fragment中inflate它都可以,可是一旦使用ListView来inflate就会报错,说找不到我自定义的attr!研究了半天发现是我的inflate的context有问题: view = ...

  5. rpm 命令参数使用详解

    RPM是RedHat Package Manager(RedHat软件包管理工具)类似Windows里面的“添加/删除程序” rpm 执行安装包 二进制包(Binary)以及源代码包(Source)两 ...

  6. 【转】u盘不显示盘符

    转自http://jingyan.baidu.com/article/f3ad7d0fd0793e09c3345b31.html 我的情况: 电脑只有一个c盘,插入u盘,u盘的盘符为d. 弹出u盘,但 ...

  7. 深度学习String、StringBuffer、StringBuilder

    相信String这个类是Java中使用得最频繁的类之一,并且又是各大公司面试喜欢问到的地方,今天就来和大家一起学习一下String.StringBuilder和StringBuffer这几个类,分析它 ...

  8. G-sensor驱动分析

    重力传感器代码分析 重力传感器驱动的功能,主要是向HAL层提供IOCTRL接口,并通过input设备上报数据.芯片实际数据的读取是采用i2c协议读取原始数据,并且作为i2c设备挂载在系统上工作的. 1 ...

  9. mysql操作时遇到的小问题

    mysql数据库在程序中执行sql语句时,或者在执行sql时,数据库表可能会有一些特殊的字符,比如说#,.等,这样在执行时 可能会遇到问题 如以下的表名,backup_2014.2.22, 这个表在查 ...

  10. Chapter4：表达式

    左值和右值 当一个对象被用作右值的时候,用的是对象的值(内容),当对象被用作左值的时候,用的是对象的身份(在内存中的位置). 一个重要的原则是需要右值的地方可以用左值来代替,但是不能把右值当作左值使用 ...