DIV+CSS Box Model Knowledge Summary, easy to master div+css layout

Friends in the initial study of CSS, the first time to learn the basics of CSS must have learned padding,border and margin, that is, the inner margin, border, margin. They make up the simplest boxes. The standard box model is typically used to add the DOCTYPE statement to the top of the page. With the DOCTYPE statement, all browsers will use the standard box model to explain your box, and the Web page will appear consistent across browsers. The compatibility with the browser is very friendly. Here we summarize the relevant knowledge of the box model.

A tutorial on box model learning

1. You can learn about CSS box model content in the CSS 0 Basics Primer Tutorial

2. Learn The box Model combat course in the video tutorial on comprehensive layout of enterprise website

Box model related knowledge

1. CSS Box Model Introduction

The CSS definition describes a box like this:

Its distance from the top is 3 pixels, the margin is 5 pixels from the left and right, and the margin is 6 pixels from the bottom;

Its border width is 6 pixels, the border color is black;

The distance between the inner margin and the upper and lower border is 4 pixels, and the distance from the left and right border is 6 pixels;

2. CSS Box Model Knowledge Summary

box models: The box model consists of four components with content (element contents), padding (padding), Border (border), boundary (margin), and these four sections contain top/right/bottom/ Left four components. When an element is placed on the page exactly how large the size is, put the declared padding, border, and margin values with the content area. Of course, if an element does not have an inner margin, a border, or an outer margin, its size is only determined by its content.

3. CSS Box model graphic

CSS box model is a core concept in CSS. In the Web page we can think of all the elements of the page as a box, a box including margin, border, padding, and the content of four parts. Where the margin, border, padding, can be applied to the upper and lower left and right four edges of the element, or can be applied to each individual edge. In particular, the margin can also be set to a negative value, in some special cases, it is necessary to use the margin is negative.

4. CSS Box Model Introduction

The property names commonly heard in Web design: content, padding (padding), Borders (border), boundaries (margin), CSS box models have these properties. These properties are the same as the properties of the boxes in our daily life. Content is the contents of the box, and fill is afraid of things in the box to add the anti-seismic material; The border means the box itself; As for the border, it is important to leave a certain gap between the boxes and keep the ventilation.

Related questions

1. Want to ask a question about the box model?

2. About the box model or a little confused, ask for advice?

3. Questions about the boundary of the box model are still a bit confused?

"Recommended"

1. PHP Chinese Web Free Tutorial: "Quick CSS3 Tutorial"