HTML design pattern daily study notes

HTML Design Pattern Study Notes

This week I mainly learned HTML design patterns. I would like to summarize my learning content as follows:

one. Learning the box model

There is a basic design model in CSS called the box model, which defines how elements are parsed as boxes. I mainly learned six box models, namely inline box model, inline-block box model, block box model, table box model, absolute box model and floated box model.

The box model design pattern is built into CSS and defines the relationship between the following properties: border, stroke, padding, and content. Each attribute consists of four parts: top, right, bottom, and left; these four parts can be set simultaneously or separately; the border has different sizes and colors, which we can understand as the thickness of the boxes we see in life and the color material the box is made of, the boundary is how much distance the box should be kept from other things, the content is what is in the box, and the material used to fill the empty space in the filled box.

1.1 Inline Box Model

Inline boxes are parsed in inline order, where they are ordered horizontally from left to right and wrap to a new line when they exceed the width of their nearest terminal block ancestor. Width, height, and overflow have no effect on inline elements, as they are always set to the width and height of the content. Margin and line-height can be applied to inline elements in some special ways. Horizontal margins change the position of inline elements in the sort order. A positive value for margin-left moves the element away from the element in front of it, while a negative value moves it closer. A positive value for margin-right moves an element further away from the element below it, while a negative value brings it closer. Margin-top and margin-bottom have no effect on inline elements. Border sets the border for inline elements in a special way. The horizontal border will change the position of the inline elements in the arrangement. A left border will align the element to the left, and a right border will align the next element to the right. Top and bottom borders appear outside the padding, but do not extend to the line-height or change the vertical position of the element. The template for this pattern can be expressed as follows:

This design pattern can be applied to any inline element and any element that is displayed inline.

1.2 Inline Block Box Model

An inline-block element is placed in the inline order, just like any other inline box, except that it also has the properties of a block element: margin, border, padding, width, and height. Inline-block elements do not cross other lines. Inline block elements will have their line height increased to accommodate their own height, padding, borders, and margins. Width and height set the height and width of an element. You can expand or shrink a replaced element, such as an image, by setting its width or height to a specific value. You can also use width:auto and height:auto to make the size of the replaced element match the actual size. Assuming a span with display:inline-block, you can adjust the size by setting its width and height. You can also wrap inline block elements with width:auto and height:auto. You can use width:100% to lengthen an inline block element, which makes it the same as a block element. The margin element will change the size of the element in four directions: top, bottom, left, and right. Margin-top and margin-bottom will increase or decrease the line height, while margin-left and margin-right will bring the element closer or increase the distance between it and the elements before and after it in the horizontal direction. Borders and padding can also be used to extend the outer size of inline elements.

The typical pattern of the inline box model is as follows:

This design pattern can be applied to all inline elements.

1.3 Block Box Model

In a block formatting environment, the block box model is arranged vertically from top to bottom, which is the normal arrangement of block elements. Block boxes can contain other block boxes, or they can end a block formatting environment and begin an inline formatting environment that contains inline boxes. A terminal block element creates an inline formatting environment within its inner box, but its outer box is always in a block formatting environment.

A block element can be the same length as its parent element, or smaller or larger than its parent element. When its size is larger than its parent element, it overflows. The overflow property is used to control how the browser handles overflow. In the block box model, width and height are still used to set the width and height of the element. Among them, width:auto means that it makes the width of the element consistent with the parent element, and height:auto means that it makes the height of the element wrap all its child elements. margin-left and margin-right indent or extend the sides of a stretched block element. They adjust the size of the block element. Margin-top and margin-bottom can increase or decrease the distance between different block elements, or even make them overlap. The browser offsets the top and bottom margins of adjacent block elements. Use margin-left:auto and margin-right:auto to control the horizontal alignment of fixed-size block elements. If a block element has a width set, margin-left:auto will cause the block element to be arranged on the right side of the parent element, and margin-right:auto will cause the block element to be arranged on the left side of the parent element. Setting margin-left:auto and margin-right:auto at the same time will place the block element in the middle of the parent element. Borders and padding also extend the outer width and height of the box model. The block box model has the following pattern:

This design pattern can be used for all block elements.

1.4 Table Box Model

A table is a block-shaped box containing rows of cells. Tables are also arranged in blocks, and the cells in a table are arranged in rows and columns. Tables have margins but no padding. Cells have padding but no margins. Use width to set the width of the table. The width here refers to the width of the border rather than the width of the inner margin. Use height to set the height of the table. The height here refers to the height outside the border rather than the height inside the padding. The way margins are interpreted depends on whether the table is sized, wrapped, or stretched. When it is fixed sized and wrapped, margins move the table and subsequent elements. Negative margins will cause adjacent elements to overlap the table. When the table is stretched, the margins indent the table, which makes its internal dimensions smaller and reduces the size of the cells. A border will make the inner box of a table that has a defined size or stretch smaller. Overflow cannot be applied to tables, because tables cannot overflow, only table cells can overflow. You should assign overflow:hidden to cells to ensure that all browsers behave consistently when fixed-size cells overflow. Border-collapse determines whether adjacent borders are merged into one, and table-layout determines whether the table is a fixed size (fixed) or changes according to its content (auto). The table box model has the following pattern:

This design pattern can be used for all table elements.

1.5 Absolute Positioning Box Model

An absolutely positioned element is taken out of the normal order of elements, placing it one level higher or one level lower. It is positioned relative to the nearest positioned ancestor, or fixed to a certain position in the viewport. You can set the size of it, wrap it, or stretch it to match the size of the parent element. Any element can be absolutely positioned. The position of an absolutely positioned box does not affect the position of other boxes.

z-index controls the stacking order of positioned elements. Negative values ​​will place them below the normal arrangement layer, positive values ​​will place them above. The larger the value, the further forward it will be in the vertical arrangement. You can assign top, left, bottom, and right to the absolutely positioned box model. Once a value is set, left will be positioned based on the container of the absolutely positioned element and the positive or negative value you set. The same applies to the other three attributes. Use width to set the width of the element and height to set the height of the element. When margin is positive, the absolutely positioned box model moves towards the center of its container, and when it is negative, it moves away from the center. Borders and padding shrink the inner box of an absolutely positioned box that is stretched. The pattern of the absolutely positioned box model is as follows:

This design pattern can be applied to all elements.

1.6 Floating Box Model

Use float:left or float:right to make any element float. Floated elements are also deviated from the normal element arrangement order and are placed above the borders and backgrounds of adjacent block elements. This shrinks the floated element's parent so that when all child elements are floated, it disappears completely. Even if the floated element is out of the original element's alignment, it will cause the adjacent content in the line to be indented in a certain direction. Floating left will indent adjacent content to the right, while floating right will indent content to the left. Floated elements are positioned vertically at their original location. Within the parent element's padding, it is positioned horizontally from the right or left. Floated elements are arranged vertically one at a time at their original positions. When a floated element cannot be immediately adjacent to the next floated element, it will be moved below. The position, size, padding, borders, and margins of a floated element all affect the position of adjacent floated elements and adjacent inline content. Width and height are used to set the width and height of the floating element. Margin has a unique floating function. Positive margins will move the floating element away from its original position, moving other floating elements and inline content away from it, while negative margins will do the opposite. Border and padding will increase the outer box size of the floated element. A left-floated element's left margin and left padding will push it to the right, while its right margin and right padding will push other floated elements and inline content to the right further to the right. For right-floating elements, the opposite is true. The floating box model follows this pattern:

This design pattern can be applied to all elements.

2. Learning the positioning model

CSS provides six positioning models for placing elements: static, absolute, fixed, relative, floating, and relative floating. The static positioning model can position inline, inline-block, block, and table box models. Absolute and fixed positioning models can position absolute box models. The float positioning model can position the float box model. The relative positioning model can be used to position any box model relative to the absolute box model. The relative float positioning model can perform relative positioning on the float box model. Each positioning model uses the same basic set of properties to control positioning.

2.1 Static positioning

To arrange the elements one after another in the order of inline and block elements, you can use position: static applied to the elements. Within a block element, one or more block or inline elements are parsed vertically downward. Within an inline element, text and objects are parsed horizontally, line by line. The starting position of a static element is determined by the previous static element. The pattern is as follows:

Inline static elements:

Block static elements:

2.2 Absolute positioning

Absolute elements allow you to precisely control their position relative to their nearest positioned ancestor. Absolute elements are parsed in the positioning layer on the normal element arrangement order, just like an independent box model. Unlike floating elements, absolute elements are not fluid. You can use position:absolute to parse any element as an absolute box model. Use width and height to set its size. Percentages are relative to the nearest positioned box, not the parent element. You can assign values ​​to left, right, bottom, and top to place it on one side of the nearest ancestor element. You can use margin to offset the edges of an element relative to an edge of the nearest ancestor element. Use z-index to control the stacking order of elements. Elements with large z-index values ​​will be positioned closer to the user. The pattern is as follows:

