Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you how to define the use of html box model related knowledge points, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can learn something after reading this article, let's take a look at it.

1.1. The size of the content area of the box-content width and content height-depends on several factors:

-- whether the element that generated the box has the 'width' or' height' attribute set.

Whether the box contains text and other boxes.

Is the box a form or not?

1.2. The background color of the box

-- the background style of the inner margin and border area is specified by the 'background' attribute of the generated element. The outer margin background is always transparent.

two。 Outer margin attributes: 'margin-top','margin-right','margin-bottom','margin-left' and' margin'

2.1. The outer margin property specifies the width of the outer margin area of the box

-- the margin' abbreviation property sets the outer margin around at one time, while the other outer margin property sets only their sides. These attributes apply to all elements, but vertical margin on non-substituted inline elements will not have any effect

2.2. Value type, you can take one of the following values:

-- specify a fixed width-- the percentage is calculated based on the width of the containing block of the generating box. Note that this also applies to 'margin-top'' and 'margin-bottom'. If the width of the inclusion block depends on the element, the resulting layout is undefined in CSS 2.1-the auto--margin attribute allows negative values, but there may be specific implementation restrictions

2.3. 'margin-top', 'margin-bottom'

'margin-top',' margin-bottom'Value: | inheritInitial: 0Applies to: all elements except table-caption,table and inline-table in table series except display. (that is to say, in table series display values, margin- is only applicable to table-caption,table and inline-table, and the rest is not applicable. But margin- applies to non-table series) Inherited: noPercentages: refer to the width of the containing block Media: visualComputed value: specified percentage or absolute length

These two attributes are not valid for non-substituted inline elements

2.4. 'margin-right', 'margin-left'

'margin-right',' margin-left'Value: | inheritInitial: 0Applies to: all elements except table-caption,table and inline-table in table series except display. (that is to say, in table series display values, margin- is only applicable to table-caption,table and inline-table, and the rest is not applicable. But margin- applies to non-table series) Inherited: noPercentages: refer to the width of the containing block Media: visualComputed value: specified percentage or absolute length

2.5. 'margin'

'margin'Value: {1table-caption,table 4} | inheritInitial: see individual attributes Applies to: all elements except table-caption,table and inline-table in table series except display type. (that is to say, margin- only applies to table-caption,table and inline-table in table series display values, and the rest is not applicable. But margin- applies to non-table series) Inherited: noPercentages: refer to the width of the containing block Media: visualComputed value: see individual attributes

3. Merge outer margin

Adjacent vertical margins merge, except for:

-margin of the root element box is not merged

-if the upper outer margin of an element with a gap (clearance) is adjacent to the lower outer margin, its outer margin will merge with the adjacent outer margin of the next sibling (element), but will no longer merge with the lower outer margin of the parent block.

These are all the contents of the article "how to define the use of html Box Model". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.