CSS core content of Beef Brisket_html/css_WEB-ITnose

According to Teacher Niu’s explanation, the core content of CSS is roughly divided into four parts: standard flow, box model, floating and positioning.

Before learning the core content, let’s first understand two basic concepts: block-level elements and inline elements.

According to the CSS specification, each web page element has a display attribute, which is used to determine the type of the element. Each element has a default display attribute value. For example, a div element has a default display attribute. The value is "block", which means that the label element is a block-level element, and for span elements, its default value is "inline", which is an inline element.

The so-called block-level elements automatically occupy a certain rectangular space when displayed. You can adjust the display appearance of the rectangle by setting its height, width, inner and outer margins and other attributes; and elements like span Inline elements do not have their own independent space. They exist dependent on other block-level elements. Therefore, it is meaningless to set attributes such as height and width on inline elements.

                                                                                                                                                                                                                                                                   . Generally speaking, the display order of web page elements is the order in which you write tags in the HTML file, which is equivalent to the order of code execution without any control statements. A small example:

Box model

The so-called box model is on the web page A mental model used by CSS technology that is often used in design. Its attributes include: content, padding, border, and margin. You can instantiate this model in life. The various boxes we see in our daily life have the four attributes mentioned above, so they are called box models. The standard box model is shown in the figure below:   

   So how the box model is reflected in the code, please see the following example:

  

The running results are as follows:

We all know that tables are used to layout web pages. Traditional table layout uses tables of different sizes and table nesting to position and layout web page content. After switching to CSS layout, web pages are arranged through boxes of different sizes and the nesting of boxes defined by CSS. This method has simple code, is easy to update and modify, and is compatible with more browsers. For example, PDA devices can also browse normally. Its advantages are far beyond these. If you are interested, you can find relevant information.

Floating

In CSS, we achieve the floating of the element through the Float property. Specifically how to control whether an element is floating or not, please see the following example:

First we define a floating class selector

Next we look at a simple Floating application:

   

Positioning

Positioning in CSS is divided into relative positioning and absolute positioning.

Relative positioning is to move this element relative to its starting point. We also perform a positioning test on the code without floats in the above example. We perform relative positioning of element two, as follows: The document's standard stream has nothing to do with it, so it takes up no space. An absolutely positioned element is positioned relative to its nearest positioned ancestor, or, if the element has no positioned ancestors, its position is relative to its original containing element.

Similarly, we improve the above example to illustrate what absolute positioning looks like.

The above is the core content of CSS. Maybe you will feel very simple, but just set some attributes. Yes, it is indeed very simple, but if you want to make a good design, you need to be familiar with a lot of things. With a lot of practical experience, you should be able to make a good CSS layout.