区别display：box；display：inline；display：none三者的不同

display:block的特点是：
block是Display默认的值。
总是在新行上开始；
该对象随后的内容自动换行;
行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度；
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子，意思是他们默认显示方式是block；

display:inline的特点是：
和其他元素都在一行上，不换行；
行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。

display:none的特点是：
隐藏对象；
与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间；
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子；

    <html>

    <head>

        <style type="text/css"></style>

        <meta charset="UTF-8">

    </head>

    <body>

        <table>

            <tr height:100px>

                <table width=50% frame="none">

                <!--frame属性规定外侧边框的哪个部分是可见的box:所有四个边上显示外侧边框;none:不显示-->

                    <th style="display:block">========================</th>

                    <th style="display:none">杭州西湖三日游出行名单1111</th>

                    <!--此行不显示，且不保留位置-->

                    <th style="display:block">西湖三日游出行名单2222</th>

                    <th style="display:block; visibility:hidden">杭州西湖三日游出行名单3333</th>

                    <!--此行不显示，保留原来空白位置-->

                    <th style="display:block">杭州西湖三日游出行名单4444</th>

                </table>

            </tr>

            <tr height:100px >

                <table width=50% frame="box" style="text-align:center; display:block">

                    <th style="width=25%; display:none">编号</th>

                    <!--display:none 此元素不会被显示-->

                    <th style="display:inline">姓名</th>

                    <!--display:inline 示为内联元素，元素前后没有换行符-->

                    <th style="width=25%; height: 100px; margin-top:50px; display:block">联系电话</th>

                    <!--display:block 显示为块级元素，此元素前后会带有换行符-->

                    <th style="width=25%; display:inline">地址</th>

                    <th style="width=25%; display:inline">爱好</th>

                </table>

            </tr>

        </table>

    </body>

    <script type="text/javascript">

    </script>

    </html>

显示效果：

如图所示：
block总是在新行上开始，后面换行；
“联系电话”那一行：行高以及顶和底边距都可通过width、margin、padding等来设置；
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子，意思是他们默认显示方式是block；

display:inline：
“地址爱好”是两个<th>本该是两行，现在为inline后都在一行上，不换行；
行高及顶和底边距不可改变；

display:none：
“杭州西湖三日游出行名单1111”被隐藏了，且其原来的位置空间没有保留；

visibility：hidden
“杭州西湖三日游出行名单3333”被visibility属性的hidden，不显示，其物理空间仍然保留；

区别HTML中 <frame> 标签<table> 标签的 frame 属性

<frame>标签定义frameset中的一个特定的窗口（框架），是用来定义页面框架的；

frameset 中的每个框架都可以设置不同的属性，比如 frameborder=0不显示边框、

scrolling=yes框架中显示滚动条、noresize="noresize"规定无法调整框架的大小等等；

看看下面代码效果，假设frame_a.html、frame_b.html、frame_c.html三个页面都已定义好了：

    <html>

    <frameset rows="50%,50%">

        <frame src="/example/html/frame_a.html">

        <frameset cols="25%,75%">

            <frame src="/example/html/frame_b.html">

            <frame src="/example/html/frame_c.html">

        </frameset>

    </frameset>

    </html>

显示如下框架布局效果：

然而，<table> 标签的 frame 属性是规定外侧边框的哪个部分是可见的，有以下属性值:

值 描述
void 不显示外侧边框。
above 显示上部的外侧边框。
below 显示下部的外侧边框。
hsides 显示上部和下部的外侧边框。
vsides 显示左边和右边的外侧边框。
lhs 显示左边的外侧边框。
rhs 显示右边的外侧边框。
box 在所有四个边上显示外侧边框。
border 在所有四个边上显示外侧边框。

比如：

    <body>

        <table>

            <tr>

                <table width=20% frame="box">

                    <th style="width=5%; display:box">地址</th>

                    <th style="width=5%; display:box">爱好</th>

                </table>

            </tr>

        </table>

    </body>

如果frame=“vsides” 显示左边和右边的外侧边框；

其余雷同

