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

Html box model is what, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

1.1. The size of the content area of the box, contentwidth and contentheight, 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 CSS2.1

-- auto

Negative values are allowed for the margin attribute, but there may be specific implementation restrictions

2.3. "marginal copyright topography"

'margin-top','margin-bottom'

Value: | inherit

Initial:0

Appliesto: all elements except table-caption,table and inline-table in table series except display type. (that is, in table series display values, margin- is only applicable to table-caption,table,inline-table, the rest is not applicable, but margin- is applicable to non-table series)

Inherited:no

Percentages: reference the width of the containing block

Media:visual

Computedvalue: specified percentage or absolute length

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

2.4. The edge color is beautiful.

'margin-right','margin-left'

Value: | inherit

Initial:0

Appliesto: all elements except table-caption,table and inline-table in table series except display type. (that is, in table series display values, margin- is only applicable to table-caption,table,inline-table, the rest is not applicable, but margin- is applicable to non-table series)

Inherited:no

Percentages: reference the width of the containing block

Media:visual

Computedvalue: specified percentage or absolute length

2.5.The margin'

'margin'

Value: {1pc4} | inherit

Initial: see individual attributes

Appliesto: all elements except table-caption,table and inline-table in table series except display type. (that is, in table series display values, margin- is only applicable to table-caption,table,inline-table, the rest is not applicable, but margin- is applicable to non-table series)

Inherited:no

Percentages: reference the width of the containing block

Media:visual

Computedvalue: 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.

Html, the full name of html, is a markup language that contains a series of tags. Through these tags, you can unify the format of documents on the network and connect scattered Internet resources into a logical whole. Html text is a descriptive text composed of html commands, and html commands can explain text, graphics, animation, sounds, tables, links, etc. Mainly used with css+js to build elegant front-end web pages.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

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.