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

This article introduces the relevant knowledge of "the algorithm and application of CSS box model". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

CSS box model

Every element in web design is a rectangular box. How the size of the box is accurately calculated, please see the following figure:

If you are a Firebug user (basically everything related to the front end will use Firebug-sugar with tomatoes), you will be familiar with the chart below.

This chart is a good illustration of the values acting on any box on the page.

Note that in both of the above examples, margin is white. Margin is special, it does not affect the size of the box itself, but it will

It affects other things related to boxes, so margin is an important part of the box model.

The size of the box itself is calculated as follows:

Width = self width + left inner margin + right inner margin + left border + right border

Height = self-height + upper inner margin + lower inner margin + upper border + lower border

Cases in which the value is not declared

If padding or border are not declared, they are either zero (when using cssreset) or the browser's default value (probably not zero, especially form elements that are not usually reset)

Default width of the block box

If the width is not declared, and the box in the CSS box model is static or relatively positioned, the width remains 100% wide, and padding and border push inward rather than outward.

However, if you explicitly set the width of the box to 100%, then padding will extend outward.

Note that the default width of the box is not really 100%, but the remaining possible value (that is, the remaining real width-sugar with tomatoes). You should be aware of this special value because in many cases it is useful for setting / not setting the width.

The trouble I have is textarea (text box) elements, which need to be set to the desired width of the "cols" attribute and cannot contain child elements. Therefore, it is usually necessary to explicitly set the width of textarea to 100%, but when there is padding, the width of textarea will be extended. In a fixed width environment, it can usually be set to the appropriate pixel value width, but getting wider is not so lucky.

Absolute positioning box without width

The box in the absolute positioning CSS box model with no set width behaves a little differently. Their width only needs to fit what they contain. Therefore, if there is only one word in the box, the box will be as wide as that word. If it becomes two words, the width of the box will increase accordingly.

This continues until the width of the box reaches 100% of the width of the parent element (the nearest relative positioning of the parent element or browser window), and then the line breaks.

It is natural for a box to scale vertically to accommodate what it contains. Oddly enough, not only does the text on different platforms behave differently, but different browsers also have a lot of quirks when dealing with this problem.

No width floating box

It behaves the same as an absolute positioning box without width. The width of the CSS box model only needs to be extended to the width of the contained content to the width of its parent element (whose parent element does not have to be relatively positioned). Because of the fragility of these width-free boxes, what we need to learn is that they cannot be relied on in mission-critical modes, such as in the overall page layout. If you float a column as a sidebar and expect those internal elements (such as images) to be responsible for its width, you are asking for trouble.

Inline elements are also boxes.

We have been focusing on the boxes of block-level elements here. It's easy to think of block-level elements as boxes, but inline elements are also boxes. Think of them as very long and narrow rectangles, and they can have margin,paddingheborder like other boxes.

It seems a little difficult to understand to exercise it. The left margin shown above pushes the box to the right, but it only works on the * line because that is the starting point of the box. Padding is normally applied to the upper or lower part of the text. When wrapping, it ignores the padding of the upper line and starts at the position required by the line height (line-height). The transparent background is to make the effect look clearer.

This is the end of the content of "algorithm and Application of CSS Box Model". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.