Front-end foundation-CSS box model, front-end css box

Front-end foundation-CSS box model, front-end css box

Nowadays, many web pages are spliced and nested by many "Boxes". Therefore, many people who have been familiar with web design must have some knowledge about the CSS box model.

For better illustration, let's take a common example: ten cartons are placed in a warehouse, with a certain distance between each carton, A computer is placed in each carton, and there is a layer of foam between the carton and the computer to isolate shockproof (Here we assume that both the carton and the computer are cubes). In this example, we will go on to the box model.

In fact, a CSS box model can be expressed as an image, and a large number of images can be searched on the Internet:

As shown in: The Box Model in CSS is usually composed of four parts: content, padding, border, and margin ).

HereContentIt's like a computer in a box,FillIt is equivalent to a bubble,BorderIt is equivalent to a carton,BoundaryIt is equivalent to the distance between each carton.

Describe these four parts:

Content: The content in the box model, such as text, images, and tables;

Padding: the distance between the content and the box border. It can be divided into padding-top, padding-right, padding-bottom, and padding-left;

Border (border): the border of the box, which can be split into border-top; border-right; border-bottom; border-left;

Border (margin): the distance between the box and other adjacent elements, which can be split into margin-top; margin-right; margin-bottom; margin-left;

For example:

In the figure, the dotted line indicates the width and height of the content in the box ), that is, the width and height of the computer in the upper case box.

In general, you can set the width (that is, the thickness) of the fill and border. The border settings include the style, color, and width attributes.

In CSS, we think that all elements in a webpage are packed in a rectangular box, such as common div, span, ul, li, img, table, etc, you can format their content, padding, borders, and margin in CSS.

If the margin of a box is 30px, border is 5px, padding is 20, width is 240, and height is 160px, the actually occupied space of the box is: (30 + 5 + 20) × 2 + 240 = 350px, height (30 + 5 + 20) × 2 + 160 = 270px

In the past, web pages used tables for layout, but table layout has many disadvantages. Due to space limitations, the next article will introduce the easy-to-control and interactive CSS + DIV layout methods and the differences with other la S.

CSS + DIV write box model Diagram

There are two web box models:
1: Standard W3C box model; 2: IE box model (default model of IE browser ).
In the two different model Web pages, the display effects of elements defining the same CSS attributes are different. The following uses a formula to distinguish the two different box models.
1: Standard W3C Box Model
Width = width + (padding-left) + (padding-right) + (margin-left) + (margin-right) + (border-left) + (border-right)

Height = height + (padding-top) + (padding-bottom) + (margin-top) + (margin-bottom) + (border-top) + (border-bottom)
2: IE Box Model
Width = width + (border-left) + (border-right)
Height = height + (border-top) + (border-bottom)
This model is the default box model of IE browser. You can also change it. Add the following code at the top of the page:

1 <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "www.w3.org/..al.dtd">

Web Front-end problems, for the box model,

This is a standard.
The following dtd file is used to describe the document format.
That is to say, if you add that sentence
The browser will parse according to the format specified in the dtd
Dtd specifies your html Format