CSS Learning summary-box model

Note: The full-text summary from the web Developer site, of course, the interval will also tidy up some ideas and formatting added to the layout.

CSS Box Model (translator Note: Also known as the "box model") is the basis of page layout-Each element is represented as a rectangular box, the contents of the box, the padding, the boundary, and the margin are like the onion's membrane, one layer is built up. When the browser renders the page layout, it calculates what style to use for the contents of each box, how large the onion layer is around, and where the box is placed relative to the other boxes. Before you understand how to create a CSS layout, you need to understand the box model.

Box Properties

Each element of the document is constructed as a rectangular box within the document layout, and the size of each layer of the box can be adjusted using some specific CSS properties. The relevant properties are as follows:

【 widthAnd height"Width and height

widthand height set the width and height of the content box . The content box is the area where the contents of the box appear-including the text content within the box, and other boxes that represent the nested subelements.

Note : There are other properties that can handle the size of the content more skillfully--setting the size constraint rather than the absolute size. These properties include min-width , max-width ,, min-height and max-height .

【 paddingThe inner margin

padding represents the padding of a CSS box-This layer is between the outer edge of the content box and the inner edge of the boundary.

The size of the layer can be padding set for all four edges at once by using the shorthand property, or with padding-top , padding-right ,, padding-bottom and padding-left properties set one edge at a time.

• Padding-top refers to the height of an element in the top of the inner margin region (padding area).

• Padding-bottom refers to the height of an element below the inner margin region (padding area).

• Padding-left refers to the width of the left side of an element in the inner margin area (padding areas).

• Padding-right refers to the width of an element to the right in the inner margin area (padding areas).

• The padding (padding) refers to the area between the contents of an element and the bounding rectangle. Unlike margin (margin), the padding (padding) is not allowed to have negative values. The padding (padding) can declare an element's four-directional padding (paddings) with four values, which is a CSS abbreviation property.

【 borderThe Border border

The border property of CSS is a shorthand property for setting various individual boundary properties. Border can be used to set values for one or more of the following properties: Border-width, Border-style, Border-color.

The bounds of the CSS box (border) is a separation layer, located between the outer edge of the inner margin and the inner edge of the margin. The default size of the boundary is 0--to make it invisible--but we can set the thickness, style, and color of the boundary to make it appear.

borderThe shorthand property allows us to set all four edges at once, for example, border: 1px solid black; but this shorthand can be overridden by the more detailed properties of the various common writes:

• border-top,,, border-right border-bottom border-left : Set the boundary thickness/style/color for one side, respectively.

• border-width, border-style , border-color : Set only the thickness/style/color of the boundary, respectively, and apply to all four-sided boundaries.

• You can also set up three different properties for an edge individually, such as,, border-top-width border-top-style , and border-top-color so on.

Report:

• Border-top is the abbreviation for Attributes Border-top-color, Border-top-style, and Border-top-width. These properties are border the bounding rectangle that describes the top of an element.

• Border-right is the abbreviation for Attributes Border-right-color, Border-right-style, and Border-right-width. These properties are border the border that describes the right side of an element.

• The Border-bottom shorthand property sets all properties of the lower border: Border-bottom-color,border-bottom-style and Border-bottom-width to a declaration. These properties describe the bottom border style of the element.

• Border-left is the abbreviation for Attributes Border-left-color, Border-left-style, and Border-left-width. These properties are border the border that describes the left side of an element.

• Border-style is a CSS shorthand property that sets the style of all the borders of an element.

• Border-color is a shortcut property for setting the four border color of an element: Border-top-color, Border-right-color, Border-bottom-color, Border-left-color

【 margin"Margin

Margin represents the outer area around the CSS box, called the margin, which pushes other CSS boxes in the layout. Its performance is very similar to padding; The shorthand property is margin , a single attribute is,,, margin-top margin-right margin-bottom and margin-left .

Note : The margin has a special behavior called 外边距塌陷（margin collapsing） : When two boxes touch each other, their spacing takes the maximum of two adjacent outer boundaries, not the sum of the two.

