HTML Design Patterns Learning notes

This week I mainly learned the design pattern of HTML, I will now summarize the following:

A Study of Box model

A basic design model in CSS is called a box model, which defines how elements are interpreted as boxes. I have studied six kinds of box models, namely the inline box model (inline box), the inline block box model (inline-block box), the Block box model (block box), the Table box Model (table box), the Absolute positioning box model (absolute box) and a floating positioning box model (floated box).

The box model design pattern is built into the CSS, which defines the relationships between the following attributes: boundary, border, padding, and content. Each property consists of four parts: top, right, bottom, left, four parts can be set at the same time, and can be set separately; The border has a size and color, we can understand the thickness of the box in life and the color of the box is made of material, the border is the box and other things to keep how much distance, The contents are in the box, and the filling box is filled with the material in the spare place.

1.1 Inline Box model

The inline box model is parsed in an inline order, which is sorted from left to right, and when it exceeds the width of their nearest terminal block ancestor, it is replaced by a new line. Width,height and overflow do not work on inline elements because they always match the width and height of the content. Margin and line-height can be applied to inline elements in a particular way. The horizontal margin changes the position of the inline element in the permutation order. A margin-left positive value will keep the element away from the element in front of it, and a negative value will bring it closer. A positive value of margin-right will keep the element away from its next element, and a negative value will bring it closer. Margin-top and Margin-bottom inline elements are not working. The border is a special way to set the border for inline elements, and a horizontal border changes the position of inline elements in the arrangement. The left border causes the element to be left and the right border to make the next element on the right. The top and bottom borders appear outside the padding, but do not extend to row heights or change the position of elements in the vertical direction. The template for this pattern can be represented as follows:

inline_selector{

Display:inline;

Visibility:value;

Line-height:value;

Margin:value;

Padding:value;

Border:width style color;

}

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

1.2 Inline block Box model

Inline block elements are in an inline arrangement, just like any other inline box, except that it also contains the properties of some blocky elements: margin, border, padding, width, and height. Inline block elements are not intersected with other rows. Inline block elements add row heights to accommodate their height, padding, borders, and margins. Width and height Set the height and width of the element, and you can enlarge or shrink an alternative element, as long as you set their width or height to a specific value. You can also use Width:auto and Height:auto to make the size of the replacement element match the actual size. Assuming a display:inline-block span, set their width and height to be resized. The inline block elements can also be wrapped with Width:auto and Height:auto. You can lengthen an inline block element by using width:100%, which is the same as the block element. The margin element will change the size of the element from up and down four directions, and Margin-top and margin-bottom will increase or decrease the row height, and margin-left and Margin-right will pull or widen the distance between the element and its elements in a horizontal direction. Border and padding can also be used to extend the outer dimensions of inline elements.

Property	Role
Margin-top	Positive value: Increase row height
	Negative value: Decrease row Height
Margin-bottom	Positive value: Makes the element taller
	Negative value: Makes the element shorter
Margin-left	Positive value: Keep the element away from the element in front of it
	Negative value: Makes the element closer to the element in front of it
Margin-right	Positive value: Allows the element to widen its distance from the subsequent element
	Negative value: Enables the element to narrow its distance from the following elements

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

selector{

Display:inline-block;

Line-height:value;

Overflow:value;

Visibility:value;

Width:value;

Height:value;

Margin:value;

Padding:value;

Border:width style color;

}

This design pattern can be applied to all inline elements.

1.3 Block Box model

In the blocky format environment, the Block box model is arranged vertically from top to bottom, which is the normal arrangement of block elements smoothly. The Block box model can contain other block box models, or they can end the blocky formatting environment and begin an inline formatting environment with an inline box model. The terminal block element creates an inline formatting environment in its inner box, but its outer box must be in a blocky format at this time.

