CSS Self-study note: CSS3 box model

CSS3 is an upgraded version of CSS technology, the latest version.

As far as CSS is concerned, it is a module, is a large and complex module, but in the CSS3, this a large module decomposition into a simple and easy to understand the small module, while CSS3 added some new modules, so CSS3 toward the direction of the modular development.

The more important modules in CSS3 are: selectors, box models, backgrounds and borders, text effects, 2d/3d transformations, animations, multi-column layouts, and user interfaces.

CSS3 selectors are commonly used in the same sort of CSS selectors.

CSS3 Box Model

The box model is a very important model for CSS3, which refers to how elements are displayed and how elements interact with each other.

A box is made up of elements, padding, borders, and margins, so every element you see in a browser can be understood as a box. Multiple boxes are arranged in different ways (up and down, tied, nested, etc.) and form the Web page we see.

Box composition structure diagram:

Similar to the CSS box, there is a picture can be seen, the width of a box = left and right margin + border + left and right margin + content width. If two boxes are nested, then two boxes (box B nested in box A) are lifted to the margin of +b of the inner margin of a.

What we can see in the box model is a border, an element. Both the padding and the margins are virtual, and we can only see their effect on the elements, so there are only two types of colors in the box model: the border and the background color.

Three types of distances can be defined in a box model: border values, margin values, padding values, to some extent, to modify the elements.

Note:

• The Box Properties (margin,padding) for most elements are 0 by default.
• The default value of the Box property (margin,padding) with partial elements is not 0, so it is necessary to define these properties as 0 first.
• The border property of the input element is defined as 0 to beautify the input box and button.

We can simply beautify the box model (it should be more lot better than the default)

Similarly, we can define different styles for the borders of elements such as tables, pictures, and so on.

For a box model, when the style is defined, you need to consider where to put it? So the box should be positioned.

There are three types of positioning of the box:

1. In the normal flow of the positioning
   • How HTML elements are positioned by default
   • Inline elements are arranged horizontally within the same row
   • Block-level elements are vertically arranged
2. Positioning under floating properties
3. Positioning properties in the positioning

Note: The default positioning of the box is the positioning of the normal flow.

If we don't add a border to the element (such as left). But when you add an element border, it becomes the right image below, which looks crowded, and when an element has a background color, it will see that the elements overlap.

So the appropriate adjustment of the elements of the border, margin, padding, you can make the layout between the elements more reasonable.

It is also important to note that sometimes we define the borders, margins, and padding of elements, which can also cause overlap between elements.

At this point we can use the Display property, which controls whether the element is displayed as a row element or as a block element or is not displayed.

Display Properties

Properties	features
Block	Always start on a new line. Height, row height, and top and bottom margins can be controlled. The width default is 100% of its container, unless you set a width with width.
Inline	And the other elements are on one line. Height, row height and top and bottom margins are not changed. Width is the width of the text or picture, and it cannot be changed.
None	The element will not be displayed, nor will it occupy a position in the document. Similar to Visibility:hidden. It is mainly used for drop-down menus, tab panels, etc., where it needs to be hidden.
...........................	.......................................

Where the display properties need to be defined:

• Let an inline element start from the new line.
• Keep a block element and other elements on one line.
• Controls the width of the row elements (for example, vertical list, navigation bar, and so on).
• ......

When we define multiple row elements, they are on the same line:

When we add display:block to these line element style definitions, they are displayed as a block element: