Home > Article > Web Front-end > HTML CSS??zoom learning_html/css_WEB-ITnose
HTML CSS??zoom learning_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:03:081057browse
When I was working on a phased project in college, I encountered a very strange phenomenon: kindEditor's function of uploading images failed, but it worked just fine after removing the styles referenced by jsp. This indicated that there was a problem with the styles, so I deleted a style and tested it. , so the culprit falls on zoom. This is the first time we "met each other". Today is the weekend, a rare leisure time. Let me summarize it now:
First, let’s talk about the role of zoom: zoom is used to set objects. Zoom attribute value: normal |
Code 1-1 is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> .test{zoom:normal;} </style> </head> <body> <h1 style="font-size:5pt;">zoom</h1> <h1>zoom</h1> <h1 class="test">zoom</h1> </body></html> Figure 1-1 Code 1-2 is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> .test{zoom:normal;} </style> </head> <body> <img src="./test.png" width = "50" height = "50"></img><br> <img src="./test.png"></img><br> <img src="./test.png" class="test"></img> </body></html>
Figure 1-2
Summary:
a. Figure 1-1: As can be seen from the code The font size of the first "zoom" is "5pt", the font size of the second "zoom" uses the default value, and the font size of the third "zoom" is added to the "zoom:normal;" style list;
b. Figure 1-2 From the code, you can see that the width of the first image is "50", the height is also "50" and the size is "5pt". The second image size uses the default value. The "zoom:normal;" style list has been added to the three pictures;
Through the description of points a and b, we can get the conclusion: n normal is used to make the element use its actual size;
2.
Code 2-1 is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> .test{zoom:3;} </style> </head> <body> <h1>zoom</h1> <h1 class="test">zoom</h1> </body></html>
Figure 2-1
Code 2-2 is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> .test{zoom:3;} </style> </head> <body> <img src="./test.png"></img><br> <img src="./test.png" class="test"></img> </body></html>
Figure 2-2
3.
Code 3-1 is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> .test{zoom:300%;} </style> </head> <body> <h1>zoom</h1> <h1 class="test">zoom</h1> </body></html>
Figure 3-1
Code 3-2 is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> .test{zoom:300%;} </style> </head> <body> <img src="./test.png"></img><br> <img src="./test.png" class="test"></img> </body></html>
Fig. 3-2
Note: Due to the defect of zoom compatibility, there are not many actual applications. Just a general understanding is enough.
【0 points to download demo resources】
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn