Detailed explanation of html box model

This time I will bring you a detailed explanation of the html box model. What are the precautions when using the html box model. The following is a practical case, let's take a look.

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

--Whether the element that generates the box has 'width' or 'height' set Attributes.
--Whether the box contains text and other boxes.
--Whether the box is a table, etc.

1.2. The background color of the box

--The background style of the padding and border areas is specified by the 'background' attribute of the element that generates (the box) . The margin background is always transparent

2. Margin attributes: 'margin-top', 'margin-right', 'margin-bottom' ', 'margin-left' and 'margin'

##2.1. The margin attribute specifies the width of the box's margin area

--'margin'简写属性一次性设置四周的外边距，而其它外边距属性只设置它们各侧的。这些属性适用于所有元素，但非替换的行内元素上的垂直margin将不会产生任何效果

2.2. < ;margin-width> value type, which can take one of the following values:

--<length>
指定一个固定宽度
--<percentage>
百分比根据生成盒的包含块的width来计算。注意，这一点对于&#39;margin-top&#39;和&#39;margin-bottom&#39;也适用。如果包含块的宽度取决于该元素，那么产生的布局在CSS 2.1是未定义的
--auto
--margin属性允许负值，但可能存在具体实现限制

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

'margin-top', 'margin-bottom'
Value:      <margin-width> | inherit
Initial:    0
Applies to: 除display类型为table系列中除了table-caption，table和inline-table以外的所有元素（译注：也就是说，table系列display值中，margin-只适用于table-caption, table, inline-table，其余的都不适用，但margin-对非table系列都适用）
Inherited:      no
Percentages:    参照包含块的宽度
Media:      visual
Computed value:     指定的百分比或者绝对长度

These two attributes are correct Non-replaced inline elements are invalid

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

'margin-right', 'margin-left'
Value:      <margin-width> | inherit
Initial:    0
Applies to:     除display类型为table系列中除了table-caption，table和inline-table以外的所有元素（译注：也就是说，table系列display值中，margin-只适用于table-caption, table, inline-table，其余的都不适用，但margin-对非table系列都适用）
Inherited:      no
Percentages:    参照包含块的宽度
Media:      visual
Computed value:     指定的百分比或者绝对长度

2.5. 'margin'

'margin'
Value:      <margin-width>{1,4} | inherit
Initial:    见单独的各个属性
Applies to:     除display类型为table系列中除了table-caption，table和inline-table以外的所有元素（译注：也就是说，table系列display值中，margin-只适用于table-caption, table, inline-table，其余的都不适用，但margin-对非table系列都适用）
Inherited:      no
Percentages:    参照包含块的宽度
Media:      visual
Computed value:     见单独的各个属性

3. Merge Margins

Adjacent vertical margins will be merged, except:

----The margins of the root element box will not be merged

----If one has a clearance (clearance Translation Note: refers to the gap formed by the clear attribute causing the position of the element to move). The upper margin of the element is adjacent to the lower margin. Its margin will be merged with the adjacent margin of the immediately adjacent sibling (element), but the merge It will no longer be merged with the lower margin of the parent block

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Related reading:

How to quickly create html header code in sublime

What are the length units in css

CSS(Cascading Style Sheets) collection

The above is the detailed content of Detailed explanation of html box model. For more information, please follow other related articles on the PHP Chinese website!