Display:block is a block of objects
Display:none
is not displayedQU1: I often see there is to do a layer, and then write something in it, and then give it a property display:none, so that this thing is not visible on the page, but why build a layer, not unnecessary increase the size of the page?
An:1. You can use JS to show them
2. Can be an iframe in the layer, as a background, no refresh processing data
3. Put some pictures in the layer, let the browser first cache, open these pictures will be faster
4. In order to SEO, that is, search engine optimization, in the hidden layer of appropriate to do some "key words"
Wait a minute...
You can use JS to show them.This will make the hidden/display switch effect ...
document.getElementById ("Divname"). Display=false;
Q2: How do I understand the Display:inline-block property?
It doesn't make sense for all block elements, the Dispaly property defaults to block, and no need to explicitly define--unless you've redefined the display property of a block element before. ===========================Display:block comparison is commonly used in <a><span> these two tags-because these two tags are not block elements, if not display:block defined, then define width, Height and long width related CSS properties are found to be completely out of effect. You can actually write a few lines of simple code to feel it.
===========================
Is it not necessary to write display:block in Div? Usually it is not necessary.
Common Special case: the DIV has previously been set Display:hidden<a> label 1</a><a> label 2</a><a> label 3</a>
A tag is inherently inline.
So write, he comes out--------Tag 1 label 2 Label 3
But if you want to define width, do not add block is not to function, are simply add block (display:block), he changed lines, so then add Display:inline-block play a big role, inline block, width can be achieved, and can not change lines ...
a{width:100px; Display:inline-block}Sometimes solve IE6 double pixel to open, display:inline not enough to use, also can use this attribute
Dispaly default property is None
Block is a piece! That's a whole line of the browser.Inline is an inline
As an example:
If you want to make a vertical navigation bar
<style type= "Text/css" >
A
Display:block;
}
</style>
<body>
<a href= "#" >a</a>
<a href= "#" >b</a>
<a href= "#" >c</a>
<a href= "#" >d</a>
<a href= "#" >e</a>
<a href= "#" >f</a>
</body>
The default property of a property is inline use the display method to change A's default property to block first A to occupy one lineThe difference between Display:none and Visible:hidden
Both Display:none and Visible:hidden can hide an element from the page, but there are differences:
Display:none---does not retain its physical space for the object being hidden, that is, the object disappears completely on the page, which is not visible or invisible.
Visible:hidden---Make an object invisible on a Web page, but the space occupied by the object on a Web page does not change, and in layman's terms it is invisible but palpable.
Example:
The difference between <title>display:none and Visible:hidden </title>
<body >
<span style= "Display:none; Background-color:blue "> Hidden area </span><span style=" Background-color:green "> Display area </SPAN><BR/ >
<span style= "Visibility:hidden; Background-color:blue "> Hidden area </span><span style=" Background-color:green "> Display area </span>
</body>
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
