HTML design mode learning notes, design mode learning notes

HTML design mode learning notes, design mode learning notes

This week, I mainly learned the HTML design model. Now I will summarize my learning content as follows:

 

I. Learning the Box Model

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

The design mode of the box model is built-in In CSS. It defines the relationship between the following attributes: border, border, fill, and content. Each attribute consists of four parts: Top, right, bottom, and left. The four parts can be set at the same time or separately. The border has big and small colors, we can understand the thickness of the box we see in our life and the color of the box. The boundary is the distance between the box and other things, the content is what is packed in the box, and the materials filled in the free space in the filled box.

1.1 inline Box Model

Inline box models are parsed in the order of inline arrangement. They are sorted horizontally from left to right. When they exceed the width of their nearest terminal block ancestor, the new line is changed. Width, height, and overflow do not work on inline elements because they are always consistent with the width and height of the content. Margin and line-height can be applied to inline elements in some special way. The horizontal margin changes the position of inline elements in the order of arrangement. The positive value of a margin-left will keep the element away from its front, and the negative value will bring it closer. The positive value of margin-right will keep the element away from its next element, and the negative value will bring it closer. Margin-top and margin-bottom do not work on inline elements. Border sets borders for inline elements in a special way. Horizontal borders change the position of inline elements in the arrangement. The left border places the element on the left, and the right border places the next element on the right. The upper and lower borders are displayed outside the padding, but they are not extended to the row height or change the position of the element in the vertical direction. The template of this mode 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 inline display element.

 

1.2 inline block box model

Inline block elements are in the inline arrangement order, just like other inline boxes, but they also contain attributes of some block elements: margin, border, padding, width, and height. Inline block elements do not cross other rows. Inline block elements add Row Height to adapt to their own height, inner margin, border, and outer margin. Width and height are used to set the height and width of an element. You can expand or narrow down an alternative element, for example, to set its width or height to a specific value. You can also use the width: auto and height: auto to make the replacement element size consistent with the actual size. Assume a span of display: inline-block. You can set the width and height of the span to adjust the size. You can also wrap inline block elements with width: auto and height: auto. Width: 100% can be used to lengthen an inline block element, which is the same as a block element. The margin element will change the size of the element from the top, bottom, left, and right directions. The margin-top and margin-bottom will increase or decrease the Row Height, margin-left and margin-right draw closer or expand the distance between the element and its front and back elements horizontally. Border and padding can also be used to expand the peripheral size of inline elements.

Attribute	Function
Margin-top	Positive Value: Increase the Row Height
	Negative value: reduces the Row Height.
Margin-bottom	Positive Value: increases the element
	Negative value: Make the element shorter
Margin-left	Positive: Keep the element away from the element before it
	Negative value: bringing an element closer to its front
Margin-right	Positive Value: expands the distance between the element and the subsequent element.
	Negative value: Used to narrow the distance between an element and the following element.

The typical inline box model mode 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 block formatting environment, the block box model is arranged vertically from top to bottom, which is the normal arrangement of block elements. The block box model can contain other block box models, or they can end the block formatting environment and start an inline formatting environment that contains the inline box model. The terminal block element creates an inline formatting environment in its internal box, but its external box must be in the block formatting environment.

The length of a block element can be the same as that of its parent element, or smaller than or greater than that of its parent element. When its size is greater than the parent element, it will overflow. The overflow attribute is used to control how the browser handles overflow. In the block box model, width and height are used to set the width and height of the element. Width: auto indicates that the width of the element is the same as that of the parent element. height: auto indicates that the height of the element contains the child element. Margin-left and margin-right indent or extend the two sides of an extended block element, and 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 overlap them. The browser will offset the top and bottom margins of adjacent block elements. Use margin-left: auto and margin-right: auto to control the horizontal arrangement of block elements with fixed sizes. If width is set for a block element, margin-left: auto will arrange the block elements on the right of the parent element. margin-right: auto will arrange the block elements on the left of the parent element. Meanwhile, setting margin-left: auto and margin-right: auto will place the block element in the middle of the parent element. Border and padding also extend the outer width and outer height of the box model. The block box model mode 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 can be used for all block elements.

1.4 table Box Model

A table is a block box model with many rows of cells. The table is also in the arrangement of block elements, while the cells in the table are arranged by "rows" and "columns. The table has a margin but no padding. Cells have an internal margin but no external margin. Use width to set the width of the table. The width here refers to the width of the perimeter of the border, rather than the width in the padding. Use height to set the height of the table. The height here refers to the height of the perimeter of the border, rather than the height inside the padding. The Parsing Method of margin is determined by whether the table is set to a size, package, or stretch. When it is fixed with dimensions and packages, the margin moves the table and the following elements. The negative outer margin overlaps the adjacent elements with the table. When a table is stretched, the margin will indent the table, which will reduce its internal size and reduce the size of cells. Border will reduce the inner box of the table that has been defined or stretched. However, overflow cannot be applied to tables, because tables cannot overflow, and only the table cells can overflow. Overflow: hidden should be assigned to cells to ensure that the behavior of all browsers is consistent when cells with fixed sizes overflow. Border-collapse determines whether the adjacent Border is merged into one. table-layout determines whether the table is fixed or changed based on its content (auto ). The table box model mode 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 for all table elements.

1.5 absolute positioning box model

The absolute positioning element is separated from the normal arrangement of elements and placed on a higher or lower layer. It is relative to the nearest positioning ancestor to locate or fix a position in the window. You can set the size, wrap it, or stretch it to the same size as the parent element. Any element can be absolutely located. The location of the absolute location box model does not affect the location of other box models.

Z-index controls the stacked order of positioning elements. Negative values place them under the normal arrangement layer, and positive values place them above. The larger the value, it will be located in the vertical arrangement. You can assign top, left, bottom, and right values to the absolute positioning box model. When a value is set, left uses the container of the absolute positioning element as the benchmark, locate based on the positive or negative values you set. Similarly, it 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, it will move the absolutely positioned box model to its container center. When it is negative, it will stay away from the center. Border and padding will narrow down the inner box of the stretched absolute positioning box model. The absolute location mode of the 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

Float: left or float: right can be used to float any element. Floating elements are placed on the border and background of adjacent block elements in the normal order of element arrangement. This will narrow down the parent element of the floating element. When all child elements are floating, It will completely disappear. Even if the floating element is out of the arrangement of the original element, it will indent the adjacent content in the team in a certain direction. The left float will indent the adjacent content to the right, and the right float will indent the content to the left. The floating element is positioned vertically at the original position. In the padding of the parent element, it is positioned horizontally from the right or left. Floating elements are arranged vertically at the original position. When a floating element cannot be next to its next floating element, it moves to the bottom. The position, size, padding, border, and margin of the floating element affect the position of the adjacent floating element and the adjacent inline content. Width and height are used to set the width and height of floating elements. Margin has a unique floating function. The positive margin will keep the floating element away from its original position and keep other floating elements and inline content away from it. The negative margin is the opposite. Border and padding increase the outer box size of floating elements. The left margin and left margin of the left floating element will push it to the right, and its right margin and right padding will push other floating elements to the right inline content. For the right floating element, the opposite is true. 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.

 

Ii. Positioning Model Learning

CSS provides six positioning models for element placement: static, absolute, fixed, relative, floating, and relative floating. The static positioning model can locate inline, inline block, block, and table box models. The absolute and fixed positioning models can be used to locate the absolute box model. The floating location model can be used to locate the floating box model. The relative positioning model can be used to locate any box model outside the absolute box model. The relative floating location model can be used to locate the floating box model. Each positioning model uses the same group of basic attributes to control positioning.

2.1 static location

To arrange the elements in the order of inner and block elements, you can use position: static to apply them to the elements. Within a block element, one or more block or Inline elements are parsed vertically down. In an inline element, text and objects are parsed horizontally one row at a time. The starting position of a static element is determined by the preceding static element. The mode 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 precisely control the locations of recent ancestor elements relative to them. The absolute element is parsed at the positioning layer in the normal element arrangement sequence. It is like an independent box model. Unlike floating elements, absolute elements do not flow. You can use position: absolute to parse any element as an absolute box model. Use width and height to set its size. The percentage is relative to the nearest box model, not the parent element. You can assign values to left, right, bottom, and top, and place them on a side of the nearest ancestor element. You can use margin to offset the edge of an element relative to an edge of the closest ancestor element. Use z-index to control the stacking sequence of elements. The element with a large z-index value is located near the user's positioning layer. The mode 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 to remove an element from its positioning layer and fix it to a position in the window, or you want it to stay in the position in the original element arrangement order. When the window is rolling, you don't want it to follow. This is called a fixed positioning element or a fixed element. You can use position: fixed to convert any element into a fixed position element. Fixed elements are placed relative to Windows rather than other ancestor elements closest to positioning. So if you fix the elements in the original order, the elements will remain unchanged when the window is rolling. The mode 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

