Web front-end skills summary (personal practical experience)

1. Today, when I was making a page, I encountered the effect of centering the arrow: because I wanted to make the click area large, I used padding-top: 23%. But there was a problem when calculating 23%. After research, it was found that the percentage of padding-top is calculated based on the width of the parent element rather than the height. Isn’t it strange? Which expert can explain it?
2. If a layer is floated and then margin is added, double margin will appear in IE6. ----------The solution is display:inline; (I know it, but I always forget it).
3. The framework of fixed width on the left and adaptive width on the right + fixed width on the left and right and adaptive width in the middle must be used. It is often used.

demo1 (left side fixed and right side adaptive):

Copy code

The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Double column layout, fixed width on the left, adaptive width on the right</title>
<style>
html,body{ height:100%; margin:0px; padding:0px; }
#header { width:100%; height:20px; background:#CCC; }
#footer { width:100%; height:20px; background:#CCC; }
#main { padding-left: 200px; }
#left { width:200px; height:200px; position:absolute; left:0; background:#FF0;}
#middle { width:100%; height:200px; background:#F00; }
</style>
</head>
<body>
<div id="header">header</div>
<div id="main">
<div id="left">left</div>
<div id="middle">middle</div>
</div>
<div id="footer">footer</div>
</body>
</html></span><span style="font-family:'Microsoft YaHei'">
</span></span>

demo2 (left and right are fixed and the middle is adaptive):

Copy code

The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Double column layout, fixed width on the left, adaptive width on the right</title>
<style>
html,body{ height:100%; margin:0px; padding:0px; }
#header { width:100%; height:20px; background:#CCC; }
#footer { width:100%; height:20px; background:#CCC; }
#main { padding-left: 200px; padding-right: 200px;}
#left { width:200px; height:200px; position:absolute; left:0; background:#FF0;}
#right { width:200px; height:200px; position:absolute; right:0; background:#FF0; float:left;}
#middle { width:100%; height:200px; background:#F00; float:left;}
</style>
</head>
<body>
<div id="header">header</div>
<div id="main">
<div id="left">left</div>
<div id="middle">middle</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
<html></span><span style="font-family:'Microsoft YaHei'">
</span></span>

4. When inserting images in IE6, using the img tag will result in a few pixels of blank space under the img, which will cause your work to be different from the design draft (which will be noticed by the supervisor and you will be scolded). The solution is to turn the img into a block-level element; display:block;
5. The method to make the text vertical within the block is: 1).vertical-align:middle.2).line-height:***; -------------Generally, the second one is better than the first one, and I don’t know why.
6. The lvha of the a tag is not very commonly used, but it will definitely be used: a:link{} a:visited{};a:hover{}a:active{}
7. It seems that text truncation without line break is very common (used every day these days): white-space:nowrap;overflow:hidden;text-overflow:ellipsis; (line break: word-wrap:break-word;)
8. There are many ways to clear floating points. The three main ones used these days are: 1) clear: both; 2) overflow: hidden; 3). My instructor’s favorite is: #a: after{display: block; clear: both; visibility: hidden; height: 0; content'.';}
9. Mouse gestures sometimes disappear in IE. This situation has occurred several times in the past two days. ----------------The solution is corsor:pointer; (note that it cannot be hand--the instructor specifically reminded)
10. When defining a container with a height of only 2 pixels, there will be a bug in IE6 - the solution is to clear various attributes, especially font-size:0;height:0;line-height:0;
11. max-width will not work in IE6 --- the solution is _width: *; (I encountered this problem last week)
12.!important rule - I never used this attribute before, until the day before yesterday when my supervisor looked at my code and reminded me that when a page is responsive, the subsequent width will overwrite the original width:100%; so I need to add width:100%!important;
13. Clearing floats is very, very important - for example, sometimes the container cannot adapt to the height and you need to use it! ! !
14. When you click on the text, the radio button or check box will also be clicked, such as this function of csdn: The method is to wrap the radio button with label or use label for "id".
15.display:none--------disappears and does not occupy any space. visibility:hidden;--------------Occupies position after disappearing.

<<: In the interview, I was asked whether select...for update would lock the table or the row.

>>: Example of implementing TikTok text shaking effect with CSS

Detailed explanation of common usage of MySQL query conditions

Example code for implementing a three-column layout with CSS, where the middle column is adaptive and changes width with text size

The questions encountered in Baidu interviews nee...

Web front-end skills summary (personal practical experience)

Detailed explanation of common usage of MySQL query conditions

CSS fixes the container level (div...) tag in one position (on the far right of the page)

Detailed explanation of several error handling when Nginx fails to start

HTML table tag tutorial (32): cell horizontal alignment attribute ALIGN

Vue implements verification whether the username is available

The whole process of developing a Google plug-in with vue+element

Teach you how to build a react+antd project from scratch

CSS style control to achieve IE submission form record history click return information is still there

Summary of the differences between count(*), count(1) and count(col) in MySQL

innodb_flush_method value method (example explanation)

Recommend

CSS code to achieve background gradient and automatic full screen

Detailed tutorial for installing MySQL on Linux

Ubuntu 18.0.4 installs mysql and solves ERROR 1698 (28000): Access denied for user ''root''@''localhost''

How can we promote Jiedaibao so that everyone will register? Jiedaibao promotion methods and skills

Vue implements the sample code of associating the side navigation bar with the Tab page

mysql 8.0.20 winx64.zip compressed version installation and configuration method graphic tutorial

How to encapsulate the carousel component in Vue3

MySQL series tutorials for beginners

Learn the basics of nginx

About the solution record of the page unresponsiveness when using window.print() in React

How to prevent duplicate submission in jquery project

Example code for implementing a three-column layout with CSS, where the middle column is adaptive and changes width with text size

MySQL 5.7 installation and configuration tutorial under CentOS7 64 bit

MySQL 5.7.19 installation and configuration method graphic tutorial (win10)

MySQL multi-table query detailed explanation