CSS Learning Notes 【 Box Model 】

  • Content area – Represents the actual content portion of the box, which is determined by width width and height height
  • Inner pitch area – Represents the space between the box and the actual content, set by the padding property
  • Border area – Represents the border of the box and is the border between the inner pitch area and the margin area, set by the border property
  • Margin region – Represents the distance between the border of this box and the borders of other adjacent boxes, set by the margin property

content-box

Box-sizing: content-box (W3C box model) : The width and height of an element are expressed as the size of the content

Content-box is the default value for box-sizing, which means that all boxes are content boxes by default. The CSS properties width and height specify the width and height of the box’s content area.

border-box

Box-sizing: border-box (IE box) : the width and height of the element are shown as content + inside margin + border size

If box-sizing is set to border-box, the width and height attributes set the final width and height of the box, respectively

There is another special kind of box in the CSS box model: replacement elements.

Replacement elements are not affected by CSS

For example, to load an image with , we can limit the width and height of the box, and then use the Object-fit property to make the image fill the whole box with equal proportions, cut out the parts that do not fit, and then use object-position to set the image position in the box. Can be down or in the middle:

Common replacement elements are ,

Box type and layout

  • There areBlock-level boxandThe inline boxesTwo kinds of
  • You can do that by settingexternalandinternalDisplay types change the layout

The external display type controls the layout of adjacent boxes, including block-level boxes and inline boxes. They are the browser’s default layout.

The inner display type controls the arrangement of the sub-boxes within the box

Block level box block

Block-level boxes, such as div, P, h1, etc., take up the entire width of the browser, and the following box is squeezed into the next line.

Inline box inline

Inline boxes such as span, A, etc., whose width is the width of the content, will be followed by the following boxes.

Inline-block Display type

If you want the outer type of a box to remain inline, not to squeeze the following box into the next line, but you want to set the width, padding, and margin at the same time, you can use the inline-block display type, so the box has the width and height. And the padding and margin in both horizontal and vertical directions can take up the space of the surrounding box.

Resolve container collapse

If the box has a border, padding, height, min-height, or BFC, there will be no margin collapse

BFC(to be added)

Overflow :hidden (between adjacent boxes [such as bottom margin of one box and top margin of the next box], between parent and child boxes)

reference

Zxuqian. Cn/docs/CSS/bo…

Article history

Flex Layout

CSS Grid Layout