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
Recommend
A brief discussion on the difference between src and href in HTML
Simply put, src means "I want to load this r...
Explanation of installation and configuration of building go environment under linux
It is very simple to build a go environment under...
How to download excel stream files and set download file name in vue
Table of contents Overview 1. Download via URL 2....
React encapsulates the global bullet box method
This article example shares the specific code of ...
CSS3 frosted glass effect
If the frosted glass effect is done well, it can ...
What is the base tag and what does it do?
The <base> tag specifies the default addres...
Detailed analysis of the syntax of Mysql update to modify multiple fields and
When updating a record in MySQL, the syntax is co...
MySQL 8.0.12 winx64 detailed installation tutorial
This article shares the installation tutorial of ...
Example of using Docker to build an ELK log system
The following installations all use the ~/ direct...
How to use nginx to simulate blue-green deployment
This article introduces blue-green deployment and...
Vue custom optional time calendar component
This article example shares the specific code of ...
Detailed explanation of common Docker commands
1. Help Command 1. View the current Docker versio...
Summary of how JS operates on pages inside and outside Iframe
Table of contents Get the content of the iframe o...
HTML table cross-row and cross-column operations (rowspan, colspan)
Generally, the colspan attribute of the <td>...
Datagrip2020 fails to download MySQL driver
If you cannot download it by clicking downloadlao...