2.3 Fixed positioning

You want to remove an element from its positioning layer and fix it to a certain position in the viewport, or you want it to remain in its original position in the order of elements. When the viewport scrolls, you don't want it to stay fixed. This is called a fixed positioned element or just a fixed element. You can use position:fixed to convert any element into a fixed positioning element. Fixed elements are positioned relative to the viewport rather than to the nearest positioned ancestor. So if you fix the element in its original position in the order, it will stay in place when the viewport scrolls. The pattern is as follows:

2.4 Relative Positioning

To control the stacking order of elements in their normal arrangement positions, you can use position:relative to position them relatively. Relative positioning of an element does not deviate from the normal element's arrangement position, nor does it change its shape in the normal arrangement position. For example, if an inline element spans multiple lines (one or more), then when it is relatively positioned it will retain this unique layout. You can optionally offset a relatively positioned element from its original alignment position using left and top. Assign position:relative to any element so that absolute descendant elements can be positioned relative to it. The pattern is as follows:

3: Box model exploration and learning

In CSS 2.1, block-level elements can only be rectangular in shape. When we need to calculate the overall size of a block-level element, we need to take into account the length and width of the content area, as well as the element's margins, padding, and borders. The box model can be divided into the standard W3C box model and the IE box model. The standard W3C box model is as follows:

Figure 1

The scope of this box model includes margin, border, padding, and content, and the content part does not include other parts. That is to say, when we design the width and height attributes of a block-level element in CSS, such as .box{width: 100px; height: 100px}, the width and height are only set for the content part, that is, they define the length of the area between padding-top and padding-bottom (the width of the area between padding-left and padding-right) in the above figure. Rather than the sum of content, padding, and border. The IE box model is as follows:

Figure 2

The scope of this box model includes margin, border, padding, and content. The difference from the standard W3C box model is that the content part of the IE box model includes border and padding. That is to say, when we design the width and height attributes of a block-level element in CSS, such as .box{width: 100px; height: 100px}, the width and height are the sum of the content, padding, and border.

For static positioned elements (i.e. no positioning) with width set to automatic, and for relatively positioned elements, the width is calculated by subtracting all horizontal margins, padding, borders, and scrollbars of the element from the width of its containing block. That is, subtract the width of the element's horizontal margins, padding, border, and scrollbar (if any) from the width of the containing block, and the remaining value is the value. For example,

Here, .test1 does not have a position property set, which is the default position: static. Among them, the html code is: <div class=”test1”>static positioning or relative positioning</div>. The result is:

Figure 3

That is, the width of the block is automatically extended to fill the width of its parent element.

But floated elements and absolutely positioned elements do the exact opposite; they shrink to fit their content. Suppose the .test1 in the previous example is rewritten as:

The html remains unchanged, so the result is:

Figure 4

In Figures 1 and 2, we can clearly see that in the examples of calculating the required area size of an element, the margins are already included in the calculation. But in fact, the adjacent vertical margins of non-positioned elements are added together to become the value of one of the larger width margins, not the sum of the two. This means that when calculating the actual size of the area needed to hold an element, it doesn't start from the edge of the margin, only the widest margin takes effect, and narrower margins are stacked on top of larger ones. As shown in the following figure:

Figure 5

Additionally, when an element's width is set to 100% (that is, the width of the parent element's content is 100%), it should not have any margins, padding, or borders, which would only make the area it is placed in require more area. This is often overlooked by designers and can seriously disrupt the layout of a page, causing content to either overflow or make elements wider than they should be. For example:

The html code is: <div class="contain"><div class="box"></div></div>. The result is as shown below:

That is to say, in the absence of margin and padding, 100% of the content can fill the parent element just right. Now suppose you change the style of .box to:

Keeping the rest unchanged, the result is:

At this point, the elements are misaligned, and only the left margin appears. The solution is to avoid adding specific values ​​to the width property in most cases, and only apply margins, padding, and borders.

IV. Summary

This week, I mainly learned about the box model and positioning model of HTML. I gained a better understanding of the various attributes in the box model and the relationship between them, which will help me to use them proficiently in future applications. At the same time, we have also further studied the browser's parsing of CSS.