11 common CSS tips and experience collection

1. How do I remove the blank space of a few pixels below the image?

Copy code

The code is as follows:

Method 1:
img{display:block;}
Method 2:
img{vertical-align:top;}
Note: In addition to the top value, you can also set it to text-top
| middle | bottom | text-bottom, or even specific <length> and <percentage> values. Method 3:
#test{font-size:0;line-height:0;}
Note: #test is the parent element of img

2. How to make the color of the hyperlink different before and after the visit and still retain the hover and active effects after the visit?

Copy code

The code is as follows:

method:
a:link{color:#03c;}
a:visited{color:#666;}
a:hover{color:#f30;}
a:active{color:#c30;}
Note: Just set the hyperlink style in the order of LVHA, which can be written as LoVe (like) HAte (hate)

3.Why can't IE set the scroll bar color in Standard mode?

Copy code

The code is as follows:

method:
html{
scrollbar-3dlight-color:#999;
scrollbar-darkshadow-color:#999;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eee;
scrollbar-arrow-color:#000;
scrollbar-face-color:#ddd;
scrollbar-track-color:#eee;
scrollbar-base-color:#ddd;
}
Note: Define the scroll bar color style originally set on the body to the html tag selector

4. How to make the text overflow the boundary and force it to be displayed in one line without wrapping?

Copy code

The code is as follows:

Method: #test{width:150px;white-space:nowrap;}
Note: Set the container width and white-space to nowrap, which has a similar effect to the <nobr> tag.

5. How to make text overflow the boundary and display as ellipsis?

Copy code

The code is as follows:

Method (This method is not yet supported in Firefox 5.0):
#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
Note: First, you need to force the text to be displayed in one line, then truncate the overflowing text through overflow:hidden, and display the truncated text as ellipsis through text-overflow:ellipsis.

6. How to make consecutive long strings wrap automatically?

Copy code

The code is as follows:

Method: #test{width:150px;word-wrap:break-word;}
Note: The break-word value of word-wrap allows line breaks within words

7.How to remove the dotted frame of the hyperlink?

Copy code

The code is as follows:

Method: a{outline:none;}
Note: IE7 and earlier browsers do not support the outline attribute, so you need to use the blur() method of js to implement it, such as <a
onfocus="this.blur();"...

8. What is the difference between the box models in Standard mode and Quirks mode?

Copy code

The code is as follows:

method:
In standard mode: Element
width = width + padding + border
In quirks mode: Element
width = width
Note: For more information, see the CSS3 property box-sizing

9. How to disable Chinese input method in text box?

Copy code

The code is as follows:

Method: input,textarea{ime-mode:disabled;}
Note: ime-mode is a non-standard attribute. At the time of writing this document, only IE and Firefox support it.

10. How to make the layer display on falsh?

Copy code

The code is as follows:

Method: <param
name="wmode" value="transparent" />
Note: Set the flash wmode value to transparent or opaque

11. How to set the iframe background transparent in IE?

Copy code

The code is as follows:

method:
Set the tag attribute of the iframe element to allowtransparency="allowtransparency" and then set the body background color of the page inside the iframe to transparent. However, this will cause some other problems in IE, such as: the iframe set to transparent will not cover the select

<<: Vue3 based on script setup syntax $refs usage

>>: How to deploy springcloud project with Docker

How to change the mysql password on the Xampp server (with pictures)

11 common CSS tips and experience collection

How to change the mysql password on the Xampp server (with pictures)

Let’s take a look at JavaScript precompilation (summary)

MySQL replication table details and example code

mysql data insert, update and delete details

Tutorial diagram of installing MySQL service through MySQL Installer under Windows

MySQL implements multi-table association statistics (subquery statistics) example

How to run JavaScript in Jupyter Notebook

CSS3 animation: the image gradually gets bigger when the mouse is on it and gradually shrinks when the mouse leaves it

On Visual Design and Interaction Design

Five delay methods for MySQL time blind injection

Recommend

Detailed explanation of persistent storage of redis under docker

Vue Router vue-router detailed explanation guide

Optimizing query speed of MySQL with tens of millions of data using indexes

Analysis of the principles of several ways to imitate the magnifying glass effect in CSS3

Vue uses echarts to draw an organizational chart

What is the length of a function in js?

Details on macrotasks and microtasks in JavaScript

Summary of how JS operates on pages inside and outside Iframe

How to solve the problem of ERROR 2003 (HY000) when starting mysql

Detailed description of common events and methods of html text

Detailed explanation of whereis example to find a specific program in Linux

Execute initialization sql when docker mysql starts

9 Tips for Web Page Layout

JS code to achieve page switching effect

Solution to Mysql binlog log file being too large