display:block的作用与用法

display:block可以理解为块。用个简单的例子给你!比如你做一个超链接,
  • 超链接

  • 当你鼠标移过去文字的时候,超链接有效果!
    而当我把样式这样设置:
    li a{width:100px;height:100px; display:block; color:red; text-decoration:none;}
    鼠标移到文字周围100*100的地方,就有超链接效果了,就是把100*100做为一块来的超链接!

    display 的参数列表
    display版本:CSS1/CSS2  兼容性:IE4+ NS4+ 继承性:无


    语法:

    display : block | none | inline | compact | marker |
    inline-table | list-item | run-in | table |table-caption |
    table-cell | table-column | table-column-group |
    table-footer-group | table-header-group | table-row | table-row-group

    参数:

    block :  CSS1 块对象的默认值。用该值为对象之后添加新行
    none :  CSS1 隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
    inline :  CSS1 内联对象的默认值。用该值将从对象中删除行
    compact :  CSS2 分配对象为块对象或基于内容之上的内联对象
    marker :  CSS2 指定内容在容器对象之前或之后。要使用此参数,对象必须和:after及:before 伪元素一起使用
    inline-table :  CSS2 将表格显示为无前后换行的内联对象或内联容器
    list-item :  CSS1 将块对象指定为列表项目。并可以添加可选项目标志
    run-in :  CSS2 分配对象为块对象或基于内容之上的内联对象
    table :  CSS2 将对象作为块元素级的表格显示
    table-caption :  CSS2 将对象作为表格标题显示
    table-cell :  CSS2 将对象作为表格单元格显示
    table-column :  CSS2 将对象作为表格列显示
    table-column-group :  CSS2 将对象作为表格列组显示
    table-header-group :  CSS2 将对象作为表格标题组显示
    table-footer-group :  CSS2 将对象作为表格脚注组显示
    table-row :  CSS2 将对象作为表格行显示
    table-row-group :  CSS2 将对象作为表格行组显示

    说明:

    设置或检索对象是否及如何显示。
    目前 IE5.5仅支持以上CSS1的参数。
    本文链接:http://www.cssyoo.com/a/div_css/20121022/css_16.html

    你可能感兴趣的:(Web前端,div,css)