zoukankan      html  css  js  c++  java
  • Display:Block 详细用法(转)

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


     块级元素

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

     行内元素

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

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

    看完概念看代码:

    复制代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <style>
    span,div{background-color:#F60;margin-bottom:5px;margin-left:5px;height:50Px;}
    </style>

    <div style=" padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">>Div默认为 block</div>
    <span style="display:block;">加了block属性</span>
    <span style="display:block;">加了block属性</span>
    <span style="display:block;">加了block属性</span>

    <span>没加block属性</span>
    <span>没加block属性</span>
    <span>没加block属性</span>
    复制代码
  • 相关阅读:
    Ionic app 通知在Moto 360 Watch上显示通知(2)
    Ionic app 通知在Moto 360 Watch上显示通知(1)
    Ionic App ActionSheet布局问题
    Ionic 图片延时加载
    Ionic app 上传图片之webApi接口
    Ionic app升级插件开发
    Ionic 添加java原生代码 报support.v4不存在问题
    Ionic 中badge的应用
    Java 期末复习提纲
    win10 + VS2015 + EF6 + MySQL
  • 原文地址:https://www.cnblogs.com/fatfatdachao/p/4084412.html
Copyright © 2011-2022 走看看