CSS Small Tip

1. Default style for <input> tags when you add an input tag to a page, an outer border is wrapped when you click on the input box, and you can use: input {Outline:none} to remove the outer box wrapping default style generated when clicked

Input{border:none} Remove the default style of the input tag

2. Div Adaptive Browser Height

Html,body{height:100%;overflow:hidden;} /* Requires adaptive Div*/.container {height:100%;}

3. The difference between Display:none and Visible:hidden

Display:none and Visible:hidden can hide an element on a webpage, but there are differences:

Display:none---does not preserve its physical space for objects that are hidden, that is, the object disappears completely on the page and is not visible to the layman.

Visible:hidden---Make an object invisible on a Web page, but the space occupied by the object on the 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; Hide area </span><span style= "Background-color:green" > Display area </span><br/>
<span style= "Visibility:hidden; Hide area </span><span style= "Background-color:green" > Display area </span>
</body>

CSS Small Tip