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. Ubuntu解决Sublime Text 2安装GBK Encoding Support插件仍然乱码

    Ubuntu 12.04 32位下,为Sublime Text 2安装Package Control: 1. 用Ctrl+~打开控制台,输入 import urllib2,os; pf='Packag ...

  2. 【ASP.NET MVC】"[A]System.Web.WebPages.Razor.Configuration.HostSection 无法强制转换为 ..."的解决办法

    1.错误页面: “/”应用程序中的服务器错误. [A]System.Web.WebPages.Razor.Configuration.HostSection 无法强制转换为 [B]System.Web ...

  3. 反射小应用之DataTable和List<T>互操作

    在程序中,往往会遇到一些小情况,就是数据库取出来的时候为了方便直接将数据通过存储在DataSet或DataTable中,这样做的一个后果是在日后的的对数据进行”细“操作时,就发现它可能没有List&l ...

  4. 查看nginx编译安装

    大家是否遇到过去了新公司,公司内的LAMP,LNMP等所有的环境都是配置好的(已经在提供服务了),公司又没有留下部署文档,甚至安装LAMP,LAMP等环境的人已经和你交接完离职了,那么线上服务器(la ...

  5. 应用emailAutoComplete.js来自动显示邮箱后缀列表

    我们经常有邮箱的人都特别清楚,在输入我们的邮箱时,会自动显示出邮箱后缀列表,这个用户体验是不错的. 操作据悉——当我们输入文字时,会自动有个邮箱后缀名的列表.      而我这边的代码是,应用jque ...

  6. ECSHOP v2.5数据库字典

    ECSHOP v2.5 数据库字典 ECSHOP R&D Team 2007年4月16日 商品相关表 商品分类表 category 此表用来维护商品分类信息 字段名 字段描述 字段类型 默认值 ...

  7. hdu 3038 How Many Answers Are Wrong（种类并查集）2009 Multi-University Training Contest 13

    了解了种类并查集,同时还知道了一个小技巧,这道题就比较容易了. 其实这是我碰到的第一道种类并查集,实在不会,只好看着别人的代码写.最后半懂不懂的写完了.然后又和别人的代码进行比较,还是不懂,但还是交了 ...

  8. 使用HttpURLConnection下载文件时出现 java.io.FileNotFoundException彻底解决办法

    使用HttpURLConnection下载文件时经常会出现 java.io.FileNotFoundException文件找不到异常,下面介绍下解决办法 首先设置tomcat对get数据的编码:con ...

  9. 关于ThinkPHP中Session不能夸模块/控制器使用的问题-网上的答案我做个补充

    1,确保c:/windows目录下有php.ini文件2,修改php.ini中的session.auto_start = 0 为 session.auto_start = 1  //设置自动开启ses ...

  10. 手势解锁自定义View

    package com.rxx.view; import java.util.ArrayList; import java.util.List; import java.util.Timer; imp ...