For the basic knowledge point in this kind of foundation, here just want to help you sort out more comprehensive and meticulous. The application scenarios of some features are further illustrated with specific examples.

1. Classification of box models

First, the concept of a box model is a CSS category that represents how elements appear on a page. The box model refers to the fact that each element on the page generates a rectangular area, known as a box. The following categories used to be called block-level elements or inline elements, but elements are clearly the domain of HTML, so the following are more accurate.

1.1 block boxes:

Exclusive line. display: block; Common tags: div P H1-h6 will be a full line wide. The default height is 0. The height varies with the width and height of the content spread settingCopy the code

1.2. The line box:

Don't monopolize a row. display: inline; Default common tags: SPAN A Width and height Default is Auto Width and height are spread with content Setting Width and height invalid white space folding (when multiple Spaces or newlines are present, elements are merged into one space)Copy the code

1.3. Row block box:

Don't monopolize a row. display: inline-block; Common tags: INPUT Width and height Sets the width and height to be effective with a blank fold along with the content spreadCopy the code
  h1{
    background-color: wheat;
  }
  p{
    background-color: purple;
  }
  .box1{
    background-color: maroon;
  }
  span{
    background-color: red;
  }
  .box3 div{
    background-color: blue;
    display: inline-block;
  }
Copy the code
  <h1>Lorem ipsum dolor sit amet consectetur.</h1>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut, necessitatibus beatae vero, officia alias voluptas sapiente rem harum, doloribus nisi nam accusamus consequatur reiciendis porro! Sit provident neque dolorum optio.</p>
  <div class="box1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, itaque quisquam? Ipsa amet harum obcaecati, maiores eius nisi expedita veniam vitae doloremque. Facere voluptatum, at error quod ipsa enim perferendis.</div>
  <br>
  <div class="box2">
    <span>Lorem.</span>
    <span>Quos.</span>
    <span>Id.</span>
    <span>Pariatur?</span>
    <span>Aliquid?</span>
    <span>Labore?</span>
    <span>Numquam.</span>
    <span>Dicta.</span>
    <span>Delectus.</span>
    <span>Non?</span>
  </div>
  <br>
  <div class="box3">
    <div>Lorem.</div>
    <div>Voluptas.</div>
    <div>Iusto?</div>
    <div>Maiores!</div>
    <div>Rem?</div>
    <div>Eius!</div>
    <div>Quasi!</div>
    <div>Corrupti.</div>
    <div>Laboriosam.</div>
    <div>Expedita.</div>
  </div>
Copy the code

2. The box model is composed of four parts

2.1. Content area: Box content area

Content The default width and height of the area content box: content-boxCopy the code

2.2 Inside margin: The distance between the box border and the box content

Padding-left, padding-right, Padding-Top, Padding-bottom Fill box: Padding-boxCopy the code

2.3. Borders:

Border: 1px solid red; Border-width, border-width, default 0 border-style, default none border-color, border-color, default font color Border-left; border-left; border-left; border-right Border-top-width, border-top-style, border-top-color border-bottom-width, border-bottom-style, border-bottom-color border-box: border-boxCopy the code

2.4. Margins: The distance between boxes

Margin-left, margin-right, margin-top, margin-bottomCopy the code

3. Specific usage scenarios of content boxes, filling boxes and border boxes

3.1. Set how to calculate the total width and height of an element

This property is useful for listing page thumbnail blocks that need to be fixed in size. You can set this property, and then adjust the content as you like. The inside margins, borders, and other dimensions do not affect the space taken up by the box.

box-sizing: content-box; // Set width and height to box-sizing: padding-box; Box-sizing: border-box; // box-sizing: border-box; // Set the width and height to the border boxCopy the code

3.2. Setting the background region of an element

background-clip: content-box; // Background-clip: padding-box; // Background-clip: border-box; // The background coverage is a border boxCopy the code
  .box{
    width: 600px;
    border: 1px solid blue;
    overflow: hidden;
  }
  .box div{
    width: 200px;
    height: 200px;
    background-color: purple;
    float: left;
    border: 10px dashed red;
    padding: 10px;
    /* margin: 10px; * /
    box-sizing: border-box; /* How to calculate the total width and height of an element */
    background-clip: border-box; /* Sets the background area of the element */
  }
Copy the code
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
Copy the code

4. Further differences between the three boxes

4.1 wide high

Block box: A square box that takes up an entire line of content wherever it goes. The width and height Settings work, but they still take up an entire line of boxes: the box goes along the content, wherever the content goes. Setting width and height does not work, because: The width and height of the line box should depend on the content only by the font size, there is no way to arbitrarily increase the background above and below the line height (background is not overridden)Copy the code

4.2 padding

Block boxes: both valid Line boxes: left and right, up and down do not actually occupy spaceCopy the code

4.3 from the outside

Block boxes: both valid Line boxes: left and right, up and down do not actually occupy spaceCopy the code

4.4 a border

Block boxes: both valid Line boxes: left and right, up and down do not actually occupy spaceCopy the code

