The box model

When CSS handles web pages, it thinks that every element is contained in an invisible box. Called the box model, the box consists of the content area, the space around the content area (padding), the border border of the inner margin, and the invisible area outside the border that separates the element from its neighbors (margin).

Each element’s box has elements that determine how much space that element takes up and how it looks. You can use CSS to control each element individually. By default, width and height define only the size of the content area. The background extends behind the border, so it is usually visible only in the area where the inner margin extends.

Width, height, and box models: There are two ways to handle the effect of the CSS width property on the apparent width of an element. The first is that the width of an element in the browser does not match its width property (unless it has no margins or borders). Width in CSS indicates the content area and width within the margin. In the weirdbox model shown below, the width of the element displayed in the browser is the sum of the content width, left and right margins, and left and right borders. The display height calculates the sum of the top and bottom margins and the top and bottom borders.

The display width of the second element is equal to the value of the width attribute. Content widths, margins, and borders are all included inside. The height attribute is similar, using this mode you only need to set the element: box-sizing: border-box.

If box-sizing: border-box is set; Then the height and width include everything outside of the margin.

Control the display type and visibility of elements

Each element is either displayed in a separate row by default, which is called a block-level element. Either appear within a line, called an in-line element. The essence of this is their display property, where block-level elements are set to display: block and inline elements are set to display: inline. You can use CSS to change the default display type of an element, such as changing a block to inline. Or, conversely, there is a mixed mode displayed as inline-block, where the element appears on the same line as the rest of the content and has the properties of a block-level element. (Display and flex and Grid properties also provide additional layout techniques.)

P {display: inline; } // make the element appear as an in-line element p{display: block; } li{display-inline-block}// Make the element appear as a block-level elementCopy the code

Elements set to inline are ignored for any width, height, margin-top, and margin-bottom Settings. These two properties are described later.

Control element visibility: visibility attribute: hidden; The main purpose is to control whether an element is visible. When an element is hidden, the element and its contents are left with a blank space where they appear, which still occupies a place in the document flow.

Em {visibility: hidden; }Copy the code
The height and width of the element

You can set the height and width for blocks of content, paragraphs, list items, divs, images, videos, form elements, and so on. You can also set display:block for phrase content elements (which are displayed inline by default). Or display: inline – block; Set the width and height for them.

Width, margin, and Auto: If width and height are not displayed, the browser will use auto. For most elements that are displayed as block-level elements by default, the auto value of width is calculated from the width of the containing block minus the inner margins, borders, and margins of the element.

Add a margin around the element

Margin is the space around the content of an element and within the border. Like the edge between the picture (content) and the frame (border). The thickness of the margin can be changed, but the color or texture cannot be changed.

div{ padding: .3125em,.625em .625em; padding: 5px 10px 10px; /* The two padding-in effects are the same */}Copy the code

The inner margin is added by means of: PADDING: x, where x is the amount of space to be added and represents the ununited (em or pixel) length or percentage of the width of the parent element. You can also type: padding-left, padding-right, padding-bottom, padding-top to add padding for each edge alone.

  • – padding: 10 px; Use a value and the value will be applied to all four sides.
  • – padding: 10 px 20 px; If two values are used, the first value applies to both sides and the second value applies to both sides.
  • □ Padding: 10px 20px 22px; — If you use three values, the first applies to the top, the second to the left and right, and the third to the bottom.
  • □ PADDING: 10px 20px 22px 0; Using four values is applied to the top, right, bottom, left, and four edges at once, in clockwork order.
4. Set the border

You can create a border around an element or set a border on one side of the element and set its thickness, style, and color. If an inner margin is specified, the border will surround the element content and the inner margin.

