HTML盒模型有两种,分别是标准盒模型(Content Box Model)和IE盒模型(Border Box Model)。
标准盒模型是W3C标准规定的,在标准盒模型中,元素的宽度和高度只包括内容区域(content),不包括边框(border)和填充(padding)。元素的总宽度或总高度等于 内容区域的宽度或高度 + 边框的宽度或高度 + 填充的宽度或高度。
IE盒模型是早期Internet Explorer浏览器提出的一种盒模型,与标准盒模型不同,IE盒模型中,元素的宽度和高度包括内容区域、边框和填充。元素的总宽度或总高度等于 内容区域的宽度或高度(包括边框和填充)。
下面,我将分别给出标准盒模型和IE盒模型的具体代码示例。
首先是标准盒模型的代码示例:
<!DOCTYPE html> <html> <head> <style> .box { width: 200px; height: 100px; border: 1px solid black; padding: 10px; margin: 20px; } </style> </head> <body> <div class="box"> <p>This is the content of the box.</p> </div> </body> </html>