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
Solutions to the failure and invalidity of opening nginx.pid
Table of contents 1. Problem Description 2. Probl...
In-depth explanation of the impact of NULL on indexes in MySQL
Preface I have read many blogs and heard many peo...
How to dynamically add ports to Docker without rebuilding the image
Sometimes you may need to modify or add exposed p...
How to change the root password in MySQL 5.7
Starting from MySQL 5.7, many security updates ha...
MySQL 5.7.11 zip installation and configuration method graphic tutorial
1. Download the MySQL 5.7.11 zip installation pac...
Implementing a web calculator based on JavaScript
This article shares the specific code of JavaScri...
Two examples of using icons in Vue3
Table of contents 1. Use SVG 2. Use fontAwesome 3...
v-html rendering component problem
Since I have parsed HTML before, I want to use Vu...
How to integrate the graphic verification code component into the Ant Design Pro login function
Preface: This article only introduces the steps t...
Vue makes a simple random roll call
Table of contents Layout part: <div id="a...
MySQL solution for creating horizontal histogram
Preface Histogram is a basic statistical informat...
CSS example code for implementing sliding doors
The so-called sliding door technology means that ...
Summary of scientific principles and suggestions for web design and production
<br />In the field of network design, resear...
How to obtain a permanent free SSL certificate from Let's Encrypt in Docker
1. Cause The official cerbot is too annoying. It ...
JS implements array filtering from simple to multi-condition filtering
Table of contents Single condition single data fi...