The length of a block element can be the same as its parent element, or it can be less than or greater than its parent element. When its size is larger than the parent element, it overflows. The overflow property is used to control how the browser handles overflows. In the Block box model, you set the width and height of the element with width and height. Where Width:auto means that it makes the width of the element consistent with the parent element, height:auto that it makes the element's height wrap around its child elements. Margin-left and Margin-right are indented or epitaxial on either side of a stretched block element, and they adjust the size of the block element that is already set. Margin-top and margin-bottom can increase or decrease the distance between different block elements, or even allow them to 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 arrangement of blocky elements that have fixed dimensions. If a block element is set Width,margin-left:auto The block element is arranged on the right side of the parent element, Margin-right:auto arranges the block elements to the left of the parent element. Setting Margin-left:auto and Margin-right:auto at the same time will cause the block element to be in the middle of the parent element. Border and padding also extend the outer and outer height of the box model. The pattern of the Block box model is as follows:

selector{

Display:block;

Overflow:value;

Visibility:value;

Width:value;

Height:value;

Margin:value;

Padding:value;

Border:width style color;

}

This design pattern is available for all block elements.

1.4 Form Box Model

A table is a block-box model with many rows of cells. Tables are also arranged in a block element, and cells in a table are arranged in rows and columns. The table has an outer margin but no inner margin. The cell has an inner margin but no margin. Set the width of the table with width, which refers to the width of the perimeter of the border rather than the width of the inner margin. Set the height of the table with height, where the height refers to the perimeter of the bounding rectangle and not the height of the inner margin. The resolution of margin is determined by whether the table is set to a size, parcel, or stretch. When it is fixed with dimensions and parcels, the margins move the table and the next elements. A negative margin causes adjacent elements to overlap the table. When the table is stretched, the margin will indent the table, which will make its internal dimensions smaller and the cell size reduced. Border will make the inner box of a table with a defined size or stretch smaller. The overflow cannot be applied to the table because the table cannot overflow, only the table cell can overflow. Overflow:hidden should be assigned to cells to ensure that all browsers behave consistently when a cell with a fixed size overflows. Border-collapse determines whether the adjacent border is merged into one, and table-layout determines if the table is fixed or changed according to its content (auto). The pattern of the tabular box model is as follows:

selector{

display:table;

Visibility:value;

Width:value;

Height:value;

Margin:value;

Border:width style color;

Border-collapse:value;

Table-layout:value;

}

This design pattern can be used with all table elements.

1.5 Absolute Positioning Box model

An absolutely positioned element is detached from the normal sequence of elements, placing it on a higher or lower layer. It is relative to the nearest locating ancestor to locate or fix a position in the viewport. You can set the size for it, wrap it, or stretch it to a size that is consistent with the parent element. Any element can be absolutely positioned. The position of the absolute positioning box model does not affect the location of the other box models.

Z-index controls the stacking order of positioned elements. Negative values place them below the normal arrangement, and positive values place them on top. The larger the value, the higher it will be in front of the vertical arrangement. The top,left,bottom,right can be assigned to an absolute positioning box model, and when a value is set, left is used as a reference for the container of the absolutely positioned element and positioned according to the positive or negative values you set. Similarly, it applies to the other three properties. Sets the width of the element with width, and the height of the element. When margin is positive, it moves the box model of absolute positioning to its container center, and when it is negative, it is far away from the center. Border and padding shrink the inner box of the extruded absolute positioning box model. The mode of the absolute positioning box model is as follows:

selector{

position:absolute_fixed;

Z-index:value;

Overflow:value;

Visibility:value;

Left:value;

Right:value;

Top:value;

Bottom:value;

Width:value;

Height:value;

Margin:value;

Padding:value;

Border:width style color;

}

This design pattern can be applied to all elements.

1.6 Floating Box model

