区别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. Office——检索 COM 类工厂中 CLSID 为 {000209FF-0000-0000-C000-000000000046} 的组件时失败

    检索 COM 类工厂中 CLSID 为 {000209FF-0000-0000-C000-000000000046} 的组件时失败,原因是出现以下错误: 8000401a 1.运行dcomcnfg.e ...

  2. Dom中的nodeName、nodeValue 、nodeType

    nodeName.nodeValue 以及 nodeType 包含有关于节点的信息. nodeName 属性含有某个节点的名称. 元素节点的 nodeName 是标签名称 属性节点的 nodeName ...

  3. TRILL浅析

    1 TRILL概述 TRILL的全称就是Transparent Interconnection of Lots of Links,顾名思义,其本质就是将非常多条链路透明地组织在一起,以致于上层IP应用 ...

  4. c# Buffer.BlockCopy 合并 byte 数组

    今天遇到点问题需要合并 多个  byte[] 参见 :  http://q.cnblogs.com/q/30534/ 今天复习了 所有数组的基类是 Array

  5. 在WAMPSERVER下增加多版本的PHP（PHP5.3，PHP5.4，PHP5.5）支持。

    原文:在WAMPSERVER下增加多版本的PHP(PHP5.3,PHP5.4,PHP5.5)支持. WAMPServer可以让开发者在Windows系统下快速搭建WAMP环境,它支持多版本的Apach ...

  6. ArcGIS Runtime SDKs v10.2.4最新（Android、iOS、OSX和.NET）

    ArcGIS Runtime SDKs v10.2.4最新,它包含:Android.iOS.OS X和.NET四大平台,用户和开发人员可以登录Esri最新的SDK安装包.或者通过云盘下载(http:/ ...

  7. JS时间戳比较大小：对于一组时间戳(开始时间~结束时间)和另一组时间戳进行比较,用于判断被比较时间戳组是否在要求范围内

    /* *JS时间戳比较大小:对于一组时间戳(开始时间~结束时间)和另一组时间戳进行比较,用于判断被比较时间戳组是否在要求范围内 *@param date1 date2(形如:'2015-01-01'类 ...

  8. MySQL的C语言编程（一）

    原文:MySQL的C语言编程(一) 初学MySQL,记录一下MySQL用c语言编程时遇到的问题. 这是我的源程序: int main(void) { MYSQL *mysql=NULL; if((my ...

  9. 快速构建Windows 8风格应用35-触控输入

    原文:快速构建Windows 8风格应用35-触控输入 引用 Windows 8设备通常具有多点触摸屏,用户可以同时使用多个手指来进行不同的输入交互,如点击.拖动或收缩等手势操作.另外Windows ...

  10. C#异步Socket示例

    C#异步Socket示例 概要 在C#领域或者说.net通信领域中有着众多的解决方案,WCF,HttpRequest,WebAPI,Remoting,socket等技术.这些技术都有着自己擅长的领域, ...