“This is the 10th day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021”.

5. Box model

In the layout of the web page, how do we arrange the text and pictures in order according to the renderings that the artist gives us?

The essence of web layout is:

1. First use CSS to set the size of the box, and then place the box.

2. Finally put the page elements such as text images and so on into the box.

5.1 Box Model

The box model is to view the layout elements of an HTML page as a rectangular box, that is, a container for content.

The box model consists of the element’s content, border, padding, and margin.

The text and images inside the box are the content area. The thickness of the box is called the border of the box. The distance between the content of the box and the border is the inside margin (similar to the cellpadding of a cell).

The spacing between boxes is the spacing (similar to cellspacing for cells).

5.2 Box border

His syntax is as follows:

border: border - width | | border - style | | border - color/example * * * * / border:1px solid red; 
Copy the code

Borders have four styles:

1. None: No borders means that the width of all borders is ignored (default).

2. Solid: Borders are single solid lines (most commonly used).

3. The bounding frame is a dashed line.

4. Dotted: The border is dotted line.

5.3. Inside margin

The padding property is used to set the inner margin. ** refers to the distance between the border and the content. ** When we specify the padding value for the box, two things happen:

1. The content has a distance from the border, adding an inner margin.
   1. The box will get bigger.

It’s a little bit cumbersome to write it separately, but we can abbreviate it.

5.4. Margin

The margin property is used to set the margin. Margin controls the distance between boxes. The shorthand for margin means exactly the same as padding.

5.4.1 Block level boxes are horizontally centered

A block-level box can be horizontally centered if:

• Box must specify width
• And then I’m going to set the left and right margins to auto,

In practice, this method is commonly used for web page layout, and the sample code is as follows:

.header{ width:960px; margin:0auto; }Copy the code

5.4.2 Difference between text center and box center

1. Text-align: center is the horizontal center of the text inside the box, and it can also center the line elements and the line blocks
2. Block level box horizontal center left and right margin changed to Auto

text-align: center; /* The inline element is horizontally centered */
margin: 10px auto;  /* Block level box horizontal center left and right margin changed to auto wide, upper and lower margin can be */
Copy the code

5.4.3 Differences between insert picture and background picture

1. The most common way to insert images is to use the box model for product presentationpadding margin
2. Background images are usually used for small icon backgrounds or large background images. Background images can only be passedackground-position

 img {  
		width: 200px;/* Insert image to change size width and height */
		height: 210px;
		margin-top: 30px;  /* Insert image to change position using margin or padding box model */
		margin-left: 50px; /* Insert when the picture is also a box */
	}

 div {
		width: 400px;
		height: 400px;
		border: 1px solid purple;
		background: #fff url(images/sun.jpg) no-repeat;
		background-position: 30px 50px; /* I use background-position */ to change the position of the background image
	}
Copy the code

5.4.4 Clear the default inner and outer margins of elements

In order to be flexible and easy to control the elements in a web page, we need to clear the default inner and outer margins of the elements when creating a web page

* {
   padding:0;         /* Clear the inner margin */
   margin:0;          /* Clears margins */
}
Copy the code

5.4.5 Merge margins

Margin consolidation can occur when using margin to define the vertical margins of block elements.

5.4.5.1 Merging of vertical margins of adjacent block elements

When two adjacent block elements meet, if the upper element has a lower margin margin-bottom and the lower element has a upper margin margin-top, then the vertical spacing between them is not the sum of margin-bottom and margin-top. The phenomenon of taking the larger of the two values is called merging the vertical margins of adjacent block elements (also known as margin collapse). So we try to add margins to only one box.

5.4.5.2 Merging of vertical margins of nested block elements

For two nested block elements, if the parent element has no upper margin or border, the upper margin of the parent element is merged with the upper margin of the child element, and the combined margin is the greater of the two.

To solve this problem, there are probably the following solutions:

1. You can define an upper border for the parent element.
2. You can define an inner margin for the parent element.
3. Can be added for the parent elementoverflow:hidden.