区别CSS中display:box;inline;none以及HTML中 <frame> 标签<table> 标签的 frame 属性

区别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” 显示左边和右边的外侧边框;

其余雷同

时间: 2024-12-25 18:22:25

区别CSS中display:box;inline;none以及HTML中 <frame> 标签<table> 标签的 frame 属性的相关文章

CSS中display属性:block、inline和inline-block的区别

最近写HTML遇到一个问题:我想设置span的宽度和高度,但是在IE9和chrome下总是不起效果.代码和效果图如下: <head> <style> span{ background-color:#43be60; width:100px; height:50px; margin-top:20px; margin-left:20px; } </style> </head> <body> <div style="background-

你不知道的css中block与inline的区别(转)

所有的HTML元素都属于block和inline之一. block元素的特点是:(1)总是在新行上开始:(2)高度,行高以及顶和底边距都可控制:(3)宽度缺省是它的容器的100%,除非设定一个宽度<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. 相反地,inline元素的特点是: (1)和其他元素都在一行上:(2)高,行高及顶和底边距不可改变:(3)宽度就是它的文字或图片的宽度,不可改变.&l

块级元素和行内元素以及display中block、inline和inline-block的区别

块元素又名块级元素(block element),和其对应的是内联元素(inline element),都是html规范中的概念.块元素和内联元素的基本差异是块元素一般都从新行开始,相邻的块级元素将会在不同行显示.而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了.比如,我们完全可以把内联元素加上display:block这样的属性,让它也有每次都从新行开始的属性,即成为块元素同样我们可以把块元素加上display:inline这样的属性,让它也在一行上排列. block元素

css中display为none 和visibility为hidden的区别

区别一: display:none Turns off the display of an element (it has no effect on layout);  all child elements also have their display turned off.  //隐藏这个元素;所有的子元素也跟着他隐藏. visibility:hidden The box is invisible (fully transparent, nothing is drawn), but stil

个人收集(转载)CSS中 display:none和visibility:hidden的区别

visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏览时保留位置:而display:none视为不存在,且不加载! 1.visibility:hidden--为隐藏的对象保留其物理空间 HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在. 2.display: none--不为被隐藏的对象保留其物理空间 HTML元素(

css中display:inline-block display:-moz-inline-box display:-moz-inline-stack 的区别

很多时候我们必须使一些块元素并排显示,一般想到的是必须使用浮动,但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG,所以很多时候不得不把这个块元素套在一个内联元素里面,然后给内联元素 浮动和边距.今天看到这篇文章不错 就COPY 过来 希望大家做个参考: display:inline-block简单来说就是将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格.但是这个属性目前不是所有的浏览器都支持,只有Opera和Safari支持,Fi

display:inline、block、inline-block 的区别

一.块级元素 与  行级元素 要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 1.块级元素 总是另起一行开始:高度,行高以及顶.底边距都可以控制:宽度缺省是它所在容器的100%,除非设定一个宽度.块级元素通常作为其他元素的容器,可以容纳内联元素和其他块元素.block element的HTML标签如下: address-地址blockquote-块引用center

display:block / inline / inline-block 三个之间的区别

块元素特点: 每次都是从新行开始: 可以设置宽.高,行高,顶底边距等: <div>  <ul> <ol> <li> <dl> <dt> <dd> <table> <form>  <p>  <hr/><textarea>等都是 行元素特点: 和别的元素在同一行: 不可以设置宽高,行高,顶底边距等: <span> <img> <var&g

CSS3 display:flex和display:box有什么区别?

**区别**,仅是各阶段草案命名.- W3C 2009年第1次草案:[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)- W3C 2011年第2次草案:[display:flexbox | inline-flexbox;](https://www.w3.org/TR/2011/WD-css3-flexbox-20110322/)- W3C 2012年第5次草案及以后的候选推荐标准:[display:flex |