4.5 Row Block Boxes: They are the same as block boxes except that they do not have an exclusive row

  p{
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 10px dashed red;
    margin: 10px;
    background-color: wheat;
    overflow: hidden;
  }
  span{
    line-height: 3;
    width: 100px;
    height: 100px;
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 20px;
    padding-bottom: 20px;
    border: 10px solid red;
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 100px;
    margin-bottom: 100px;
    background-color: wheat;
  }
  div{
    display: inline-block;
    background-color: magenta;
    width: 200px; 
    height: 200px;
    padding: 10px;
    margin: 10px;
    border: 10px solid red;
  }
Copy the code
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident illum alias reprehenderit esse labore possimus enim dolore,  ducimus rerum eos, odit iure cum quo! Vero doloribus iusto quaerat eos consequatur!</p>
  <br>
  <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius illum culpa omnis, quam et mollitia expedita. Dicta aliquid, sint porro necessitatibus deleniti nihil aut animi, obcaecati incidunt minima quasi tempore!</span>
  <span>Consequatur, iure recusandae. Esse tenetur dolore possimus assumenda nesciunt repudiandae. Neque iste officia quam corrupti quis accusantium, totam quo cumque ea cum consequatur. Harum eius aliquam sed odit non culpa.</span>
  <br>
  <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio, provident ea sed, similique nostrum omnis quis corporis eligendi inventore neque, distinctio quae deserunt itaque doloribus pariatur! Adipisci sed vero odit!</div>
Copy the code

5. Element substitutability

The img element is one of the most special elements in a box. The IMG element can be lined up side by side with the row box element, but it can also set the property values of the wider box. The secret is the element’s substitutability.

5.1. Block boxes:

div h1-h6 p
Copy the code

5.2. The line box:

Replaceable: Non-replaceable elements can be replaced by their attribute values: SPAN A Replaceable element: img Displays can be replaced by the SRC attributeCopy the code

5.3. Row Block Boxes:

input
Copy the code
  img{
    width: 200px;
    height: 200px;
    padding: 10px;
    margin: 10px;
    background-color: red;
    border: 10px dashed blue;
    background-clip: padding-box;
  }
  input{
    width: 100px;
    height: 100px;
  }
Copy the code
  <img src="1.jpg" alt="">
  <br>
  <input type="text">
Copy the code

6. Overflow box handling

For blocks the box occupies an entire line horizontally, and the vertical height spreads out with the content, so the box is as tall as the content. This is, of course, without setting the height of the box. Once the height is set, the box needs to be displayed at the specified height, and all the content inside the box needs to be displayed. If the content is too much, it will be displayed outside the box. For this part of the overflow, you can set it through the Overflow property.

6.1 Overflow: Sets the processing method for overflow.

Overflow: visible overflow: hidden overflow: scroll overflow-x: scroll overflow-y: Overflow: Auto Automatically, only when the scroll bar appearsCopy the code

6.2 Overflow applets

Logo ICONS are usually wrapped with H1 tags. At the same time, h1 is the most important tag on a page for THE sake of SEO. It is best to place location content in h1 to facilitate SEO optimization, but words are not expected to be displayedCopy the code

7. Blank processing

On the page, we often see, for example, news headlines. If the title is too long, the following part of the text will be omitted and replaced with ellipsis. In this case, blank processing is needed. The white-space properties are normal and nowrap, both of which combine space into a single space, but the former is automatically wrapped when a line is needed, and the latter is not wrapped when a line is needed.

Whitespace applet:

More text that does not fit in the list is replaced with an ellipsisCopy the code
  li{
    list-style-type: none;
    line-height: 2;
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    width: 360px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  div{
    background-color: wheat;
    width: 200px;
    height: 200px;
    white-space: nowrap;
  }
Copy the code
  <div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas veritatis dolorum, molestias, odio nisi eveniet nihil aliquam minima, saepe doloremque possimus eligendi velit mollitia impedit qui sint illo praesentium? Esse.</div>
  <ul>
    <li>Lorem ipsum dolor sit amet consectetur.</li>
    <li>Commodi est labore porro perferendis dolor.</li>
    <li>Delectus laudantium natus excepturi hic consequuntur.</li>
    <li>Quis distinctio laborum molestiae minima minus?</li>
    <li>Odio, earum voluptatem. Tempore, id libero?</li>
    <li>Laboriosam omnis nulla officiis! Id, nostrum.</li>
  </ul>
Copy the code

8. More apps

8.1 the paging

The main technical point is to convert the A link into a row block box modelCopy the code
  div{
    font-size: 0;
  }
  div a{
    display: inline-block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    border: 1px solid blue;
    text-align: center;
    line-height: 30px;
    text-decoration: none;
    font-size: initial;
    margin-right: 5px;
  }
Copy the code
  <div>
    <a href="">1</a>
    <a href="">2</a>
    <a href="">3</a>
    <a href="">4</a>
    <a href="">5</a>
    <a href="">6</a>
    <a href="">7</a>
    <a href="">8</a>
    <a href="">9</a>
    <a href="">10</a>
  </div>
Copy the code

9. Video tutorials

If you want to know more about this article, you can check out the video tutorial.

Bilibili: Topic 02-CSS box model full analysis + applications