css两种盒子模型

本文涉及的产品
交互式建模 PAI-DSW,5000CU*H 3个月
模型训练 PAI-DLC,5000CU*H 3个月
模型在线服务 PAI-EAS,A10/V100等 500元 1个月
简介: 在CSS中,有两种盒子模型:标准盒子模型和IE盒子模型(怪异盒子模型)。标准盒子模型中,`width`和`height`仅指内容区的尺寸,总宽度和高度还包括内边距、边框和外边距。IE盒子模型中,`width`和`height`包括内容区、内边距和边框,总宽度和高度仅加外边距。通过`box-sizing`属性可以切换这两种模型,`box-sizing: content-box;`表示标准盒子模型,`box-sizing: border-box;`表示IE盒子模型。

在CSS中,有两种盒子模型:标准盒子模型和IE盒子模型(怪异盒子模型)。

  1. 标准盒子模型(W3C盒子模型)

    • 组成部分
      • 内容区(content):这是盒子模型的核心部分,用于放置文本、图像等实际内容。例如,如果你有一个<div>元素,其中的文字或图片就位于内容区。它的大小可以通过widthheight属性来设置。比如,div { width: 200px; height: 100px; }就定义了一个内容区宽度为200像素、高度为100像素的<div>
      • 内边距(padding):内边距是内容区和边框之间的空白区域。它可以让内容与边框保持一定的距离,增强内容的可读性和布局的美观性。内边距有四个方向,分别是padding - top(上内边距)、padding - bottom(下内边距)、padding - left(左内边距)和padding - right(右内边距)。例如,div { padding - top: 10px; padding - left: 20px; }会在<div>的内容区上方添加10像素的内边距,左侧添加20像素的内边距。
      • 边框(border):边框围绕着内边距和内容区,用于定义元素的边界。边框的样式可以通过border - style(如solid实心、dashed虚线等)、border - width(边框宽度)和border - color(边框颜色)来设置。例如,div { border - style: solid; border - width: 2px; border - color: black; }会给<div>添加一个2像素宽的黑色实心边框。
      • 外边距(margin):外边距是盒子模型最外层的部分,它用于控制元素与相邻元素之间的距离。和内边距一样,外边距也有四个方向,margin - topmargin - bottommargin - leftmargin - right。例如,div { margin - top: 30px; margin - right: 40px; }会在<div>的上方留出30像素的外边距,右侧留出40像素的外边距。
    • 尺寸计算:在标准盒子模型中,元素的总宽度 = 内容区宽度 + 左右内边距 + 左右边框 + 左右外边距;元素的总高度 = 内容区高度 + 上下内边距 + 上下边框 + 上下外边距。例如,一个内容区宽度为100px、左右内边距各为10px、左右边框各为2px、左右外边距各为20px的元素,其总宽度为100 + 10×2+2×2 + 20×2 = 164px。
  2. IE盒子模型(怪异盒子模型)

    • 组成部分:它的组成部分名称和标准盒子模型相同,也是包括内容区、内边距、边框和外边距。
    • 尺寸计算:在IE盒子模型中,元素的widthheight属性设置的是包括内容区、内边距和边框在内的总宽度和总高度。也就是说,元素的总宽度 = 内容区宽度(包含内边距和边框)+ 左右外边距;元素的总高度 = 内容区高度(包含内边距和边框)+ 上下外边距。例如,当设置div { width: 100px; }时,这个100px已经包含了内容区宽度、内边距和边框的宽度,再加上外边距来确定元素在页面中的实际位置。

在CSS3中,可以通过box - sizing属性来切换这两种盒子模型。box - sizing: content - box;表示使用标准盒子模型,box - sizing: border - box;表示使用IE盒子模型。这使得开发者可以更灵活地控制布局和元素的尺寸。

相关文章
|
3天前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
3天前
|
前端开发 容器
给 CSS 盒子模型添加边框时,需要注意什么?
在给CSS盒子模型添加边框时,需要注意边框的宽度、样式和颜色,以及它如何影响盒子的总尺寸和布局。边框会增加盒子的总宽度和高度,可能需要调整其他属性以保持布局的完整性。
|
2月前
|
前端开发
CSS属性:盒子模型
CSS属性:盒子模型
29 0
|
20天前
|
前端开发
彻底搞懂css盒子模型
【10月更文挑战第1天】
46 9
|
3月前
|
前端开发 开发者
【前端大揭秘】CSS盒子模型的爱恨情仇:一场关于标准与IE模型的精彩对决!
【8月更文挑战第26天】本文深入探讨CSS中的两大盒子模型——标准盒模型与IE盒模型。通过理论解析与实例代码,清晰展示了两种模型下元素尺寸的构成方式及其应用场景。标准盒模型适合精确控制内容区尺寸,而IE盒模型在处理固定宽度元素时更为直观。掌握这些知识将帮助前端开发者在实际项目中做出更优的设计决策,提升网页布局的质量与美观性。
31 1
|
3月前
|
前端开发
HTML+CSS基础知识(2)选择器的使用、盒子模型的讲解、列表的使用
该博客文章详细介绍了HTML和CSS的基础知识,包括CSS样式的应用方式、语法规则、选择器的使用、盒子模型、内边距、外边距、元素的显示类型以及overflow属性处理溢出内容的方法,并通过代码示例和测试结果截图展示了这些知识点在网页设计中的应用。
HTML+CSS基础知识(2)选择器的使用、盒子模型的讲解、列表的使用
|
5月前
|
前端开发 开发者
CSS盒子模型(如果想知道CSS有关盒子模型的知识点,那么只看这一篇就足够了!)
CSS盒子模型(如果想知道CSS有关盒子模型的知识点,那么只看这一篇就足够了!)
|
4月前
|
前端开发
CSS:盒子模型
CSS:盒子模型
|
5月前
|
前端开发 JavaScript 开发者
详细解读CSS——盒子模型(含详解)
详细解读CSS——盒子模型(含详解)
24 0
|
6月前
|
前端开发
CSS盒子模型
CSS盒子模型。
27 1