CSS core technology summary_html/css_WEB-ITnose

During the front-end development of the Brisket news release system, I was exposed to the technology of CSS div for web design for the first time. Overall, this is the most basic part of web design, but it is also the most commonly used part. Therefore, after laying a solid foundation in this area, it will be more helpful for learning JS, JQ, etc. in the future, and it will be easier to get started.

The core content of CSS: standard flow, box model, floating, and positioning.

Standard flow: It is the order of tags. The order of the elements in the code is consistent with the actual arrangement of elements on the web page. This is the standard flow. When floating or other means are used to set the order of elements, the elements will be detached. standard stream. Two terms are explained here: block-level elements and row-level elements.

Block-level elements: Each block-level element occupies one line. Generally, other elements cannot be added after a line of block-level elements. Only floating ones can be added, and block-level elements can automatically wrap. They generally appear as containers. Can contain row-level elements. The most common one is div.

Row-level elements: Also called inline elements, they are generally based on semantic level elements and can only accommodate text or other inline elements. For example, span is a row-level element.

Box model: The box model is the core content of CSS. Understanding the content of the box model is helpful for understanding other content. After all, the other three layouts are also based on the basic elements in the web page. The box model represents the operating elements in the web page.

As can be seen from this box model, on the web page, there is a distance between elements. This distance is called margin, which is the margin in the four directions from top to bottom, left and right. Margin can be used to set the spacing and position between each element to achieve our typesetting.

The border of the box is the border, which also has four sides: top, bottom, left and right. You can set the color, style, thickness and other attributes of the border to achieve our purpose.

The content inside the box is the core block of the box, where the main content we need to display is placed. There is also a distance between the Content block and the border of the box, which is called padding. There are also four sides, top, bottom, left and right, that can be used to set the position of the content in the box to achieve our layout.

Floating: The float attribute defines in which direction the element floats. In the past, this attribute was always applied to images to make the text surround the image. However, in CSS, any element can float. A floated element creates a block-level box, regardless of what type of element it is.

If floating non-replaced elements, specify an explicit width; otherwise, they are made as narrow as possible. If there is very little space for a floating element on a row, the element will jump to the next row, and this process will continue until a row has enough space.

Combining float and box model, you can realize the movement and design of web page elements. For some special typesetting requirements, float is a necessary means of movement.

Positioning: divided into relative positioning, absolute positioning and fixed positioning.

Relative positioning: The element is positioned relative to its original position. Relative positioning can be achieved by setting its own upper, lower, left, and right boundary distances. Regardless of whether it is moved or not, the element still occupies the original space and may cover other box. One thing to note here is that web pages always take the upper left corner as the origin, right is positive, and downward is positive, as shown below:

is not a conventional coordinate. All you need to pay attention to when setting the position of elements.

Absolute positioning: If you understand the coordinates above, you will understand absolute positioning, which uses the origin of the coordinates as the reference point to set and position the coordinates.

Another kind of positioning is fixed positioning. When you browse the web, you may encounter some advertisements. When you drag the scroll bar to move down, the annoying advertisement will move down with the scroll bar, and the result will be that advertisement. You are still in your original place, this is your fixed position. The red envelope in the picture below is fixed positioning. Look at the scroll bar on the right and it has gone down. The red envelope is still in its original position.

In fact, floating float is also a special positioning, which requires your own understanding.

Through the study of these contents, I have basically mastered the core of using CSS, which will play an important role in my future work and study.

Copyright Statement: This article is an original article by the blogger and may not be reproduced without the blogger's permission.