区别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. Configuration配置信息管理

    Configuration配置信息管理 在前面的章节中,我们知道新版的MVC程序抛弃了原来的web.config文件机制,取而代替的是config.json,今天我们就来深入研究一下配置文件的相关内容 ...

  2. 【机器学习算法-python实现】KNN-k近邻算法的实现（附源代码）

    ,400],[200,5],[100,77],[40,300]]) shape:显示(行,列)例:shape(group)=(4,2) zeros:列出一个同样格式的空矩阵,例:zeros(group ...

  3. iOS8自适应布局视频教程

    联系:http://www.elsyy.com/course/6480 这是颐和园最近录制iOS8视频课程.简介iOS8出现在自适应布局. 本教程的书,颐和园<ios8 swift编程指南> ...

  4. WebBrowser控件使用详解

    原文:WebBrowser控件使用详解 方法 说明 GoBack 相当于IE的“后退”按钮,使你在当前历史列表中后退一项 GoForward 相当于IE的“前进”按钮,使你在当前历史列表中前进一项 G ...

  5. 将已有的工程项目添加到Xcode到Git管理中

    在Xcode中创建工程的时候,我们很容易的可以将新创建的工程添加到Git中,如图: 但是如果是本地已经有的工程,那该如何添加到Git中呢? 首先终端进入到该工程的目录. 然后: git init gi ...

  6. centos 7安装mysql5.5

    首先centos7 已经不支持mysql,因为收费了你懂得,所以内部集成了mariadb,而安装mysql的话会和mariadb的文件冲突,所以需要先卸载掉mariadb,以下为卸载mariadb,安 ...

  7. winsock2之最简单的win socket编程

    原文:winsock2之最简单的win socket编程 server.cpp #include <WINSOCK2.H> #include <stdio.h> #pragma ...

  8. SQL点滴9—SQL Server中的事务处理以及SSIS中的内建事务

    原文:SQL点滴9-SQL Server中的事务处理以及SSIS中的内建事务 我们可以把SSIS中的整个package包含在一个事务中,但是如果在package的执行过程中有一个表需要锁定应该怎么处理 ...

  9. Visual Studio 单元测试之三---压力测试

    原文:Visual Studio 单元测试之三---压力测试 我们都知道大名鼎鼎的LoadRuner,但是很少有人知道Visual Studio自带的Test也可以做些简单的压力测试,下面我们就介绍一 ...

  10. win7兼容oracle

    操作系统:win7,数据库版本:Oracle 10.0. 问题:安装Oracle10.0时,安装程序意外退出,可按照如下操作解决win7与oracle兼容性问题. 1.打开“\Oracle 10G \ ...