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. WebView线性进度条

    参考:http://www.cnblogs.com/hubli/p/4835549.html APP会跳转网页时候,请参考:http://blog.csdn.net/raphael55/article ...

  2. NSIS 2.0界面快速入门

    NSIS 2.0 版本支持定制的用户界面.所谓的 Modern UI(下称 MUI) 就是一种模仿最新的 Windows 界面风格的界面系统.MUI 改变了 NSIS 脚本的编写习惯,它使用 NSIS ...

  3. LeetCode：Sort List

    Title: Sort a linked list in O(n log n) time using constant space complexity. 思路:考虑快速排序和归并排序,但是我的快速排 ...

  4. FU-A分包方式，以及从RTP包里面得到H.264数据和AAC数据的方法。。

    [原创] RFC3984是H.264的baseline码流在RTP方式下传输的规范,这里只讨论FU-A分包方式,以及从RTP包里面得到H.264数据和AAC数据的方法. 1.单个NAL包单元 12字节 ...

  5. UI篇--Android中3种方法实现back键动作

    方法一:重写onBackPressed方法 @Override public void onBackPressed() { // do something what you want super.on ...

  6. 24、AR技术

    什么是AR 在介绍增强现实(AR)之前,需要先说说虚拟现实(VR) 虚拟现实是从英文Virtual Reality 一词翻译过来的,简称VR.VR 技术是采用以计算机技术为核心的技术,生成逼真的视.听 ...

  7. CSS常用十大技巧

    技巧1  去掉网页超链接的下划线 去掉网页超链接的下划线,在<head>与</head>之间相应的位置输入以下代码. <style type="text/css ...

  8. Web Notification

    在OS X 10.8 Mountain Lion系统上,通过Safari访问的页面能够发送通知到系统右边栏通知中心,通知(Notification)是通过WebKit Notification 对象发 ...

  9. 看仪表盘——validation

    先试想一下,对于一个简单的二分类问题,我们如何选择合适的算法? 我们有许许多多的H,如何选择出最为合适的算法? 最合理的方法是:对于每一个H,我们选择出Eout最小的g,然后对于各个g,再选择Eout ...

  10. bzoj 3275 Number（最小割）

    [题意] 给定n个数,要求选出一些数满足 1.存在c,a*a+b*b=c*c 2.gcd(a,b)=1  使得和最大. [思路] 二分图的最大权独立集(可以这么叫么QAQ 先拆点,对于不满足条件的两个 ...