区别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. MVC4 + EF为Model添加单独的验证属性

    可使用以下方式给Model加上相关的meta验证属性,这样实体的验证属性就不会被例如EF或其他工具自动生成的Model所替换了． using System.ComponentModel.DataAnn ...

  2. 运用TWaver 3D 矢量图形处理能力

    的确,提起TWaver,大家想到的首先是"电信拓扑图组件".事实上.因为其灵活的MVC架构.矢量化设计.方便定制等特点.TWaver能够做的还有非常多.比如房地产行业常见到的&qu ...

  3. BZOJ 1004 HNOI2008 Cards Burnside引理

    标题效果:特定n张卡m换人,编号寻求等价类 数据保证这m换人加上置换群置换后本身构成 BZOJ坑爹0.0 条件不那么重要出来尼玛怎么做 Burnside引理--昨晚为了做这题硬啃了一晚上白书0.0 都 ...

  4. openSUSE 安装

    https://lug.ustc.edu.cn/sites/opensuse-guide/installation.php 开始 1. 简介2. 改用 GNU/Linux3. 获取 openSUSE4 ...

  5. Android结构分析Android智能指针（两）

    笔者:刘蒿羽 博客:http://blog.csdn.net/liuhaoyutz Android版本号:4.4.2 在上一篇文章中,我们分析了Android智能指针中的强指针sp,本文我们来分析弱指 ...

  6. windows下利用OpenVPN搭建VPNserver

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

  7. Windows Phone 8.1 多媒体（2）：视频

    原文:Windows Phone 8.1 多媒体(2):视频 Windows Phone 8.1 多媒体(1):相片 Windows Phone 8.1 多媒体(2):视频 Windows Phone ...

  8. 08. 删除重复&海量数据

    原文:08. 删除重复&海量数据 重复数据,通常有两种:一是完全重复的记录,也就是所有字段的值都一样:二是部分字段值重复的记录. 一. 删除完全重复的记录完全重复的数据,通常是由于没有设置主键 ...

  9. 开源 java CMS - FreeCMS2.2 模型管理

    项目地址:http://www.freeteam.cn/ 模型管理 从FreeCMS 2.0開始支持 通过模型添加删除字段,调整后台功能;支持网站.栏目.信息等模型. 因为操作方法同样.本文档以网站模 ...

  10. IOC 在Mvc中的使用

    IOC 在Mvc中的使用 IOC,是控制反转(Inversion of Control)的英文简写, 控制反转一般分为两种类型,依赖注入(Dependency Injection)和依赖查找(Depe ...