The CSS box model is essentially a box that encapsulates the surrounding HTML elements, including: margins, borders, padding, and actual content. The box model allows us to place elements in the space between other elements and the borders of surrounding elements.

The following picture illustrates the Box Model:

1. Margin

  • In normal flow mode, there are two elementsintervalThe reason is because the element has margins;
  • Margins add extra white space between elements, an area where other elements cannot coexist but where the parent element’s background is visible.
  • Set the margin with the margin property; Attribute value can be a unit of length or a percentage. If it is a percentage, it should be noted that the percentage margin value is calculated relative to the content area width of the parent element.
  • Margins for adjacent elements occurFolding phenomenon, that is, whoever has the largest margin shall prevail;

Margin for nested elements

If only child elements are setmarginThe parent element moves down with the child element. Application: The child element is centered within the parent element1. Child elements set left and rightmargin:auto; Of the parent elementwidth- of the child elementwidth) /2
    2. Child elements are set up and downmargin:; Height of the parent element - of the child elementwidth) /2
    3. Child elements are set up and downmarginThe parent will collapse, give it a BFC property,overflow:hidden;
Copy the code

Margin negative

formargin-right.margin-leftIf the element itself has no width,marginNegative values increase the element width; If the element itself has width, it will shift; (This is useful)margin-topIs negative, regardless of whether the height is set, it will not increase the height, but will produce upward displacement;margin-bottomNegative values do not shift, but reduce their CSS read height.Copy the code

Margins of inline elements

Inline elements usually have a default margin, which we don't want. We can set it to its parent elementfont-size:0;
Copy the code

2. Border line

Outside the inside margin of the element is the border; Border three elements: width: default2px;border-width:10px; Style: Defaultnone; So you can't see that if missingborder-styleDeclare, there will be no border;border-style:solid ; > > < span style = "font-size: 16px; line-height: 16px; Color: Defaults to the foreground color, i.ecolor; - Border: conjoined (a border with four sides at the same time)border: width of the border style of the border color of the border Conjunctions (set four borders separately)border-top: width of the border style of the border color of the borderborder-right: width of the border style of the border color of the borderborder-bottom: width of the border style of the border color of the borderborder-left: width of the border style of the border color of the borderCopy the code

Border with rounded corners

border-radius: 100px 100px 100px 100px; Border rounded corner formatborder-radius: left upper right upper right lower left;1. Draw ⚪ for a square setting;border-radius: 50%;

2When the value of the rounded corner of the border is greater than the width of the border, both the outer and inner borders become rounded;3. When the border rounded Angle value <= border width, the outer border is rounded and the inner border is a right Angle;4. Set ellipse to a rectangle setting:border-radius: 50%;
Copy the code

Image frame

 border-image-source: url("images/border.jpg");
 /* Tell the browser which image to use as the border. Note: If you specify only which image to use as the border image by source, by default the image is placed at the four vertices of the border; If a border image is set, the border color is not displayed, and the border image takes precedence over the border color */


 border-image-slice: 70 70 70 70;
 /* Tell the browser how to cut the specified border image, one from the top, one from the right, one from the bottom, and one from the left
 
 border-image-slice: 70 70 70 70 fill;
/* The middle cut part is also used, and placed in the following way */

  border-image-width: 10px;  
  Note: If you specify the width of the border image with border-image-width, the default border width will be invalid */


  border-image-repeat: stretch; The default/* Tells the browser how to fill the image other than the four corners of the border image, default is to stretch repeat; The middle part according to the cut tiling, the display will not finish the display round; First tiling is not enough to stretch */
 
  border-image-outset: 10px 30px 50px 70px;   
  /* Tells the browser how far the border image needs to move outward: top, right, bottom, left */Serial writing:border-image: Resource address cutting mode Filling mode;border-image: url("images/border.jpg") 70 fill repeat;
Copy the code

3. Padding inside

  • Padding is the distance between the content and the border, which is set using padding; It applies to all elements and can only be positive;
  • Background extends to the inner margin region by default;
  • The purpose of an inside margin is to separate the content from the border, so if you add a border, it’s usually better to add some inside margin;
padding:20px;/* Top, right, bottom and left are 20px */

padding:20px 10px;
/* The top and bottom are 20px and the left and right are 10px*/

padding:10.20.30;
/* The fourth value is left, the second value */ is not overwritten

padding:10px 20px 30px 40px;
/* The order is top right, bottom left */You can also write it individually by position: padding-top:;padding-right:;padding-bottom:;padding-left:;Copy the code
The inner margin of a non-permutation element in a line
  • Setting the padding value to the left or right of the inline element does not work (no visual effects). But be careful, if you have a background color and an inner fill, the background is going to go up and down;
Replaces the inside margin of an element

For the inner margin of the replacement element, it appears around the content, and the background is filled into the inner margin area where the replacement element has

<img>, <input>, <textarea>, <select>, <object>
Copy the code

4. The content of the content

Box-sizing properties of boxes

CSS3 has a box-sizing attribute that has a value to ensure that the width and height of the box elements remain the same after we add the padding and border to the box. There are two modes:

box-sizing: content-box;/* Default */Width =width + padding + border; Height =height + padding + border; ！！！！！！ The top border line is a compound property that only writes50pxIs invalid and makes the top border line non-existentbox-sizing: border-box; Width =width; (paddingandborderThat's already taken into accountheight;
border- Box tells the browser: you want to set the border and inner margin values to be included inwidthWithin; Note:1If two boxes are nested, if you set the margin on the top of the inside box, the outside box will also be pushed down2If the outer box does not want to be fixed together, add a border attribute to the outer box3In enterprise development, in general, if the distance between nesting relation boxes needs to be controlled, the padding should be considered first, and then the margin, which is essentially used to control the gap between brothers:1. In a box of nested relationships, we can use margin:0auto; To center the inside box horizontally in the outside box2.margin: 0auto; It only works in the horizontal direction, not in the vertical directionCopy the code