Core CSS content of niuyun; Core css content of niuyun

Core CSS content of niuyun; Core css content of niuyun

According to instructor Niu, the core content of CSS is roughly four parts: Standard stream, box model, floating and positioning.

Before learning the core content, we should first understand two basic concepts: block-level elements and intra-row elements.

According to the CSS specification, each webpage element has a display attribute to determine the type of the element. Each element has a default display attribute value, such as a div element, the default value of its display attribute is "block", which means that the label element is a block-level element. For a span element, its default value is "inline", that is, the row element.

A block-level element automatically occupies a certain rectangle space during display. You can adjust the display of a rectangle by setting its height, width, internal and external margins, and other attributes; row elements such as span do not have their own independent space. They are attached to other block-level elements. Therefore, they are set to attributes such as height and width, is meaningless.

Standard stream

The so-called standard stream is the way tags are arranged. In general, the display sequence of webpage elements is the order in which tags are written in html files. It is equivalent to the code execution sequence without any control statements. For example:

Box Model

The so-called box model is a kind of thinking model used by CSS technology that is often used in web design. Its attributes include content, padding, border, and margin. You can instantiate this model in your daily life. All the boxes we see in our daily life have the four attributes mentioned above, so they are called the box model. Shows the standard box model:

The following example shows how the box model is embodied in the Code:

The running result is as follows:

We all know that we use tables to typeset web pages. Traditional table formatting uses different sizes of tables and nested tables to locate the content of typographical web pages. After CSS formatting is used, the webpage is organized by nesting boxes and boxes of different sizes defined by CSS. The code in this way is concise, easy to update and modify, and compatible with more browsers. For example, PDA devices can also be browsed normally. The advantage is far more than that. If you are interested, you can find relevant information.

Floating

In CSS, the float attribute is used to float elements. For details about how to control the floating of elements, see the following example:

First, we define the floating class selector.

Next let's look at a simple floating application:

Positioning

The positioning in CSS is classified into relative and absolute positioning.

Relative positioning is to move the element relative to its starting point. Similarly, if no floating code is added in the preceding example for location testing, we can locate element 2 as follows:

Absolute positioning is to make the element location irrelevant to the standard stream of the document, so it does not occupy space. The position of an absolutely located element is relative to that of the most recently located ancestor element. If the element does not have any located ancestor element, its position is faster than the initial position.

Similarly, we can improve the above example to illustrate what the absolute positioning is.

The above is the core content of CSS. You may think it is very simple, but you just need to set some attributes. Yes, it is really simple, but if you want to make a good design, you still need to be familiar with a lot of things, plus a lot of practical experience, you should be able to make a good CSS layout.