Basic visual formatting (07) CSS: (1) “block box” formatting | CSS

Overview of “Visual formatting model”

The CSS Visual Formatting Model is the calculation rules used to process and display documents on Visual media.

In layman’s terms, a page (document tree) can be thought of as a combination of boxes, while a Visual formatting model is a set of rules that ‘arranges’ the boxes into the way they look to visitors.

The “layout” of each box is determined by the following factors (this and the next article focus on points 1 and 2, which are “basic visual formatting,” and the rest will be discussed in a series of articles) :

① The size of the box: precisely specified, specified by constraints or not specified; (2) The types of boxes are: inline box, inline-level box, atomic inline-level box, block box;

Positioning scheme: ordinary flow positioning, floating positioning or absolute positioning; (4) Other elements in the document tree: children or siblings of the current box; ⑤ Viewport size and position; ⑥ The size of the picture included; ⑦ Some other external factors.

Each element is a “box”, and “box” can be nested “box” :

💡 As shown in the figure above, the visual formatting model renders a box according to the boundaries of its “containing blocks” (blocks containing other boxes are called “containing blocks”). Usually, a box creates a contain block that contains its descendants, but the box is not limited by contain blocks and is called overflow when the layout of the box goes outside the contain block.

In the figure above, the section contains the body block and the header, article, and footer contain the section block.

❗ ️ difference:

• The “box model” deals with the internal properties of the box itself — margins, borders, etc.
• The “visual formatting model” is used to handle the placement of these boxes.

3.1 Generation of “box”

Box generation is part of the CSS “Visual Formatting model” for generating boxes from document elements.

Boxes have different types, depending on the display property of the CSS, which changes the element’s “role”.

3.1.1 “Block Level Elements” and “Block Level Boxes”

When you set the display attribute of an element to block, list-item, or table, the element becomes a block-level element.

When these elements are in normal flow, they generate “newlines” before and after their boxes, so block-level elements in normal flow are placed “vertically.”

The selector {display: block, list-item, or table; }Copy the code

💡 (” normal flow “refers to the left-to-right and top-down orientation of western language text, which is also the familiar text layout of traditional HTML documents. Note that flow directions may differ in non-Western languages.

However, whether an element is a “block-level element” is only an attribute of the element itself and is not directly used for the creation or layout of the formatting context.

A “block-level element” is formatted as a block (such as a paragraph of an article), and by default is arranged vertically.

💡 Each block-level element generates at least one block-level box, and possibly multiple (for example, list item elements). Block-level boxes are involved in creating block formatting contexts.

3.2 Different types of “boxes” have different formatting methods

In this article we will focus on “block box” formatting, and in the next article we will discuss “inline box” formatting.

Block box:

3.2.2 Vertical formatting

In normal flow, The vertical part of the “block box” = the height of its parent element = the sum of the 7 attributes — (margin-top ➕margin-bottom) ➕ (padding-top ➕padding-bottom) ➕ (border-top ➕border-bottom) ➕ Content area itself height.

Similarly, only three of the seven attributes can be set to auto: height, margin-top, and margin-bottom. The rest must either be a definite value or the default value of 0.

❗️ However, setting margin-top and margin-bottom to auto does not help either, as they are reset to 0. Therefore, it is impossible to center vertically with both the upper and lower margins being Auto.

Another important aspect of vertical formatting is the merging of vertical adjacent margins.

This merging behavior only applies to margin. If an element has a padding and border, the padding and border are not merged. When two or more vertical margins meet, they will form a single margin whose height is equal to the greater of the heights of the two overlapping margins.

❗️ Note: when an element is contained within another element, margin-bottom and magin-top adjacent to each other will also be superimposed, whichever is larger.

1. Horizontal

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div>
  <p class="wide">How are you?</p>
  <p>Fine,thank you,and you?</p>
</div>
</body>
</html>
Copy the code

(2) Type 2️ one

div {
  width: 400px;
  border: 3px solid black;
}

p.wide {
  border: 1px dashed black;
  margin-left: 20px;
  width: 500px;
  margin-right: auto;
  background-color: yellow;
}
Copy the code

2. Vertical

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div>
  <p class="wide1">How are you?</p>
  <p class="wide2">Fine,thank you,and you?</p>
</div>
</body>
</html>
Copy the code

div {
  width: 400px;
  border: 3px solid black;
}

p.wide1 {
  border: 1px dashed black;
  margin-top: -20px; /* Modify the value here to see the effect */
  
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 20px;
  width: auto;
  background-color: yellow;
}    
  
p.wide2 {
  border: 1px dashed black;
  margin-top:;margin-right: 20px;
  margin-bottom:;margin-left: 20px;
  width: auto;
  background-color: grey;
}
Copy the code

💡 set the margin-top of paragraph 1 to “negative” and it is “pulled” up by 20 pixels, and the next paragraph 2 is pulled up by 20 pixels accordingly:

div {
  width: 400px;
  border: 3px solid black;
}

p.wide1 {
  border: 1px dashed black;
  margin-top: px;
  margin-right: 20px;
  margin-bottom: -50px; /* Modify the value here to see the effect */
  
  margin-left: 20px;
  width: auto;
  background-color: yellow;
}   
    
p.wide2 {
  border: 1px dashed black;
  margin-top:;margin-right: 20px;
  margin-bottom:;margin-left: 20px;
  width: auto;
  background-color: grey;
}
Copy the code

💡 set margin-bottom of paragraph 1 to “negative”, paragraph 2 will be placed according to the position at the bottom of paragraph 1:

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div>
 <ul>
  <li>Fine</li>
  <li>thank you</li>
  <li>and you?</li>
 </ul>
<p>How are you? The way!</p>
</div>
</body>
</html>
Copy the code

div {
  width: 400px;
  border: 3px solid black;
}

ul {
  border: 1px dashed black;
  margin-top: px;
  margin-right: 20px;
  margin-bottom: -15px; /* change the value here to see the effect; * /
  margin-left: 20px;
  width: auto;
  background-color: yellow;
}   
    
li {
  border: 1px dashed black;
  margin-top:;margin-right: 20px;
  margin-bottom: 20px; /* * (); /* () * /
  margin-left: 20px;
  width: auto;
  background-color: grey;
}

p {
  border: 1px dashed black;
  margin-top: -18px; /* change the value here to see the effect. * /
  margin-right: 20px;
  margin-bottom: px; 
  margin-left: 20px;
  width: auto;
  background-color: yellow;
}
Copy the code

💡ul and p overlap margin are both “negative”, then take the one with the larger absolute value (-18px) :

💡 When the larger (-18px) at the top increases to li’s maximum positive margin (20px), we get 20px-18px = 2px:

Postscript: In this article we studied the formatting of “block box”, and in the next article we will continue to explore the formatting of “inline box”. In inline box formatting, we’ll cover a lot of small basics, and as with this article, let’s try to conquer them with code and images as much as possible.

I wish you good, QdyWXS ♥ you!