CSS (2) parse the CSS box and the css box

CSS (2) parse the CSS box and the css box

In other words, I still feel a bit confused when I write a blog ......

These days, I have been busy with the video. Sorry for the late CSS box.

CSS box. At first it sounds like a little tall. After learning about it, I found it easy to understand. It is very convenient in terms of functions, but it is not so easy to use it well.

As the core part of div, it can be said that most of the front-ends are ruled out, and the main difficulty is"Floating"And"Relative/absolute positioning"Problem.

First, let's talk about what the CSS box is. See.

Let's first think of a real paper box in real life with a light bulb in it.

First of all, the box itself must have a thickness, that is, border; the light bulb is fragile. It must have a protective layer to buffer the box. The protective layer is padding. When we ship the box, we should try to keep things close to other fragile products or things that can produce great pressure. There should be an isolated space, namely, margin. Our bulb is the content in the box.

Everyone must have understood what the box is. So how does it play a role in web page design? What is the relationship with css? Why is it widely used?

In fact, when css + div is used to develop web pages, the pictures, lines, paragraphs, text, and buttons on the pages are actually arranged and combined by boxes, the code exists in the div block. Css is a "controller" that controls how these boxes are put, where they are put, and in what form ". That is, the structure and performance are separated.

Compared with the traditional nesting of tables and tables to locate and typeset web content, it is obviously more flexible and easy to operate.

Brief description of floating and positioning:

Float: Float mainly helps align objects in webpages. For example, if a block-level element is small but occupies a row, we want him to move it to the top row, and then it will be floating.

It can be divided into none, left/right alignment, nested in the box, and other situations. For more information, refer to the following blog.

Positioning: positioning is classified into static and dynamic positioning. static positioning (absolute positioning) is "contribution", that is, it allows others to replace their positions after being removed; at the same time, its positioning is based on the parent level, and is reflected in the Code, that is, the body. Dynamic (relative positioning) is "selfish". After it is removed, it does not allow others to replace its original position. It uses itself as a reference. (More details will be provided later ~~~)

 

Summary:CSS boxes can be divided into two aspects for learning: one is its implementation principle, and the other is its control application. The principle is embodied in css + div design ideas, and the application is embodied in web layout and design.

 

 

 

 

 

 

 

 

 

 

 

What is the css box mode (Box Model)

You do not need to use tables for webpage layout. You can use boxes and box nesting with different sizes defined by CSS to orchestrate webpages. The webpage code in this way is concise, easy to update, and compatible with more browsers. You can add the content you want to add in the box.

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">