Home > Developer > Web Develop
Differences between the three Display:box;display:inline;display:none
Display:block is characterized by:
The block is the display default value.
Always start on a new line;
The contents of the object are then automatically wrapped;
Both the row height and the top and bottom margins can be controlled;
The width default is 100% of its container, unless a width is set;
<div>, <p>,
Display:inline is characterized by:
and other elements are on one line, not wrapping;
The row height and top and bottom margin cannot be changed;
Width is the width of the text or picture, and it cannot be changed.
Display:none is characterized by:
Hidden objects;
Unlike the hidden value of the visibility property, it does not retain its physical space for objects that are hidden;
<span>, <a>, <label>, <input>, , <strong> and <em> are examples of inline elements;
<HTML> <Head> <styletype= "Text/css"></style> <MetaCharSet= "UTF-8"> </Head> <Body> <Table> <TRheight:100px> <Tablewidth=50%Frame= "None"> <!--The Frame property specifies which part of the outer border is visible box: All four edges display an outer border; none: Not displayed - <thstyle= "Display:block">========================</th> <thstyle= "Display:none">West Lake 3rd Travel list 1111</th> <!--This row is not displayed and the location is not preserved - <thstyle= "Display:block">West Lake 3rd Travel list 2222</th> <thstyle= "Display:block; Visibility:hidden">West Lake 3rd Travel list 3333</th> <!--This row is not displayed, leaving the original blank position - <thstyle= "Display:block">West Lake 3rd Travel list 4444</th> </Table> </TR> <TRheight:100px> <Tablewidth=50%Frame= "box"style= "text-align:center; Display:block"> <thstyle= "width=25%; Display:none">Number</th> <!--Display:none This element is not displayed - <thstyle= "Display:inline">Name</th> <!--Display:inline as inline elements with no line breaks before or after elements - <thstyle= "width=25%; height:100px; margin-top:50px; Display:block">Contact phone</th> <!--Display:block is displayed as a block-level element with line breaks before and after this element - <thstyle= "width=25%; display:inline">Address</th> <thstyle= "width=25%; display:inline">Hobby</th> </Table> </TR> </Table> </Body> <Scripttype= "Text/javascript"> </Script> </HTML>
Display effect:
：
Block always starts on a new line, followed by a newline;
"Contact Phone" that line: row height and the top and bottom margin can be set by width, margin, padding and so on;
<div>, <p>,
Display:inline:
"Address hobby" is two <th> should be two lines, now inline after all on a line, do not break;
The row height and top and bottom margin cannot be changed;
Display:none:
"West Lake 3rd Tour list 1111" is hidden, and its original location space is not retained;
Visibility:hidden
"West Lake 3rd Tour list 3333" is visibility attribute of the hidden, does not show that its physical space is still retained;
Distinguish the frame properties of the <frame> tags <table> tags in html
<frame> tags define a specific window (frame) in frameset, which is used to define the page frame;
Each frame in the frameset can be set with different properties, such as frameborder=0 not displaying a border,
Scrolling=yes Frame display scroll bar, noresize= "noresize" rules can not adjust the size of the frame and so on;
Take a look at the following code effect, assuming that frame_a.html, frame_b.html, frame_c.html three pages are already defined:
<HTML> <Framesetrows= "50%,50%"> <Framesrc= "/example/html/frame_a.html"> <Framesetcols= "25%,75%"> <Framesrc= "/example/html/frame_b.html"> <Framesrc= "/example/html/frame_c.html"> </Frameset> </Frameset> </HTML>
The following frame layout effect is displayed:
However, the frame property of the,<table> tag specifies which part of the outer border is visible and has the following property values:
| value | Description |
|---|---|
| void | The outer border is not displayed. |
| Above | Displays the outer border of the upper side. |
| Below | Displays the outer border of the lower part. |
| Hsides | Displays the outer border of the upper and lower sides. |
| Vsides | Displays the outer border of the left and right sides. |
| Lhs | Displays the outer border of the left side. |
| Rhs | Displays the outer border of the right side. |
| Box | Displays an outer border on all four sides. |
| Border | Displays an outer border on all four sides. |
Like what:
<Body> <Table> <TR> <Tablewidth=20%Frame= "box"> <thstyle= "width=5%; Display:box">Address</th> <thstyle= "width=5%; Display:box">Hobby</th> </Table> </TR> </Table> </Body>
If frame= "vsides" displays the outer border of the left and right side;
Other similarities
Distinguish the frame properties of Display:box;inline;none and HTML <frame> tags <table> tags in css
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
