location
- Basic introduction of positioning
Three common layout methods of web pages: standard flow floating positioning
Standard flow: block level elements are arranged vertically in one row. In line elements / in line block elements are displayed in multiple rows, with horizontal layout
Floating: it can make the block level elements of the original vertical layout into a horizontal layout
Positioning: elements can be freely placed in any position of the web page, which is generally used for the stacking between boxes. The element level after positioning is the highest, which can be stacked on other boxes, or the box can always be fixed in a position on the screen
- Basic use of positioning
Set the positioning method and set the offset value
Set the positioning method property name position
The offset value setting is divided into two directions, one in the horizontal direction and one in the vertical direction. The selection principle is generally the principle of proximity, and whichever side is close to it is used
- Static positioning
The default value is the previous standard flow
position:static cannot move through the orientation attribute. If you add orientation, the box will disappear
Generally speaking, positioning does not include static positioning
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } div { width: 300px; height: 300px; } .red { background-color: red; } .green { /* 1,Positioning mode - relative positioning */ position: relative; /* 2,Offset value */ top: 100px; left: 100px; background-color: green; /* 3,The box disappeared */ } .blue { background-color: blue; } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>
- Relative positioning
Narcissistic positioning, moving relative to your previous position
position:relative
You need to move with the orientation attribute, relative to your original position, and occupy a position in the page (no off label)
It is used with absolute positioning and applied to small-scale movement
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } div { width: 300px; height: 300px; } .red { background-color: red; } .green { /* 1,Positioning mode - relative positioning */ position: relative; /* 2,Offset value */ top: 100px; left: 100px; background-color: green; /* 3,The green box is offset from its upper left corner */ } .blue { background-color: blue; } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>
- Absolute positioning
Spell dad positioning, positioning and moving relative to the non statically positioned parent element
position:absolute
You need to cooperate with the azimuth attribute to move
The default is to move relative to the viewable area of the browser
No position in the page (off bid)
If there is no positioning in the ancestor element, it moves relative to the browser by default
There is a location in the ancestor element, which moves relative to the nearest located ancestor element
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } div { width: 300px; height: 300px; } .red { background-color: red; } .green { /* 1,Positioning mode - absolute positioning */ position: absolute; /* 2,Offset value */ top: 100px; left: 100px; /* 3,Move relative to the upper left corner of the browser */ /* 4,There is no location in the ancestor element */ background-color: green; } .blue { background-color: blue; } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father { /* Set positioning */ position: relative; width: 600px; height: 600px; background-color: pink; } .son { /* Set positioning */ position: relative; width: 400px; height: 400px; background-color: skyblue; } .sun { /* Absolute positioning */ position: absolute; right: 0; bottom: 0; width: 200px; height: 200px; background-color: blue; } /* Relative to the nearest parent element with relative positioning set, it is positioned relative to the son box */ </style> </head> <body> <div> <div> <div></div> </div> </div> </body> </html>
- Son Jue father phase
Let the child element move freely relative to the parent element. The absolute positioning of the child element and the relative positioning of the parent element are the same as the above code,
Why? Because the parent element is relatively positioned, the relative positioning has no off label, and has the least impact on the web page layout
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father { /* Parent phase */ position: relative; /* Father Jue */ /* position: absolute; */ width: 600px; height: 600px; background-color: pink; } .son { /* Zijue */ position: absolute; right: 0; bottom: 0; width: 400px; height: 400px; background-color: blue; } </style> </head> <body> <div> <div></div> </div> </body> </html>
For a special situation, when using the child absolute parent phase, it is found that the parent element has an absolute location. At this time, you can directly determine the child absolute.
Because the parent element has been positioned, it indicates that it meets its requirements. If the positioning method of the parent element is blindly modified, the previously written layout may be affected
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father { /* Parent phase */ position: relative; width: 600px; height: 600px; background-color: pink; } .son { /* Zijue */ position: absolute; right: 0; bottom: 0; width: 400px; height: 400px; background-color: blue; } .sun { /* Zijue */ position: absolute; right: 0; top: 0; width: 200px; height: 200px; background-color: yellow; } </style> </head> <body> <div> <div> <div></div> </div> </div> </body> </html>
- Classic case of son Jue Fu Xiang
Use the child absolute parent phase to center the child box horizontally and vertically in the parent box. The key is that parent-child elements can be implemented at any width and height
Since the specified width and height of this problem is arbitrary, we can't just limit our thinking to left top and set a fixed width and height value.
The general idea is: first move the sub box half the width of the parent box to the right, and then move the sub box half the width to the left to achieve the horizontal centering effect. Of course, the same is true for vertical centering. First let the sub box move down half the height of the parent box, and then let the sub box move up half the height of itself. So how to implement this part of the specific code?
Since the sub box is relatively positioned, set left:50%. Originally, the sub box is close to the upper left corner of the parent box, so this code indicates that the distance from the sub box to the left is 50% (this 50% is for the parent box)
Let the sub box move its half to the left. Generally speaking, we can set margin left and set it to a negative value, indicating that it is close to the left. However, this code needs to be modified after the width of the sub box changes, which does not meet our preset conditions. Therefore, we use transform:translateX(-50%) to mean that we always move half of our width along the negative direction (left) of the X axis. At this time, the sub box width changes without modifying the code.
What I said above is for horizontal centering and vertical centering. Similarly, the code is as follows
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father { position: relative; width: 600px; height: 400px; background-color: pink; } .son { /* 1,Son Jue father phase */ position: absolute; /* 2,Let the sub box go to the right, half the big box */ left: 50%; /* 3,Let the sub box go down half the big box */ top: 50%; /* 4,Let the sub box go half way to the left + up */ /* transform: translateX(-50%); */ /* transform: translateY(-50%); */ /* Co writing: */ transform: translate(-50%,-50%); width: 200px; height: 100px; background-color: blue; } </style> </head> <body> <div> <div></div> </div> </body> </html>
- Fixed positioning
Dead eye positioning, positioning and moving relative to the browser
position:fixed
It needs to be moved with the orientation attribute, relative to the visible area of the browser. No position in the page (off bid)
Application scenario: fix the box at a certain position on the screen (such as the head area of JD)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img { /* Fixed positioning */ position: fixed; top: 100px; right: 100px; } div { background-color: white; width: 100%; height: 3000px; } </style> </head> <body> <img src="./images/floor1.jpg" alt=""> <div></div> </body> </html>
You can put this picture into the above code, modify your picture path and view the final result.
- Hierarchy of elements
Hierarchical relationship of elements in different layout modes: standard flow < floating < positioning
The hierarchical relationship between different locations is relatively absolutely fixed, and the default level is the same. At this time, the lower elements written in HTML have a higher level and will overwrite the upper elements
We can use z-index to change the level of positioning elements. The larger the number, the higher the level
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } div { width: 300px; height: 300px; } .red { /* Relative positioning */ position: relative; top: 0; left: 0; /* z-index: 9999; */ background-color: red; } .green { /* Absolute positioning */ position: absolute; top: 100px; left: 100px; /* z-index: 2; */ /* float: left; */ background-color: green; } .blue { /* Fixed positioning */ position: fixed; top: 200px; left: 200px; /* z-index: 999; */ /* width: 310px; height: 310px; */ background-color: blue; } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>
Change the value of z-index and observe the final result. It should be noted that z-index should not be given indiscriminately. The recommended range is 1-999. ( Refer to other articles for actual scope)
decorate
- Vertical alignment
A common phenomenon: there is a baseline for alignment in the layout of browser text type elements
This leads to the problem of text alignment. When the picture and text are displayed in one line, the bottom is not aligned. Therefore, I want to solve the problem of vertical alignment of inline / inline block elements.
Therefore, we introduce the vertical align attribute to achieve vertical alignment, as shown in the following table. I set the vertical align attribute for img!
Problems that vertical align can solve in the project
1. The text box and form button cannot be aligned
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> input { height: 50px; /* Automatic internal subtraction */ box-sizing: border-box; /* Method 1: set vertical alignment */ /* vertical-align: bottom; */ /* Method 2: set floating */ /* float: left; */ } </style> </head> <body> <input type="text"><input type="button" value="search"> </body> </html>
2input and img cannot align
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img { vertical-align: bottom; } </style> </head> <body> <img src="./images/1.jpg" alt=""><input type="text"> </body> </html>
Picture fetching
Final display effect (reduce the picture, the two pictures are the same size)
The text box in 3div cannot be pasted to the top
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father { width: 400px; height: 400px; background-color: pink; } input { vertical-align: top; } </style> </head> <body> <div> <input type="text"> </div> </body> </html>
4div is supported by img tag without height. At this time, there will be additional clearance under img tag
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father { width: 400px; background-color: pink; } img { /* Solution 1: change the vertical alignment of img tags to not baseline */ /* vertical-align: bottom; */ /* Solution 2: set img to convert to block level elements */ display: block; } </style> </head> <body> <div> <img src="./images/1.jpg" alt=""> </div> </body> </html>
5. Use line height to center the img label vertically
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father { width: 600px; height: 600px; background-color: pink; line-height: 600px; } img { vertical-align: middle; } </style> </head> <body> <div> <img src="./images/1.jpg" alt=""> </div> </body> </html>
- Cursor Type
Sets the style cursor that appears when the mouse cursor is over an element
- Border fillet
Make the four corners of the box round, increase page details and improve the user experience. border-radius
Assign the value from the upper left corner, and then assign the value clockwise. If there is no assignment, look at the diagonal
Two common applications of border fillet: drawing a circle and capsule button
Draw a circle. The box must be square. Set the border fillet to half the width and height of the box
The capsule button box shall be rectangular and set to half the height of the box
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* Draw a circle */ .one { /* 1,The box must be square */ width: 300px; height: 300px; /* 2,Set the border fillet to half the width and height of the box */ /* border-radius: 150px; */ border-radius: 50%; background-color: orange; margin-bottom: 20px; } /* Draw a capsule button */ .two { /* 1,The box is required to be rectangular */ width: 300px; height: 100px; /* 2,Set the border fillet to half the height of the box */ border-radius: 50px; background-color: purple; margin-bottom: 20px; text-align: center; line-height: 100px; color: #fff; font-size: 20px; } .three { /* 1,The box is required to be rectangular */ width: 300px; height: 100px; /* 2,Set the border fillet to half the height of the box */ border-radius: 50px; border: 1px solid orange; text-align: center; line-height: 100px; font-size: 20px; color: orange; } </style> </head> <body> <div></div> <div>1</div> <div>2</div> </body> </html>
- Overflow overflow part display effect
The overflow part refers to the area where the content part of the box exceeds the scope of the box
Control the display effect of content overflow, such as display, hide and scroll bar overflow
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 300px; height: 300px; background-color: pink; /* Overflow part display effect */ overflow: auto; } </style> </head> <body> <div>I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content, I am content</div> </body> </html>
- The element itself is hidden
Make an element itself invisible on the screen. Two commonly used
visibility:hidden and display:none
The former hides the element itself and occupies a position in the web page. The latter does not occupy a place in the web page.
Therefore, we often use the display attribute to switch the display and hiding of elements
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father { width: 400px; height: 400px; background-color: pink; } .son { width: 100px; height: 100px; background-color: blue; /* Default hide */ display: none; } .father:hover .son { /* hove When you get to father, let the son element display */ display: block; } </style> </head> <body> <div> <div></div> </div> </body> </html>
- Concept of element transparency
Make an element transparent as a whole, and set the opacity attribute
0 means fully opaque and 1 means fully transparent
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 400px; height: 400px; background-color: red ; /* Element overall transparency */ /* opacity: 1; */ /* opacity: 0; */ opacity: .5; } </style> </head> <body> <div> <img src="./images/1.jpg" alt=""> I am the content </div> </body> </html>
(the picture is in the upper part. You can take it yourself or use your own)
- table border merge
Let adjacent table borders merge to get the effect of thin line borders
border-collapse:collapse
See details( Label advanced knowledge)
- Draw triangles with CSS
The small triangle appearing in the web page is completed by using the box border.
Set a box, set the borders of different colors around it, set the width and height of the box to 0, only keep the borders, and get four triangles. After selecting one of them, set the color of the other triangles (borders) to transparent
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 0px; height: 0px; /* background-color: pink; */ /* Method 1: */ /* border-top: 100px solid skyblue; border-right: 100px solid yellow; border-bottom: 100px solid purple; border-left: 100px solid blue; */ /* Method 2: */ border: 100px solid transparent; border-bottom-color: blue; } </style> </head> <body> <div></div> </body> </html>
It's very interesting to set up the code of triangles. We can try more. In different situations, we can see what triangles can look like in the end. (we must understand the principle. Copying the code only when it needs to be used is not conducive to the improvement of our ability.)
Selector extension
- Link pseudo class selector
It is often used to select different states of hyperlinks. If the following four pseudo class state structures need to be implemented at the same time, they need to be written in LVHA order
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* Check the status of the a tag that has not been accessed */ a:link { color: red; } /* Check the status after the a tag has been accessed */ a:visited { color: yellow; } /* Select the state of mouse over */ a:hover { color: orange; } /* Select the mouse down state */ a:active { color: skyblue; } </style> </head> <body> <a href="#"> I am a tag</a> </body> </html>
- Focus pseudo class selector
It is used to select the state when the element gets focus. It is often used in form controls.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* Select input to get the status of focus */ input:focus { background-color: #ccc; } </style> </head> <body> <input type="text"> </body> </html>
- attribute selectors
Select elements through HTML attributes on elements, which is often used to select input tags
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* Find the input in the page, and the type attribute is required */ input[type] { /* background-color: pink; */ } /* Find the input in the page, and the value of the type attribute is text */ input[type="text"] { background-color: red; } input[type="password"] { background-color: green; } </style> </head> <body> <input type="text"> <input type="password"> </body> </html>