HTML CSS??zoom learning_html/css_WEB-ITnose-HTML Tutorial-php.cn

HTML CSS??zoom learning_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:03:08

Original

1079 people have browsed it

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 | |

1. 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>

Copy after login

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>

Copy after login

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. : Use floating point numbers to define the scaling ratio. Negative values are not allowed;

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>

Copy after login

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>

Copy after login

Figure 2-2

3. : Use percentage to define the scaling ratio. Negative values are not allowed;

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>

Copy after login

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>

Copy after login

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】