51.关于display属性的一点点总结，看代码

CSS

.display{
                border: 1px solid;
                margin-bottom: 3px;
            }

            .inline-block{
                display: inline-block;
                height: 100px;padding: 10px;
                padding: 10px;margin: 10px;
                margin-top: 20px;
            }
            .inline{
                display: inline;
                height: 100px;padding: 10px;margin: 10px;
            }
            .table{
                display: table;
                border: none;
                border-top: 1px solid;
                border-left: 1px solid;
            }
            .header-group{
                display: table-header-group;
            }
            .row-group{
                background: #EEEEEE;
                display: table-row-group;
            }

            .cell{
                width: 88px;
                display: table-cell;
                padding: 3px 15px;
                border-bottom: 1px solid;
                border-right: 1px solid;
                text-align: center;
                color: #777777;
                font-family: arial;
                font-size: 20px;
            }

HTML

<div class="display inline-block">
            inline-block
        </div>
        <div class="display inline">
            block
        </div>
        <div class="display block">
            block
        </div>
        <div class="display table">
            <div class="header-group">
                <div class="cell">  cell</div>
                <div class="cell">  cell</div>
                <div class="cell">  cell</div>
                <div class="cell">  cell</div>
                <div class="cell">  cell</div>
                <div class="cell">  cell</div>
            </div>
            <div class="row-group">
                <div class="cell">  cell</div>
                <div class="cell">  cell</div>
                <div class="cell">  cell</div>
                <div class="cell">  cell</div>
                <div class="cell">  cell</div>
                <div class="cell">  cell</div>
            </div>

        </div>

时间： 2024-11-05 16:10:10

51.关于display属性的一点点总结，看代码的相关文章

深入理解和应用display属性（二）

四.inline-block 此类元素是inline + block的合体 1) margin和padding都有效:width和height都有效: .inline{ display: inline-block; width: 200px; background: red; margin: 10px; padding: 10px; } <div class="inline"><a>inline01</a></div> <div c

标签导航——display属性

定义和用法 display 属性规定元素应该生成的框的类型. 说明这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构.对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的. 注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了. 默认值: inline 继承性: no 版本: CSS1

CSS display 属性

HTML DOM display 属性

定义和用法 display 属性设置元素如何显示. 语法: Object.style.display=value 可能的值实例本例设置不显示元素: 1 <html> 2 <head> 3 <script type="text/javascript"> 4 function removeElement() 5 { 6 document.getElementById("p1").style.display="none&q

CSS中display属性：block、inline和inline-block的区别

最近写HTML遇到一个问题:我想设置span的宽度和高度,但是在IE9和chrome下总是不起效果.代码和效果图如下: <head> <style> span{ background-color:#43be60; width:100px; height:50px; margin-top:20px; margin-left:20px; } </style> </head> <body> <div style="background-

使用jquery控制display属性

//隐藏 $("#id").css('display','none'); //显示 $("#id").css('display','block'); 或 $("#id")[0].style.display = 'none'; $("#id")返回的是JQuery 它是个集合肯定有display属性 $("#id").show()表示display:block $("#id").hide(

CSS的display属性

网页设计中最常用的标签p.div.h1-h6(默认为块级元素),span(默认为内联元素) 1.把元素显示为内联元素和把元素显示为块级元素 <style type="text/css"> div{ display:inline; background:red;}/*区块元素将转换为内联元素*/ span{ display:block; background:green;}/*将内联元素转换为区块元素*/ </style> </head> <bo

jquery控制display属性为none或block

代码如下: //隐藏 $("#id").css('display','none'); //显示 $("#id").css('display','block'); 或 $("#id")[0].style.display = 'none'; $("#id")返回的是JQuery 它是个集合肯定有display属性 $("#id").show()表示display:block, $("#id"

CSS display属性的值及作用