The introduction of CSS box model

Time:2020-12-4

Content, padding, border, margin, CSS box model all have these properties. These attributes can be understood with a metaphor of box, a common thing in daily life, so it is called box model. CSS box model is a kind of thinking model used by CSS technology which is often used in web design.

brief introduction

CSS (cascading style sheet) can be translated as “cascading style sheet” or “cascading style sheet”. It defines how to display HTML elements and is used to control the appearance of web pages. Through the use of CSS to achieve the separation of the content and the form of the page, greatly improving the efficiency of the work. CSS assumes that all HTML document elements generate a rectangular element box that describes the space occupied by the element in the layout of HTML document, which can be regarded as a box. CSS produces a concept of “box model” around these boxes. By defining a series of box related attributes, CSS can greatly enrich and promote the presentation effect and layout structure of each box and even the whole HTML document. For elements that are boxes, if there are no special settings, they always occupy a separate line by default, and the width is the width of the browser window. The elements before and after the box, whether they are boxes or not, can only be arranged above or below it, that is, they are accumulated and arranged. Each box in HTML document can be regarded as four parts from inside to outside, namely content, padding, border and margin. CSS defines a series of related properties for four parts, which can enrich the performance of the box by setting these properties.

CSS box model

In CSS, we can regard all HTML elements as a box. We can take div as an example, and we can also observe the box model intuitively in the browser checker, as shown in the figure

盒模型 

1. The composition of the box model

   content area: content (blue area in the middle of the figure)
   inner margin: padding
   border: border (gray area in the figure)
   margin: margin (yellow area)

be carefulDistinguish the size of the box from the size of the box in the browser
  size of box = inside margin + border + content area
  size of box in browser = inner margin + border + content area + outer margin
The composition of   box model = inner margin + border + content area + outer margin

2. Classification of box models
   the box model can be set through box sizing, and the box sizing value is content box by default;

1)content-box:
  content box / W3C box;
   width and height set under the model:

div{
	Width: 100px; // the width of the content area
	Height: 100px; // height of content area
	border: 5px solid pink;
	padding:10px;
	margin: 10px;
	}

Width of box: width + border left + border right + padding left + padding right
Box Height: height + border Top + border bottom + padding Top + padding bottom
The height of the box in the browser: height + border Top + border bottom + padding Top + padding bottom + margin Top + margin bottom;
Box width in browser: height + border Top + border bottom + padding Top + padding bottom + margin Top + margin bottom;

2)border-box:
  border box / IE box
   set the value to border box by box sizing
   width and height set under the model:

width:200px;	 //The width of the box
height:200px;	 //The height of the box

Height – border top – border – bottom – padding – Top – padding – bottom
Height – border top – border – bottom – padding – Top – padding – bottom
Box width in browser: width + margin left + margin right
Box height in browser: height + margin Top + margin bottom

3. Use of box model
   the border box is usually used when setting the box sizing property. The border box has a feature that the width and height of the box is the width and height of the box. When you change padding or border, the size of the box will not change, but will squeeze the size of your content area. When you need to set the position of the content area in the joint venture, you can use the border box to set it.

summary

This article on the introduction of CSS box model is introduced here. For more relevant content of CSS box model, please search the previous articles of developeppaer or continue to browse the related articles below. I hope you can support developeppaer more in the future!