• The margin property sets the margin property for all four (up or down) directions for a given element. This is a shorthand for the four margin property settings. The four margin property settings are: Margin-top, Margin-right, Margin-bottom, and Margin-left. The specified margin is allowed to be negative.

• The Margin-top property is used to set the top margin of an element, and you can also use a negative value.

• The Margin-bottom property is used to set the bottom margin of an element, allowing negative values to be set. A positive value will let it be farther from the adjacent block relative to the normal flow, and the negative value will make it closer.

• The Margin-left property sets the left margin of the box model associated with the element. This value can be negative.

• The margins of the two box models that are arranged vertically are overlapping, called margin collapsing.

Some tips and ideas

• By default background-color / background-image extends to the inner edge of the border. background-clip(Background-clip sets whether the background of the element (background picture or color) extends below the border. ) property to change.

• If the content box becomes larger than the sample Output window, it overflows from the window, and a scroll bar appears, and you can scroll through the window to see what's left of the box. You can use the overflow (overflow property to specify whether to clip content, display scroll bars, or display overflow content when content overflows its block-level container. ) property to control overflow.

• The height of the box does not conform to the length of the percentage, and the height of the box is always the height of the box content, unless you specify an absolute height (such as px or EM), which is more practical than the default 100% on the page.

• Border also ignores the percent width setting.

• You should note that the total width of the box is,,,, and the sum of the width padding-right padding-left border-right border-left attributes. Annoying in some cases (for example, what if you want a box to occupy 50% of the width of the window, but the boundary and padding are expressed in pixels?) To avoid this problem, it is possible to use attributes box-sizing to adjust the box model. Using the value border-box , it changes the box model to this new model:

The Box-sizing property is used to change the default CSS box model used to calculate the width and height of an element. You can use this property to simulate the behavior of browsers that do not correctly support CSS box model specifications.

Advanced Box Actions

In addition to the width, height, border, padding, and margin of the settings box, there are other properties that can change their behavior. This section discusses these additional properties.

Overflow flow

When you use absolute values to set the size of a box (for example, the width/height of a fixed pixel), the allowable size may not be suitable for placing content, in which case the content will overflow from the box. We use overflow attributes to control the occurrence of this situation. It has some possible values, but the most common ones are:

• auto: When there is too much content, the overflow content is hidden, and then a scroll bar appears to let us scroll through all the content.
• hidden: Overflow content is hidden when there is too much content.
• visible: When there is too much content, the overflow content is displayed outside the box (this is the default behavior)

This example shows how these settings work:

The first is the HTML code:

<pclass="AutoScroll">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempus turpis id ante mollis dignissim. Nam sed dolor non tortor lacinia lobortis ID dapibus nunc. Praesent iaculis tincidunt augue. Integer efficitur sem eget risus cursus, ornare venenatis augue hendrerit. Praesent non elit metus. Morbi vel sodales ligula.</p><pclass="Clipped">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempus turpis id ante mollis dignissim. Nam sed dolor non tortor lacinia lobortis ID dapibus nunc. Praesent iaculis tincidunt augue. Integer efficitur sem eget risus cursus, ornare venenatis augue hendrerit. Praesent non elit metus. Morbi vel sodales ligula.</p><pclass="Default">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempus turpis id ante mollis dignissim. Nam sed dolor non tortor lacinia lobortis ID dapibus nunc. Praesent iaculis tincidunt augue. Integer efficitur sem eget risus cursus, ornare venenatis augue hendrerit. Praesent non elit metus. Morbi vel sodales ligula.</p>

Then the CSS code that is applied to the HTML:

P{  width  : 400px;  Height : 2.5em;  padding: 1em 1em 1em 1em;  Border : 1px Solid Black;}. AutoScroll { overflow: Auto;    }. Clipped    { overflow: Hidden;  }. Default    { overflow: Visible; }

The above code gives the following results:

Background clipping (Background clip)

The background of the box is made up of colors and pictures, which are stacked together ( background-color , background-image ). They are applied to a box and are then drawn underneath the box. By default, the background extends to the edge of the boundary. This is usually OK, but in some cases it's annoying (if you have a tiled background map, you just want it to extend to the edge of the content.) ), the behavior can be adjusted by setting the properties of the box background-clip .

