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

This article shares with you the content of a sample analysis of CSS containing block rules. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

First, establish the inclusion block

The inclusion block is a very important concept. It usually contains the content area of the nearest ancestor element of the current element, and the formation of the inclusion block depends on the CSS position attribute.

In our commonly used scenarios, the values of position are relative, absolute, fixed and static, and these four attributes are represented. The browser establishes the following rules for the inclusion blocks of these four attributes:

The inclusion block in which the root element () is located is a rectangle called the initial inclusion block. His size is viewport viewport (for continuous media) or paging media page media (for paged media).

II. Rules for calculating percentage values

When setting percentage values for attributes such as width, height, padding in CSS, the browser dynamically calculates the actual pixel value, and the calculation base of the percentage is the actual attribute value corresponding to the containing block of the element.

For example, the height attribute that calculates the percentage value of the current element

Then its value is: contains the block height value * the current element height percentage value

Third, the application scenario including the block principle

I have always had a misunderstanding that the calculation base of the percentage units of padding and margin is the width and height of the rectangular area of the current element, but according to the rule of containing blocks, their calculation base should be the width value of the containing block.

So take a look at the following question.

Before the team boss Hong Yan asked: "how to achieve a height is three times the adaptive width of the picture?"

Through thinking, there are roughly the following ways to achieve, you can refer to

Implementation method 1: the problem is the poor compatibility of C-side browsers by using the aspect-ratio attribute newly supported by Chrome browsers.

.box {aspect-ratio: 1Comp3; / / width/height aspect ratio}

Aspect-ratio

Implementation method 2: skillfully use the inclusion block rule (the calculation base of the percentage value of padding and width attributes is the width of the inclusion block) + background map

.box {width: 100px; margin: 100px auto; position: relative; background-color: # 00abef;} .bg-box {width: 100%; padding-top: 300%; background-image: url ('https://ww3.sinaimg.cn/large/006pGbWsly1go7xqwfjw0j30ef0fewfp.jpg'); background-repeat: no-repeat; background-size: 100%;}

The effect is as follows:

Thank you for reading! This is the end of this article on "sample analysis of CSS containing block rules". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

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.