区别CSS中display：box；inline；none以及HTML中 <frame> 标签<table> 标签的 frame 属性的更多相关文章

  1. display:box和display:inline-box的区别

    display:box我想大家很熟悉,那么display:inline-box呢,今天在项目中需要设置这样的属性box-align:center,那么就想到用 display:box;如果设置BOX, ...

  2. 【css】display：flex和display：box有什么区别

    说法一: 注意:前者是flex 2012年的语法,也将是以后标准的语法,大部分浏览器已经实现了无前缀版本.后者是2009年的语法,已经过时,是需要加上对应前缀的.所以兼容性的代码,大致如下displa ...

  3. css中display为none 和visibility为hidden的区别

    区别一: display:none Turns off the display of an element (it has no effect on layout);  all child eleme ...

  4. 个人收集（转载）CSS中 display:none和visibility:hidden的区别

    visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏 ...

  5. css中display:inline-block display:-moz-inline-box display:-moz-inline-stack 的区别

    很多时候我们必须使一些块元素并排显示,一般想到的是必须使用浮动,但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG,所以很多时候不得不把这个块元素套在一个内联元素里面,然后给内联元素 ...

  6. display：inline、block、inline-block 的区别

    一.块级元素 与  行级元素 要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫 ...

  7. display:box和flex的区别

    没区别,仅是各阶段草案命名flex是最新的 但是在实际的浏览器测试中,display: flex 不能完全替代display: -webkit-box display: box 使用可以参考http: ...

  8. CSS3 display:flex和display:box有什么区别？

    **区别**,仅是各阶段草案命名.- W3C 2009年第1次草案:[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723 ...

  9. CSS样式display:none和visibility:hidden的区别

    同样是隐藏,display:none与visibility:hidden有什么区别呢? 虽然display:none与visibility:hidden都能达到隐藏可见元素的作用(视觉上),但事实上, ...

随机推荐

  1. kobox ： key_waitqueue.c -v1 如何内核线程，如何使用等待队列

    平台:TQ2440 按键驱动 (1)在init中创建一个内核线程作为等待队列的处理函数,该内核线程是一个while(1)死循环,一直检測等待队列的触发条件 DECLARE_WAIT_QUEUE_HEA ...

  2. Android:仿手机QQ朋友动态ListView

    1.介绍: 使用此博客XListView模仿Android版本QQ朋友动态ListView效果.效果如下面的截图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZ ...

  3. 教你一步一步部署.net免费空间OpenShift系列之二------创建应用

    接上回书,注册完毕后需要在Openshift上创建一个应用空间,如如何创建空间呢,Openshift本身是不直接支持Mono来部署ASP.Net程序的,需要借助openshift-community- ...

  4. windows下利用OpenVPN搭建VPNserver

    一.OpenVPN是一款功能强大,可跨平台(支持Win 2000/XP/2003, Linux, Mac OS X, Solaris, FreeBSD, NetBSD, 和 OpenBSD)使用的SS ...

  5. Java实现缓存(类似于Redis)

    Java实现缓存,类似于Redis的实现,可以缓存对象到内存中,提高访问效率.代码如下: import java.util.ArrayList; import java.util.HashMap; i ...

  6. 日期格式化{0:yyyy-MM-dd HH:mm:ss.fff}和{0:yyyy-MM-dd hh:mm:ss.fff}的区别

    原文:日期格式化{0:yyyy-MM-dd HH:mm:ss.fff}和{0:yyyy-MM-dd hh:mm:ss.fff}的区别 {0:yyyy-MM-dd HH:mm:ss.fff}:使用24小 ...

  7. Asp.Net MVC5入门学习系列②

    原文:Asp.Net MVC5入门学习系列② 添加一个Controller(控制器) 因为我们用的是Asp.Net MVC,MVC最终还是一套框架,所以我们还是需要遵循它才能玩下去,或者说是更好的利用 ...

  8. 转载JQuery绑定鼠标粘贴事件工具类

    // 粘贴事件监控 $.fn.pasteEvents = function( delay ) { if (delay == undefined) delay = 10; return $(this). ...

  9. java ResultSet 结果集处理 createStatement() 里参数的意义（第一弹）

    createStatement(int   resultSetType,int  resultSetConcurrency)参数一:结果集类型可取值:  1.ResultSet.TYPE_FORWOR ...

  10. 轻型ORM－－Dapper

    分享一个轻型ORM--Dapper选用理由 推荐理由:Dapper只有一个代码文件,完全开源,你可以放在项目里的任何位置,来实现数据到对象的ORM操作,体积小速度快:) Google Code下载地址 ...