Let's take a sample to see how this works. The first is our HTML code:

<div class="default"></div><div class="padding-box"></div><div class="content-box"></div>

Then the CSS code:

Div{  width  : 60px;  Height : 60px;  Border : 20px Solid Rgba (0,0,0,0.5);  padding: 20px;  margin : 20px 0;  background-size    : 140px;  background-position: Center;  Background-image   : URL (' Https://mdn.mozillademos.org/files/11947/ff-logo.png ');  Background-color   :Gold;}. Default     { Background-clip: Border-box;  }. Padding-box { Background-clip:Padding-box; }. Content-box { Background-clip: Content-box; }

The code above produces the following results:

Contour (Outline)

Finally, it's important to note that a box outline is something that looks like a border but doesn't belong to a box model. It behaves the same as the boundary, but does not change the size of the box (more precisely, the contour is outlined outside the bounding box and within the margin area)

Note: When using the outline attribute, it should be noted that it is generally used only in situations where there is a need for usability, for example, when some users click on it to use outline to indicate highlighting and availability, if you want to use outline, Be sure not to confuse users because it looks like a link highlighting.

CSS box type

All we said before is that all applications for boxes represent block-level elements, however, CSS has some other types of boxes that behave differently. We can display set the box type of the element through the property. displayproperty has a number of property values. In this article, we will focus on the three most common types: block , inline , andinline-block。

• A block box block is a box that is defined as stacked on another box (for example, its content is exclusive to one row), and it can be set to its wide height, and all previous applications for the box model apply to block boxes (box block )

• The inline box inline is the opposite of the Block box, and it follows the text of the document (for example: it will appear on the same line as the surrounding text and other inline elements, and its contents will be disturbed as the text part flows as text in a paragraph), set the width height of the inline box to be invalid, set padding, Both margin and border update the position of the surrounding text, but there is no effect on the surrounding block boxes (box block ).

• The inline block box inline-block is like a collection of the above two: it does not re-start a row but will flow as the surrounding text, like the inline box, inline and he can set the width height and maintain the integrity of its block properties like a block box, which does not break in the paragraph line. (In the following example, the inline block box is placed on the second line of text because there is not enough space in the first row and does not break through two rows.) However, if there is not enough space, the inline box breaks on multiple lines, and it loses the shape of a box. ）

Note: The default state of the display property value, block-level element display: block , inline elementdisplay: inline

These things may sound confusing to you in a short time, so let's take a look at some simple little examples now.

First, the HTML code:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<spanclass="inline">Mauris tempus turpis id ante mollis dignissim.</span>Nam sed dolor non tortor lacinia lobortis ID dapibus nunc.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<spanclass="Block">Mauris tempus turpis id ante mollis dignissim.</span>Nam sed dolor non tortor lacinia lobortis ID dapibus nunc.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<spanclass="Inline-block">Mauris tempus turpis id ante mollis dignissim.</span>Nam sed dolor non tortor lacinia lobortis ID dapibus nunc.</p>

Now let's add some CSS:

P{  padding : 1em;  Border  : 1px Solid Black;}Span{  padding : 0.5em;  Border  : 1px Solid Green;  / * That makes the box visible, regardless of its type * /  Background-color: Yellow;}. Inline       { Display: inline;       }. Block        { Display: Block;        }. Inline-block { Display: Inline-block; }

The above code gives the result, showing the different effects of the display type:

Example: Making a triangular box model

The HTML code is as follows:

<!--制作三角形--><div class="triangle"></div>

CSS code:

.triangle  { width:  0              height:  0                 /* only defines the bottom and left and right sides of the box border and makes them coincident creates a triangle */ border-bottom:             30px  solid  red              /*transparent fully transparent */ border-left:             30px  solid  transparent   border-right:         30px  solid  transparent      

effect, and of course you can change the color and the length of the three edges to make isosceles triangle and so on:

End
2018-06-01

CSS Learning summary-box model