1. 盒子模型的概念

所谓的盒子模型在HTML中就是一个盛装 元素内容的容器。 每个盒子模型都由元素的内容、内边距 （padding）、边框（border）和外边距（margin）组成。

2. 盒子的宽与高

  • 盒子的总宽度 = width+左右内边距之和+左右边框宽度之和+左右外边距之和
  • 盒子的总高度 = height+上下内边距之和+上下边框宽度之和+上下外边距之和

    3. 盒子的边框属性

    为了分割页面中不同的盒子，常常需要给元素设置边框效果。

设置内容 样式属性 常用属性值
边框样式 border-style:上边 [右边下边左边]; none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
边框宽度 border-width:上边 [右边下边左边]; 像素值
边框颜色 border-color:上边 [右边下边左边]; 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
综合设置边框 border:四边宽度四边样式四边颜色;
圆角边框 border-radius:水平半径参数/垂直半径参数; 像素值或百分比
图片边框 border-images:图片路径裁切方式/边框宽度/边框扩展距离重复方式;

4. 盒子的边距属性