Relearn the CSS series

Previous chapter # CSS Learning Series 1 – The box model

0. Write first

The last article talked about what a box model is and which parts it is composed of. From inside to outside, it is content,padding,border, and margin affecting the outside of the box.

1. Padding

To be honest, there’s really nothing more to say about the padding, so please let me know in the comments section if you have anything else to add. I didn’t know what kind of interview questions would come up. The specific attributes are listed below.

  • Padding value: percentage | number px, but cannot be negative
  • When the padding is a percentage, the frame is the width of the element that wraps it around it

For example, if you create a container element that does not specify width and height, it will be covered with body by default, and then a div, padding-left and padding-top specify a percentage of 10%, then the container size is 274*89

<style>
  .container{
    margin: 30px 30px;
    border: 2px solid # 000;
    padding: 20px;
  }
  .padding1{
    height: 60px;
    width: 60px;
    padding-left: 10%;
    padding-top: 10%;
    border: 1px solid green;
  }
</style>
 <div class="container">
    <div class="padding1">padding demo</div>
  </div>

Copy the code

What happens when we change the rendering mode of the child element to border-box?

ContentWidth =contentWidth+paddingWidth+border CSS = 60-2-27

If you make the padding-left and padding-top values larger than the size of the box, the padding-left and padding-top values will occupy the entire box, and the contents will be zero, and they will be pushed out of the box. The padding-left and padding-top values will be the width and height of the box.

2.Border

2.1 parameter

Border: 1px solid red is shorthand for the following three properties

2.1.1 border – width

  • A fixed value
/* When given a width, that width applies to all borders of the selected element */
border-width: 5px;
/* When two widths are given, the widths apply to the horizontal and vertical edges of the selected element */
border-width: 2px 1.5 em;
/* When three widths are given, they apply to the top, top, and bottom edges of the selected element */
border-width: 1px 2em 1.5 cm;
/* width: 1px 2em 0 4rem; /* width: 1px 2em 0 4rem; / * * from MDN https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-width * /
Copy the code
  • You can pass in the global keywords inherit,initial,unset
  • Thin (thin) medium(thick) thick(thick)

2.1.2 border – style & border – color

attribute meaning
none If style is not specified by default, the border is hidden and has the lowest priority
hidden Hide borders with a higher priority than None
solid A solid line
For more on this, go toMDN view
Color is the color defined in the CSS, depending on the number of fixed values specified for width

2.2 instance

In the example above, add a new div, class set to border, to form a square box with a solid red line with a 1px border

<style>
.border{
    width: 100px;
    height: 100px;
    background-color: rgb(165.185.238);
    border: 10px solid red;
  }
</style>
<div class="border">borderDemo</div>
Copy the code

What happens if WIDTH and height are set to 0?

The content is squeezed out, and then the border forms a square. . Remove text and background

#border1{
    width: 0px;
    height: 0px;
    border: 100px solid transparent;
    border-bottom: 100px solid red;
}
#border2{
    width: 80px;
    height: 0px;
    border: 60px solid transparent;
    border-bottom: 50px solid red;
}
#border3{
    width: 0px;
    height: 0px;
    border: 100px solid transparent;
    border-bottom: 100px solid red;
    border-radius: 50%;
}

Copy the code

3.Margin

The values note
A fixed value Can be positive or negative
The percentage The frame is relative to the element enclosing it, and the percentage takes the width as the margin
auto Tell the browser to pick an appropriate margin, centered horizontally with no margins up or down when set to 0 auto

3.1 a fixed value

3.1.1 When is positive

  • Adjacent elements overlap on top of each other and take a larger value.
  • When an element has no content, it is overwritten.
<style>
    .container{
      margin: 30px 30px;
      border: 2px solid # 000;
      padding: 20px;
    }
    .margin1{
      margin-top: 10px;
      margin-bottom: 15px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="margin1">1</div>
    <div class="margin1"></div>
    <div class="margin1"></div>
    <div class="margin1">2</div>
  </div>
</body>
Copy the code

Divs with no content in the middle will be overwritten, and adjacent divs with content will be overlapped. Since margin-bottom is larger than margin-top, the value of margin-bottom is 15px.

3.1.2 When the value is negative

  • margin-topIs negative, the current element moves up
  • margin-leftIs negative, and the current element shifts to the right
  • margin-rightPhi is negative, and the following element shifts to the right
  • margin-bottomIt’s negative, and it moves up

Create 5 squares in the container to display


 <style>
    .container{
      border: 2px solid # 000;
      margin: 270px 50px;
      display: flex;
     flex-flow: row wrap;
    }
    .box{
      width: 100px;
      height: 100px;
    }
    .baseBorder{
      border: 2px solid #40a9ff;
    }
    .activeBorder{
      border: 2px solid #ff4d4f;
    }
   
    .margin{
      /* TODO */
    }
  </style>
  
  <div class="container">
    <div class="box baseBorder">The control group</div>
    <div class="box baseBorder">The control group</div>
    <div class="box activeBorder margin" ></div>
    <div class="box baseBorder">The control group</div>
    <div class="box baseBorder">The control group</div>
  </div>

Copy the code
  • default;

  • margin-top: -104px;

  • margin-left: -114px;

  • margin-right: -114px;

  • margin-bottom: -104px;

3.2 percentage points

.margin{
    margin-top: 50%;
}
Copy the code

3.3 Auto

.margin{
    margin: 0 auto;
}
Copy the code