Reinforcement learning objective: I want to fully understand, deeply understand/deeply understand the layout.
1. margin
andpadding
margin
From the outsidepadding
Inside margin, inside filling
CSS is embedded in the tag in the following format:
Supplement: overflow
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <style type="text/css"> .box1 { width: 300px; height: 300px; background-color: #e8f3ff; / /* overflow: scroll; / /* overflow: scroll; / /* overflow: scroll; } .box2 { width: 100px; height: 100px; background-color: #1e80ff; overflow: hidden; } </style> </head>Copy the code
<body>
<div class="box1">
<div class="box2"></div>
</div>
<body>
</html>
Copy the code
Results 1
Margin from the outside
- margin: 50px; The up and down or so
- margin: 50px 30px; Up and down 50 or so 30
- Margin: 50px 30px 20px up around 50 30 down 10
- margin: 50px 30px 20px 5px; On the lower left
- Distance from the border of the parent element
- Distance from the border of the sibling element
- By default, block-level elements overlap vertically with the maximum margin
- By default, block-level elements overlap vertical margins of inline elements to the maximum
- By default, horizontal margin overlay on inline elements
- For each element, add horizontal float, and the horizontal and vertical inner margins and margins are added
.html
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="box1">box1</div> <div class="box2">box2</div> <a class="a1">a1</a> <a class="a2">a2</a> </body> </html>Copy the code
Results 2
.css
*,.a {// some tags may be missing, such as a margin: 0; padding: 0; } .box1,.box2 { width: 100px; height: 100px; } .box1 { background-color: tan; } .box2 { background-color: thistle; } .a1 { background-color: teal; } .a2 { background-color: tomato; }Copy the code
Explore the effect of margin on display
Change only the margin of box1 and box2
.box1{
background-color: tan;
margin: 50px;
}
Copy the code
.box1{
background-color: tan;
margin: 50px 30px 20px 0px;
}
Copy the code
.box1 {
background-color: tan;
margin: 50px;
}
.box2 {
background-color: thistle;
margin: 50px;
}
Copy the code
.box1 {
background-color: tan;
margin: 50px;
}
.box2 {
background-color: thistle;
margin: 100px;
}
Copy the code
.box1 {
background-color: tan;
margin: 100px;
}
.box2 {
background-color: thistle;
margin: 50px;
}
Copy the code
Results 1 | Results 2 | The effect of 3 |
By default, block-level elements overlap vertically with a maximum inner margin.
.box1 {
background-color: tan;
margin: 50px;
}
.box2 {
background-color: thistle;
margin: 50px;
}
.a1 {
background-color: teal;
margin: 50px;
}
.a2 {
background-color: tomato;
margin: 50px;
}
Copy the code
Add code:
div, a{
float: left;
}
Copy the code
- When setting a margin for a subset, margins are used normally if the subset is preceded by other element nodes
- By default, upper margins are passed to the parent class when there are no other nodes in front of the subset
- If a subset’s margin-top must be relative to its parent, give the parent or itself a float property
Add sublabel box3 to box1:
<div class="box1">
<div class="box3">box3</div>
</div>
Copy the code
Set the margin
.box3{
width: 50px;
height: 50px;
background-color: thistle;
margin:50px;
}
Copy the code
Set the margin – top
.box3{
width: 50px;
height: 50px;
background-color: thistle;
margin-top:50px;
}
Copy the code
Modify the margin – top
.box3{
width: 50px;
height: 50px;
background-color: thistle;
margin-top:100px;
}
Copy the code
Box3 set margin | |
---|---|
Box3 set margin – top | |
Box3 modify margin – top |
padding
padding
Padding, padding, and also four values, using the same margin.
- Inner margin refers to the distance between the content and the distance from the side
- The inner margin fills the entire label in the direction of the set inner margin
I’m going to set the padding for A1
.a1{
background-color: teal;
margin:50x;
padding:30px;
}
Copy the code
- After setting the inside margin, you may need to change the original width and height
- When the width and height Settings have met the requirements, the padding added later causes the label to become larger. Solution: A. Modify the value of the original size b. Retain the original size of the label
Modify the a1
.a1{
display:block;
background-color: teal;
width:100px;
height:100px;
margin:50x;
padding:30px;
box-sizing:border-box;
}
Copy the code
A1 set padding | |
---|---|
A1 Adding attributes |
2. Pseudo-class selectors
p:nth-child(n)
Indicates that the NTH label name is found in the parent labelp
A child of the tagp:nth-of-type(n)
Represents the previous label namep
The NTH tag of all the tags of
a*4
Automatically generate 4 A labels
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <! -- A tags are set to dark blue --> <! <style type=" text-align: left; color: #1e80ff; } a { color: thistle; } /* p:nth-child(n) {p:nth-child(n) {p:nth-child(n) {p:nth-child(n) {p:nth-child(n) {p:nth-child(n); First-child */ /* a:nth-child(7); last-child */ * a:nth-child(4); A :nth-of-type(1) */ /* nth-child(1) {color: red; } a:nth-child(4) { color: red; } /* nth-child(3) {color: yellow; } a:nth-child(7) { color: yellow; } </style> </head>Copy the code
<body> <! -- nth-of-type first-child last-child --> <p>p1(red)</p> <p>p1</p> <p>p2</p> <a>a1(red)</a> <a>a2</a> <a>a3</a> <a>a4</a> </body> </html>Copy the code
Common mistakes:
/* a:nth-child(1) {color: red; } * /Copy the code