Img {border:5px solid #bebebe; }Copy the code
  • Border-style: border-style: Type: None, dotted line, dashed line, solid, double, groove, ridge, inset, or outset.
  • Border-width 😡 (width)
  • Set border color: border-color: color
  • Abbreviations for setting multiple border properties: Enter border If you need to enter -top, -right, -bottom, -left, you can limit the border effect to a single edge.
  • Then enter -property, where the property can be style, width, or color, as required, using a single property to set the border.

For example: border:1px solid and

border-right:2px dashed green;

Set the margin around the element

Margins are the transparent space between an element and its neighbors. Margin: x, where x is the amount of space to add, which can be length, percentage, or auto. Margin-top :x; margin-top:x; margin-right:x; margin-bottom:x; margin-left:x; Applies a margin to an edge of an element.

If you use a value for margin, the value is applied to all four sides. Two values, the first value applies to the top and bottom sides, and the second value applies to the left and right sides. Three values, the first will apply to the top, the second to the left and right, and the third to the bottom. Four values are applied to the top, right, bottom, left, and four edges at once, in clockwork order. The auto of margin property depends on the value of width property.

 {margin: 0 auto ；}
 
Copy the code
Float the element

Float elements over text or other elements with the float attribute. You can use this technique to wrap text around images or other elements, create multi-column layouts, and so on. Wrap the text around the element: Type folat: left (float the element to the left with the rest of the content around it to the right). Right (float the element to the right with the rest of the content around it to the left). None (elements do not float)

Main {float: right; }Copy the code

To control the floating position of an element, type clear: Type left to prevent the element from floating to the left of the element. Enter right to prevent elements from floating to the right of that element. Type both to prevent elements from floating on the left and right sides of the element. None allows elements to float to the left and right of the element.

Seventh, the relative positioning of the elements

Each element has a natural position in the document flow of the page, and moving an element relative to that original position is called relative positioning, leaving surrounding elements completely unaffected. Position: relative; Then type top,right,bottom or left. In the input x, where x is the distance you want the element to be offset from its natural position, you can represent an unabsolute relative value or percentage, either positive or negative.

.example{
position: relative;
top: 35px;
left: 100px;
}
Copy the code
Eight, the absolute positioning of the elements

If the IMG element appears before the P element, the image appears before the paragraph. By absolute positioning of elements, that is, specifying their exact position relative to the body or nearest located ancestor element. Unlike relative positioning, an absolutely positioned element is not left blank in its original position. This is also different from letting the element float. An absolutely located element is not surrounded by other elements.

Input position: Absolute; Then type top,right,bottom or left. In the input x, where x is the distance by which you want the element to be offset from its natural position, you can indicate an unabsolute relative value or percentage. (Using relative, absolute, or fixed positioning, you can use the Z-index attribute (with the highest value displayed at the top) to specify the stacking order of overlapping elements.)

Dealing with spills

Elements are not always contained in their own boxes. This may be because the box is not large enough, e.g. the image is wider than its container and will overflow; It could be that the content is outside the box by using negative margins or absolute positioning, or it could be that the display height of the element is so high that its content is too high to go inside the box.

Absolute browser how to handle overflow steps: Enter overflow: in the input: Visible makes all contents in the element box visible (default), Hideen hides contents that cannot be contained in the element box, Scroll adds a scroll bar on the element whether the element needs it or not, auto makes the scroll bar appear only when the visitor accesses the overflow content.

    example{ overflow: hidden; }
Copy the code
Align elements vertically

Vertically aligned elements can be aligned in more ways than the default alignment.

Enter the vertical – align: “> < span style =” box-width: inherit; color: RGB (50, 50, 50); display: block; display: block; Or type tetx-bottom to align the bottom of the element with the bottom of the parent element; Either type top to align the top of the element with the top of the highest element in the current row, or type bottom to align the bottom of the element with the bottom of the lowest element in the current row.

Change the mouse pointer

Generally, the browser is responsible for controlling the shape of the mouse pointer. Use arrow shapes most of the time, finger shapes when pointing to links, etc. Modify the shape of the pointer: type CURSOR: pointer (finger), or default (arrow), or dcrosshair (+), or dmove, or dwait, or dhelp, or text (I), or dprogress. Mouse Pointers that indicate different shapes.

Look at some code:
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .example{ background-color: yellow; width:200px; height:200px; margin:50px; } .exampleto{ background-color:chartreuse; width:100px; height:100px; position:relative; left:50px; top:50px; } .example2{ background-color:crimson; width:200px; height:200px; margin:50px; position:relative; */}.exampleto2{background-color:slateblue; width:100px; height:100px; position:absolute; /* left:50px; /* Left :50px; top:50px; cursor:pointer; } </style> </head> <body> <div class="example"><div class="exampleto"></div></div> <div class="example2"><div class="exampleto2"></div></div> </body> </html>Copy the code

The effect is shown in the figure: