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

This article introduces the knowledge of "how to determine the baseline of various types of boxes in HTML". 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!

Rules for determining the baseline of the box

1.1 determine the baseline of inline-block

Thebaselineofan'inline-block'isthebaselineofitslastlineboxinthenormalflow,unlessithaseithernoin-flowlineboxesorifits'overflow'propertyhasacomputedvalueotherthan'visible',inwhichcasethebaselineisthebottommarginedge.

1.2 determine the baseline of replacement

Bottommarginedge

1.3 determine the baseline of inline

Is the baseline of the text it contains.

1.4 determine the baseline of the inline-table

Thebaselineofan'inline-table'isthebaselineofthefirstrowofthetable

1.5 determine the baseline of block

Each block generally contains many lines of elements, so it also has many baselines, each corresponding to a line-box,line-box to determine the baseline is a little more complicated, see Chapter 2

1.6 determine the baseline for each line of flex-box (may need to be changed in the future)

Take the baseline of the first line of text of the tallest Flex-item in a line as the baseline of the current line of flex-box

1.7 determining the baseline of the line-box (more complex)

First of all, it is different from other types of boxes, CSS2.1doesnotdefinethepositionofthelinebox'sbaseline, so its baseline is uncertain and will change with the content or style of the elements in the line. See the second section on how to change it.

What factors affect the location of the baseline of the line-box

When there is an elem with the same height as line-box in a row

Because the element is already as tall as the current line, the vertical-align set on this elem has no visual effect on itself, but affects the position of the baseline of the current line-box.

When there are multiple elements with different vertical-align values in a row, the position of the baseline of the line-box will also move the baseline of the line-box to the appropriate position in order to satisfy all these vertical-align values at the same time, often changing with the height of Zhejiang line-box.

This is the end of the content of "how to determine the baseline of various types of boxes in HTML". Thank you for your 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.