CSS盒模型

演讲者：前端开发课程组

内容提纲

  1. CSS盒模型
  2. width and height尺寸
  3. padding and margin内补白和外补白
  4. border and outline 边框和轮廓

CSS盒模型

任何元素在网页中都会以一个盒子的形式存在

我们以盒模型原理计算盒子的占用空间

尺寸属性

属性 版本 继承性 描述
width CSS1 无 检索或设置对象的宽度
min-width CSS2 无 设置或检索对象的最小宽度
max-width CSS2 无 设置或检索对象的最大宽度
height CSS1 无 检索或设置对象的高度
min-height CSS2 无 设置或检索对象的最小高度
max-height CSS2 无 设置或检索对象的最大高度

padding and margin

padding

内填充、内补白，元素内容和边框之间的距离

可以接受1-4个值，分别为上右下左，没有设置的值取对面的值

margin

外边距、外补白，元素边框之外占用的距离

可以接受1-4个值，分别为上右下左，没有设置的值取对面的值

单个元素空间计算

盒子模型尺寸（IE）=边框+内补白+盒子的内容尺寸（边框内）

盒子模型尺寸（W3C）=外补白+边框+内补白+盒子的内容尺寸（边框外）

兄弟块元素水平距离（边框间）

默认情况下（常规流），块状元素不能水平排列，需要利用浮动实现

兄弟块元素水平距离（边框间）=左元素的右margin+右元素的左margin

兄弟块元素垂直距离（边框间）

兄弟块元素垂直距离（边框间）=上元素的下margin和下元素的上margin中较大的值

父子块元素距离（边框间）

父子块元素距离（边框间）=父元素的padding+子元素的margin

margin塌陷

  • 当父元素没有padding和border时，子元素竖直方向的margin会附加到父元素上
  • 解决：为父元素设置padding或border

前端开发

旨为前端开发工程师的前端开发基础课程