Web前端开发基础（HTML+CSS+JavaScript）课件 第6章 CSS盒子模型、浮动和定位.pdfVIP

第六章CSS盒⼦模型、浮动和定位

第六章CSS盒⼦模型、浮动和定位

讲师:

⽇期:

Web前端开发基础1

第六章CSS盒⼦模型、浮动和定位

学习⽬标

理解盒⼦模型的概念及应⽤

掌握CSS浮动的使⽤

学会CSS定位的各种⽅式

Web前端开发基础2

第六章CSS盒⼦模型、浮动和定位

6.1盒⼦模型

盒⼦模型概念

CSS盒⼦模型是⽹⻚布局的基础，由边框、外边距、内边距和内容组成。

每个HTML元素都可以被视作⼀个盒⼦。

图6-1盒⼦模型

Web前端开发基础3

第六章CSS盒⼦模型、浮动和定位

Padding内边距

概念:padding属性⽤于设置元素内容与其边框之间的内边距（即填充），在内容和边框之间

留出空⽩区域。

语法:可