Use Float:left or float:right to allow any element to float. Floating elements are also separated from the normal element arrangement and placed on top of the borders and backgrounds of the neighboring block elements. This narrows the parent element of the floating element, and it disappears completely when all the child elements are floating. Even if the floating element is detached from the arrangement of the original element, it will indent the adjacent contents of the team in a certain direction. The left float indents the neighboring content to the right, and the right floats to indent the content to the left. The floating element is positioned vertically in its original position. In the inner margin of the parent element, it is positioned horizontally from the right or left. The floating elements are arranged vertically in the original position. When the floating element cannot be adjacent to its next floating element, it moves to the bottom. The position, size, padding, border, and margin of a floating element affect the position of adjacent floating elements and adjacent inline content. Width and height are used to set a floating element's widths and heights. Margin has a unique floating function, the positive margin will make the floating element away from its original position, so that other floating elements and inline content away from it, the negative margin is just the opposite. Border and padding increase the outer box size of the floating element. The left and left padding of a floating element will push it to the right, while its right and right padding will move other floating elements to the right with inline content on the right. The opposite is true for right-floating elements. The pattern of the floating box model is as follows:

selector{

Float:left_right;

Width:value;

Height:value;

Z-index:value;

Margin:value;

Padding:value;

Border:width style color;

Overflow:value;

Visibility:value;

}

This design pattern can be applied to so elements.

Second: The study of positioning model

CSS provides 6 positioning models for placing elements: static, absolute, fixed, relative, floating, and relative floating. The static location model can be positioned inline, inline block, block, and tabular box models. Absolute and fixed positioning models are able to locate the absolute box model. The floating positioning model can locate the floating box model. The relative positioning model can be positioned relative to any box model outside the absolute box model. The relative floating positioning model can be positioned relative to the floating box model. Each positioning model uses the same set of properties to control the positioning.

2.1 Static positioning

You can use Position:static to apply an element to an element by arranging it in the order in which they are inline and block elements, one after another. Within a block element, one or more block elements or inline elements are parsed vertically. Within an inline element, text and objects are parsed horizontally, one line at a row. The starting position of the static element is determined by the preceding static element. The pattern is as follows:

Inline static elements:

inline-selector{

position:static;

Line-height:value;

Margin-left:value;

Margin-right:value;

}

Block static elements:

block-selector{

position:static;

Width:value;

Height:value;

Margin:value;

}

2.2 Absolute Positioning

Absolute elements allow you to position the nearest ancestor elements relative to their location to precisely control their location. Absolute elements are resolved in the position layer of the normal element arrangement, just like a separate box model, unlike a floating element, an absolute element is not flowing. You can use Position:absolute to interpret any element as an absolute box model. Use width and height to set its size. The percentage is relative to its location nearest the box model, not the parent element. You can assign a value to left, right, bottom, and top, placing it on one side of the nearest ancestor element. Margin allows the edge of an element to be offset relative to one of the nearest ancestor elements. Using Z-index to control the stacking order of elements, it is important to have a large z-index that is close to the user's location layer. The pattern is as follows:

selector{

Position:absolute;

Z-index:value;

Width:value;

Left:value;

Right:value;

Top:value;

Bottom:value;

Margin:value;

}

2.3 Fixed positioning

You want the element to break out of its location layer and fix it somewhere in the window, or you want it to remain in the order of the original element. When the window scrolls, you don't want it to follow. This is known as fixed positioning elements or fixed elements. You can use position:fixed to convert any element into a fixed positioning element. Fixed elements are placed relative to the window rather than to other nearest ancestor elements. So if you put the element in a position that is in the original order, it will also stay in place when the window is scrolled. The pattern is as follows:

selector{

position:fixed;

Z-index:value;

Width:value;

Height:value;

Margin:value;

Left:value;

Top:value;

Bottom:value;

Right:value;

}

2.4 Relative positioning

