Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what is the basic knowledge of CSS". In daily operation, I believe many people have doubts about what basic knowledge of CSS. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the question of "what basic knowledge of CSS?" Next, please follow the editor to study!

First, flow

"flow", also known as document flow, is a basic positioning and layout mechanism of css. Flow is an abstract concept of html, implying that this arrangement is as natural and automatic as water flow. "fluid layout" is the default layout mechanism of html, such as the html you write does not use css, and defaults to top-down (block-level elements such as div) stacked from left to right (inline elements such as span).

II. Block-level elements and inline elements

I'm sure everyone knows that.

Block-level elements are elements that fill a row alone, such as div, ul, li, table, p, H2, and so on. The default display values for these elements are block, table, list-item, and so on.

Inline elements, also known as inline elements, refer to elements that only occupy the space contained in the border of its corresponding label. These elements are displayed side by side if the parent element is wide enough, such as span, a, em, I, img, td, and so on. The default display values for these elements are inline, inline-block, inline-table, table-cell, and so on.

In actual development, we often call elements whose display evaluates to inline inline-block inline-table table-cell as inline elements, while elements whose display evaluates to block are called block-level elements.

3. Width: auto and height: auto

The default value for both width and height is auto.

For block-level elements, the width: auto automatically fills a row.

For inline elements, width: auto is wrapped, that is, determined by the width of the child elements.

Whether inline elements or block-level elements, height: auto is encapsulated, that is, it is highly stretched by child elements. But setting the parent element height: auto will cause the child element height: 100% to fail.

Under the fluid layout, the width of the block-level element width: auto is filled with the parent element by default. The fullness here is not the same as the fixed width of width: 100%, but a width that, like water, can be adapted to different margin.

The attribute of css is very interesting. Under normal flow, if the width of a block-level element is a fixed value and margin is auto, then margin will fill the remaining space; if margin is a fixed value and width is auto, then width will fill the remaining space. This is the essence of fluid layout.

4. External box and inner box

The external box is the box that determines how the elements are arranged, that is, the box that determines whether the box is block-level or inline. The external box is responsible for the structural layout.

The inner box is the box that determines whether some attributes within the element are valid or not. The inner box is responsible for content display.

For example, display: inline-table; the outer box is inline, and the inner box is table. The external box determines that the elements should be displayed side by side like inline elements, while the inner box determines that the element can set margin attributes such as width, height and vertical direction.

The table on the right and the text on the left are arranged on one line (the performance characteristics of the outer box inline), while there is a custom width 111px (the inner box table can set width and height).

Fifth, css weight and transcendence! important

There was a question that baffled me:

/ / assume that the following styles all act on the same node element `span`, and determine which of the following styles will take effect

Body#god div.dad span.son {width: 200px;}

Body#god span#test {width: 250px;}

It's a pity that I didn't know that css had weight after working as a front-end for three years.

The list of css selector weights is as follows:

In css, the weight of! important is quite high, but because the width and height will be covered by max-width/min-width, so! important will fail.

Width: 100px!important

Min-width: 200px

The above code is calculated and parsed by the engine as follows:

Width: 200px

At this point, the study of "what are the basic knowledge of CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.