To control the stack sequence of elements in normal positions, you can use position: relative to locate the elements. The positioning of relative elements is not separated from the normal arrangement of elements, nor does it change its shape when it is in the normal arrangement. For example, if an inline element spans multiple rows (greater than or equal to one row), it retains this unique layout when it is relatively positioned. You can selectively offset the relative positioning element from its original position, and use left and top. Assign position: relative to any element, so that the absolute descendant element can be located relative to it. The mode is as follows:

SELECTOR {

Position: relative;

Z-index: value;

Left: auto;

Top: auto;

}

 

Iii. Box Model Inquiry Learning

In CSS2.1, block-level elements can only be rectangular. When we need to calculate the overall size of a block-level element, we need to set the length and width of the content area (content area) together with the outer and inner margins of the element, and the border is included. 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 range of the box model includes margin, border, padding, and content, and the content Part does not contain other parts. That is to say, when we design the width and height attributes of a block-level element in css, for example. in box {width: 100px; height: 100px}, the width and height are only set for the content part, that is, the length of the area between padding-top and padding-bottom is defined (the width of the area between padding-left and padding-right ). Instead of content, padding, and border sum. The IE box model is as follows:

 

Figure 2

The box model has the following scopes: margin, border, padding, and content. Unlike the standard W3C box model, the content section of the IE box model contains border and padding. That is to say, when we design the width and height attributes of a block-level element in css, for example. box {width: 100px; height: 100px}, where width and height are the sum of content, padding, and border.

For static positioning elements with the automatic width (I .e. no positioning) and relative positioning elements, the method for calculating the width is, subtract the width of the block they contain from all the outer margins, inner margins, borders, and scroll bars on the horizontal side of the element. That is to say, the remaining value is to remove the horizontal margin, inner margin, border, and scroll bar (if any) of the element from the width of the contained block. For example,

. Test1 {

Height: 200px;

Padding: 20px;

Margin: 30px;

Border: 10px dotted gray;

Background: red;

}

Here,. test1 does not set the position attribute, that is, the default position: static. Here, the html code is: <div class = "test1"> static location or relative location </div>. Result:

 

Figure 3

That is, the block width is the extended width area of the parent element that is automatically filled with it.

But floating elements and absolute positioning elements have the opposite effect. They contract so that the package sticks to the content. Suppose the example. test1 is rewritten:

. Test1 {

Height: 200px;

Padding: 20px;

Margin: 30px;

Border: 10px dotted gray;

Background: red;

Position: absolute;

}

The result is:

 

Figure 4

In Figure 1 and figure 2, we can clearly see that the Chinese and foreign margins for calculating the size of the area required by the element are included in the calculation. But in fact, the adjacent outer margin of the vertical element without positioning will be combined into a larger width of the outer margin value, not the sum of the two. This means that when the calculation actually needs to store the area of an element, it is not counted from the edge of the outer margin, only the widest margin will take effect, in addition, the narrow margin is superimposed on a large margin. As shown in:

 

Figure 5

In addition, 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 outer margin, inner margin, or border, this only requires a larger area for the area to be placed. This is often ignored by designers and seriously disrupts the layout of pages. In this way, the content will either overflow or make the elements wider than they should be. For example:

. Box {

Background: red;

Height: 200px;

Width: 100%;

}

. Contain {

Background: yellow;

Height: 220px;

Width: 300px;

}

The html code is: <div class = "contain"> <div class = "box"> </div>. Result

 

That is to say, in the absence of margin and padding, 100% of content can properly fill the parent element. Now let's change the. box style:

. Box {

Background: red;

Height: 200px;

Width: 100%;

Padding: 10px;

Margin: 10px;

}

If the remaining values remain unchanged, the result is:

 

At this point, the element is misplaced, but the margin on the left is displayed. The solution is to avoid adding specific values to the width attribute in most cases, and apply only the outer margin, inner margin, and border.

 

Iv. Summary

This week, I learned mainly about the html box model and positioning model, and learned more about the attributes of the Box Model and the relationship between attributes, it helps me to be familiar with future applications. At the same time, I also learned more about css parsing by the browser.