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

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

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

讲师:

日期:

Web前端开发基础

1

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

学习目标

理解盒子模型的概念及应用

掌握CSS浮动的使用

学会CSS定位的各种方式

Web前端开发基础

2

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

6.1盒子模型

盒子模型概念

CSS盒子模型是网页布局的基础，由边框、外边距、内边距和内容组成。

每个HTML元素都可以被视作一个盒子。

外边距（Margin）

边框（Border）

内边距（Padding）

内容（Content）

图6-1盒子模型

Web前端开发基础

3

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

Padding内边距

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

留出空白区域。

语法:可以用多种方式定义不同方向的内边距:

padding:1px;单个值应用于四个方向（上、右、下、左）。

padding:1px2px;第一个值为上下内边距,第二个值为左右内边距。

padding:1px2px3px;第一个值为上方,第二个值为左右,第三个值为下方内边距。

padding:1px2px3px4px;顺时针分别为上、右、下、左内边距。

通过设置padding，可以精确控制内容与边框的距离，优化页面布局