区别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. Cloudera CDH 5集群搭建（yum 方式）

    1      集群环境 主节点 master001 ~~ master006 从节点 slave001 ~~ slave064 2      安装CDH5的YUM源 rpm -Uvhhttp://ar ...

  2. Cocos发育Visual Studio下一个HttpClient开发环境设置

    Cocos2d-x 3.x相关类集成到网络通信libNetwork图书馆project于.这其中包括:HttpClient分类. 我们需要在Visual Studio溶液中加入libNetwork图书 ...

  3. 百度地图API 添加自定义标注 多点标注

    原文:百度地图API 添加自定义标注 多点标注 分四个文件 location.php map.css 图片 数据库 数据库配置自己改下 -------------------------------- ...

  4. 【百度地图API】如何判断点击的是地图还是覆盖物？

    原文:[百度地图API]如何判断点击的是地图还是覆盖物? 摘要:很多API爱好者问我,为什么我点击的是marker,而map也会响应该事件呢?怎样才能判断,我点击的是标注,还是地图呢?下面一起来看看. ...

  5. 【百度地图API】发布静态图API啦！只需一个网址，即可展示定制百度地图！

    原文:[百度地图API]发布静态图API啦!只需一个网址,即可展示定制百度地图! 摘要: 百度地图静态图API!您无须执行任何“特殊”操作便可在网页上显示此图片. 不需要 JavaScript.我们只 ...

  6. CSS3+HTML5特效3 - 纵向无缝滚动

    老惯例,先看例子. This is a test 1. This is a test 2. This is a test 3. This is a test 4. This is a test 5. ...

  7. c# 字符串切割 split

    一直以来  都以为 string.split 里面 就只能是 一个 char 实际不是 那么回事 参数 可以是 string. eg: string strtest = "asdfg12we ...

  8. POJ 1035 代码+具体的目光

    Spell checker Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 19319 Accepted: 7060 Descri ...

  9. javascript1

    <script> //初始化表达式:通过方括号定义数组元素和通过花括号定义对象属性名和属性值之间的映射关系的语法 //通过“.”和“[]”来引用对象属性或数组元素的值就构成一个表达式. v ...

  10. Oracle 11g 客户端的安装和配置。

    原文:Oracle 11g 客户端的安装和配置. 数据库和客户端在不同的机器之上. 在安装之前,在安装Oracle数据库的服务器上导航到下面的目录. 将listener.ora和tnsnames.or ...