区别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. codeigniter 操作mysql的PHP代码--更新

    支持标准前缀 1)查询没有平等,有平等的 $this->db->get_where('host',array('host'=>'ddd','id !='=>0))->ro ...

  2. utf8 和 UTF-8 在使用中的差别

    在使用中经常遇到utf-8和utf8,如今最终弄明确他们的使用不同之处了,如今来和大家分享一下,以下我们看一下utf8 和 UTF-8 有什么差别  "UTF-8"是标准写法,ph ...

  3. 又一次拾起C语言的威严

    自从用了C++,他的方便快捷一直用着屡试不爽,可是越用越认为程序不够清晰, 项目使用DSP,不得不把C++重写成C 速度没得说,很快 记录下看到的文章 少走弯路,学好C语言的推荐途径

  4. ASP.NET Web API和ASP.NET Web MVC中使用Ninject

    ASP.NET Web API和ASP.NET Web MVC中使用Ninject 先附上源码下载地址 一.准备工作 1.新建一个名为MvcDemo的空解决方案 2.新建一个名为MvcDemo.Web ...

  5. Silverlight中的Path

    原文:Silverlight中的Path 在Silverlight中Path可能由直线.曲线.或者其他简单的图形对象组成.这篇文章旨在介绍如何使用XAML和C#来创建Path. 废话先行 Path可能 ...

  6. 条形码(JBarcode)

    一世尘梦 少小离家老大回,妖娆尘世,程序唧唧:问君能有几多愁,恰是满屏BUG无处修. 商品条形码(JBarcode) 之前没有使用过这个,现在使用JBarcode生成商品条形码,工作之前的准备工作: ...

  7. C语言宏的高级应用

    原文:C语言宏的高级应用 关于#和##在C语言的宏中,#的功能是将其后面的宏参数进行字符串化操作(Stringfication),简单说就是在对它所引用的宏变量通过替换后在其左右各加上一个双引号.比如 ...

  8. Linux 查看和删除进程

    1. 在 LINUX 命令平台输入 1-2 个字符后按 Tab 键会自动补全后面的部分(前提是要有这个东西,例如在装了 tomcat 的前提下, 输入 tomcat 的 to 按 tab).2. ps ...

  9. [推荐]ORACLE PL/SQL编程详解之一:PL/SQL 程序设计简介(千里之行,始于足下)

    原文:[推荐]ORACLE PL/SQL编程详解之一:PL/SQL 程序设计简介(千里之行,始于足下) [推荐]ORACLE PL/SQL编程详解之一: PL/SQL 程序设计简介(千里之行,始于足下 ...

  10. elasticsearch集群搭建实例

    elasticsearch集群搭建实例 下个月又开始搞搜索了,几个月没动这块还好没有落下. 晚上在自己虚拟机上搭建了一个简易搜索集群,分享一下. 操作系统环境: Red Hat 4.8.2-16 el ...