Reinforcement learning objective: I want to fully understand, deeply understand/deeply understand the layout.

1. marginandpadding

  • marginFrom the outside
  • paddingInside 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
  1. Distance from the border of the parent element
  2. Distance from the border of the sibling element
  3. By default, block-level elements overlap vertically with the maximum margin
  4. By default, block-level elements overlap vertical margins of inline elements to the maximum
  5. By default, horizontal margin overlay on inline elements
  6. 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

paddingpadding

Padding, padding, and also four values, using the same margin.

  1. Inner margin refers to the distance between the content and the distance from the side
  2. 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
  1. After setting the inside margin, you may need to change the original width and height
  2. 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 labelpA child of the tag
  • p:nth-of-type(n)Represents the previous label namepThe NTH tag of all the tags of

a*4Automatically 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