盒子模型

盒子模型盒子模型

盒子模型

CSS中，width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

两个盒子在一排？

和模型盒模型

margin外边距

padding内边距

border边框

盒子在页面中所占的宽度

是由左边距+左边框+左填充+内容宽度+右填充+右边框+右边距组成

盒子在页面中所占的高度

是由上边距+上边框+上填充+内容高度+下填充+下边框+下边距组成

border(边框)

margin(外边距)

padding（内边距）

整个元素框的宽度=左边距+左边框+左填充+内容宽度+右填充+右边框+右边距

整个元素框的高度=上边距+上边框+上填充+内容高度+下填充+下边框+下边距

div盒子模型

《盒子模型与公式》

对于子盒子,padding则是自身内容到自身盒子的距离，margin则是自身盒子到父盒子或其他盒子的距离

对于父盒子，padding则是子盒子到自身的距离，margin则是自身盒子到其他盒子的距离

float碰到浮动元素或者父盒子就会换行

盒子之间的距离：margin属性

盒子内容与盒子的距离：padding属性（填充）

整个元素框的宽度=左边距+左边框+左填充+内容宽度+右填充+右边框+右边距

整个元素框的高度=上边距+上边框+上填充+内容高度+下填充+下边框+下边距

描述盒子（生活中）：

• 宽度

• 高度

• 边框 线粗细 线型 线的颜色
  

企业网站：

1.一般包含：头部Logo区、导航区、内容展示区、底部版权区等

2.上：头部/导航区 中：信息展示区 下：页脚区

盒子模型：

属性：宽度、高度、边框  边框之间距离（上下左右）

盒子内容与盒子四周距离-填充（上下左右）

盒子在页面中所在的高度和宽度

盒子模型的概念

盒子模型概念

CSS中，width 和 height 指的是内容区域的宽度和高度，margin 和 padding 不会影响内容的尺寸，但是会影响元素框的总尺寸

盒子模型的概念

margin: 盒子之间的距离

padding: 盒子与内容之间的距离