html的盒模型是什么

html的盒模型是什么，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

　　1.1.盒的内容区的尺寸contentwidth和contentheight取决于几个因素：

　　--生成该盒的元素是否设置了'width'或'height'属性。

　　--该盒是否包含文本以及其它盒。

　　--该盒是不是表格等等。

　　1.2.盒的背景色

　　--内边距和边框区域的背景样式由生成（该盒的）元素的'background'属性来指定。外边距背景总是透明的

　　2.外边距属性：'margin-top'，'margin-right'，'margin-bottom'，'margin-left'和'margin'

　　2.1.外边距属性指定了盒的外边距区的宽度

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

　　2.2.<margin-width>值类型，可以取下列值之一：

　　--<length>

　　指定一个固定宽度

　　--<percentage>

　　百分比根据生成盒的包含块的width来计算。注意，这一点对于'margin-top'和'margin-bottom'也适用。如果包含块的宽度取决于该元素，那么产生的布局在CSS2.1是未定义的

　　--auto

　　--margin属性允许负值，但可能存在具体实现限制

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

　　'margin-top','margin-bottom'

　　Value:<margin-width>|inherit

　　Initial:0

　　Appliesto:除display类型为table系列中除了table-caption，table和inline-table以外的所有元素（译注：也就是说，table系列display值中，margin-只适用于table-caption,table,inline-table，其余的都不适用，但margin-对非table系列都适用）

　　Inherited:no

　　Percentages:参照包含块的宽度

　　Media:visual

　　Computedvalue:指定的百分比或者绝对长度

　　这两个属性对非替换的行内元素无效

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

　　'margin-right','margin-left'

　　Value:<margin-width>|inherit

　　Initial:0

　　Appliesto:除display类型为table系列中除了table-caption，table和inline-table以外的所有元素（译注：也就是说，table系列display值中，margin-只适用于table-caption,table,inline-table，其余的都不适用，但margin-对非table系列都适用）

　　Inherited:no

　　Percentages:参照包含块的宽度

　　Media:visual

　　Computedvalue:指定的百分比或者绝对长度

　　2.5.'margin'

　　'margin'

　　Value:<margin-width>{1,4}|inherit

　　Initial:见单独的各个属性

　　Appliesto:除display类型为table系列中除了table-caption，table和inline-table以外的所有元素（译注：也就是说，table系列display值中，margin-只适用于table-caption,table,inline-table，其余的都不适用，但margin-对非table系列都适用）

　　Inherited:no

　　Percentages:参照包含块的宽度

　　Media:visual

　　Computedvalue:见单独的各个属性

　　3.合并外边距

　　相邻的垂直外边距会合并，除了：

　　----根元素盒的margin不合并

　　----如果一个带有间隙（clearance译注：是指clear属性导致元素位置移动形成的间隙）的元素的上外边距与下外边距相邻，它的外边距会和紧挨着的兄弟（元素）的相邻外边距合并，但合并后不会再和父级块的下外边距合并。

html是什么

html的全称为超文本标记语言，它是一种标记语言，包含了一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体，html文本是由html命令组成的描述性文本，html命令可以说明文字，图形、动画、声音、表格、链接等，主要和css+js配合使用并构建优雅的前端网页。

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注编程网VUE频道，感谢您对编程网的支持。