In order to control the stacking order of the elements in the normal position, the position:relative can be used for relative positioning. The position of the relative element does not deviate from the normal arrangement of elements, nor does it change its shape when it is in the normal position. For example, if an inline element spans multiple lines (greater than or equal to one row), it retains this unique layout when it is relatively positioned. You can selectively offset relative positioning elements from its original arrangement, using left and top. Assign position:relative to any element so that an absolute descendant element can be positioned relative to it. The pattern is as follows:

selector{

position:relative;

Z-index:value;

Left:auto;

Top:auto;

}

Three: Box Model inquiry Learning

In CSS2.1, block-level elements can only be rectangular shapes. When we need to calculate the overall size of a block-level element, we need to simultaneously calculate the width of the content area (contents), along with the margins, padding, and borders of this element. The box model can be divided into standard box model and IE box model. Standard box models such as:

Figure 1

The box model's scope includes margin, border, padding, content, and the Content section contains no other parts. That is, when we design a block-level element's width and height properties in CSS such as. box{width:100px; height:100px}, the width and height are only set on the Content section, That is, the length of the area between Padding-top and Padding-bottom in the definition (the width of the area between Padding-left and Padding-right). Instead of the content, the padding, the sum of the borders. And the IE box model such as:

Figure 2

The box model's range includes margin, border, padding, content, and the standard box model: The Content section of the IE box model contains border and padding. That is, when we design a block-level element's width and height properties in CSS such as. box{width:100px; height:100px}, the width and height are the sum of content, padding, and borders.

For statically positioned elements with a width of automatic states (that is, no positioning), and relative positioning elements, the method for calculating widths is to subtract the width of the block from all margins, padding, borders, and scrollbars of this element's landscape. That is, the width of the element's horizontal margin, padding, border, scroll bar (if present) is removed from the width of the containing block, and the remaining values are the same. To give an example,

. test1{

height:200px;

padding:20px;

margin:30px;

border:10px dotted grey;

background:red;

}

Here,. Test1 does not have the Position property set, which is the default position:static. Where 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 an extension that fills the width area of its parent element automatically.

But floating elements and absolute positioning elements, they result in the opposite, they shrink so that the content is wrapped tightly. Let's say that the. Test1 of the example is rewritten as:

. test1{

height:200px;

padding:20px;

margin:30px;

border:10px dotted grey;

background:red;

Position:absolute;

}

The HTML does not change, then the result is:

Figure 4

In Figure 1 and Figure 2, we clearly see that the margin is already included in the calculation in the example of the size of the area required for the calculation element. In fact, the adjacent margins of a longitudinal, non-anchored element are superimposed into the values of one of the larger widths, not the sum of the two. This means that when the calculation actually needs to hold the size of an element's area, it does not start with the edge of the margin, only the widest margin will take effect, and the narrower margins will overlap with the larger ones. As shown in the following:

Figure 5

Also, when the width of an element is set to 100% (that is, the content width of the parent element is 100%), it should not have any margin, padding, or border, which will only make the area where it is placed needs to be larger. This is often overlooked by designers and seriously disrupts the layout of the page so that the content either overflows or makes the elements wider than they should be. To cite an example:

. box{

background:red;

height:200px;

width:100%;

}

. contain{

Background:yellow;

height:220px;

width:300px;

}

And the HTML code is: <div class= "contain" ><div class= "box" ></div></div>. Results

In other words, without margin and padding, 100% of the content can fill the parent element exactly. Now suppose to change the style of. Box to:

. box{

background:red;

height:200px;

width:100%;

padding:10px;

margin:10px;

}

The rest remains unchanged, the result is:

At this point, the element is misplaced, but there is a margin on the left. The workaround is to avoid adding specific values to the width attribute in most cases, and apply only margins, padding, and borders.

Four: summary

This week, I learned about the box model and the positioning model of HTML, and I have a better understanding of the relationships between the various attributes and attributes in the box model, which helps me to be proficient in future applications. At the same time, the browser's parsing of CSS has been further studied.

HTML Design Patterns Learning notes