What is a box model

  • The arrangement of elements in HTML,Box inside box

  • Two more three-dimensional….

  • A few words that need to be explained…
Padding Margin Content Content area border Top bottom left right top bottom left rightCopy the code

Padding padding

  • The inside margin is the distance from the content area to the border

  • Up, down, left, rightpadding-top.padding-bottom.padding-left.padding-right
  • You can set it individually or at the same time
div {
    padding: 20px;
}
Copy the code
  • The equivalent of
div {
    padding: 20px 30px 40px 50px;
}
Copy the code
  • The equivalent of
div {
    padding-top: 20px;
    padding-bottom: 40px;
    padding-left: 50px;
    padding-right: 30px;
}
Copy the code
  • It can be easily debugged through the browser

  • The inside margin will stretch out the border

Margin from the outside

  • The margin is the distance between the border and the outermost edge of the box

  • You can set it individually or at the same time
div {
    margin: 20px;
}
Copy the code
  • The equivalent of
div {
    margin: 20px 30px 40px 50px;
}
Copy the code
  • The equivalent of
div {
    margin-top: 20px;
    margin-bottom: 40px;
    margin-left: 50px;
    margin-right: 30px;
}
Copy the code

Border border

  • The border is the area between the inside and outside margins

  • You can set the border,The width of the.Line type.color
div {
    border: 20px solid blue;
}
Copy the code
  • Equivalent to…
div {
    border-color: red;
    border-style: solid;
    border-width: 20px;
}
Copy the code

  • Borders can also be set up, down, left and right
div {
    width: 200px;
    height: 200px;
    border-width: 10px;
    border-color: red;
    border-style: solid;
}
Copy the code
  • The equivalent of
div {
    width: 200px;
    height: 200px;
    border-bottom: 10px;
    border-left: 10px;
    border-right: 10px;
    border-top: 10px;
    border-color: red;
    border-style: solid;
}
Copy the code

  • Pay attention toborder-style: solid;, to be written below the set width code

  • By setting theborder-bottom, can achieve the effect of underline

Let’s review the box model

  • Look at the picture and find the content area, the border, the inside margin, and the margins

Centering of block-level elements

  • Before thetext-align:center, only center the text

  • If you want to center block-level elements, you need tomargin:0 auto

  • margin:0 autoThe meaning of
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
Copy the code

The problem of overlap between top and bottom distances

  • If I have two elements,margin:20pxWhat is the distance between these two elements?
  • Instinctively, we think it should be the first elementmargin-bottomPlus the second elementmargin-top
  • It should be, these two values, which one is bigger, which one is chosen

Fixed the width of the box

  • We talked about the inside margin earlierpaddingIt’s going to push up the border.

  • This can be used if we want to fix the maximum width of the boxbox-sizing:border-box
p {
    border: 1px solid green;
    width: 200px;
    height: 200px;
    margin: 20px;
    padding: 20px;
    box-sizing: border-box;
}
Copy the code

Set the border

  • Try the border style

  • You can also set styles separately

value describe
none Define no borders.
dotted Define dot borders
double Double solid line
solid Define a solid line.

Set the rounded corners of the border

  • useborder-radius, to set the rounded corners
  • Numbers and percentages are supported

  • If the percentage is 50%, it’s a circle

  • You can set all four corners at the same time or separately
border-radius: 20px;
Copy the code
  • The equivalent of
border-top-right-radius: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
Copy the code
  • You can write the four corner Settings together, from left to rightOn the lower left

Remove the outline of the Input box

  • throughoutline: none;To get rid of the outline
input {
    outline: none;
}
Copy the code

Sets the show and hide of elements

  • Can be achieved bydisplayProperties control show and hide
display: block; / * * /
display: none; / * * /
Copy the code

Display: None and visibility:hidden

  • Can hide elements
  • display:noneIt will make the element disappear, it will leave its place empty

  • visibility:hidden, will make the element disappear, but the position remains, which is equivalent to transparent

Set the maximum width and minimum width

  • The so-called maximum width means that the maximum width cannot exceed this width
  • The so-called minimum width means that the minimum cannot be less than this width
  • Maximum width usagemax-width, can be a number, can be a percentage, if it’s a percentage, relative to the parent element

  • Minimum width usagemin-width, can be a number, can be a percentage, if it’s a percentage, relative to the parent element

Set the width and content to be adaptive

  • Can be achieved bywidth:fit-contentTo set the

Sets the width of the parent element based on the width of the child element

  • You can usewidth: max-content;orwidth: min-content;
  • The width of the largest child element is used, or the smallest child element is used

Quick jump

  • Column “THE Way CSS Grows” 000- Opening
  • Column “THE Way to CSS Growth” 001-CSS basics
  • Column growing CSS 002-CSS selectors
  • Column the Way to CSS Growth 003-CSS weights and inheritance
  • Column CSS Growing up 004-CSS text manipulation
  • Column CSS Growth 005-CSS box model
  • Column CSS Growth 006- Backgrounds and gradients
  • CSS: The Way to Grow 007-CSS defines data formats
  • Column CSS Growth 008- Floating layout
  • To be continued…