CSS盒子模型（margin、border、padding）

CSS盒子模型

页面布局三大核心——盒子模型、浮动、定位。

一、 网页布局的本质

• 网页内的元素基本都是盒子模型
• 利用CSS设置好盒子样式，拜访到相应位置
• 往盒子里装内容

二、盒子模型（Box Model）组成

CSS盒子模型：封装HTML元素的盒子，它包括边框、外边框、内边距和实际内容。

• margin：外边距
• border：边框
• content：内容
• padding：内边距

1. 边框（border）

border可以设置元素的边框，由三部分组成：边框宽度（粗细）、边框样式、边框颜色

属性	作用
border-width	边框粗细，单位为px
border-style