css样式--盒子模型

     盒子模型是html和css中最核心的基础知识，下面让我来简单介绍一下。

一、概念

        css盒子模型又称为框模型（box model），这一术语是用来设计和布局是使用。包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）。

 

 What：什么是盒子模型？

网页上的每一个标签都是一个盒子，每一个都有四个属性

 

 

•  内容（content）

盒子里面装的东西

在网页中通常是指文字和图片

 

 

•  内边距（padding）

就像是包在易碎物品上的泡泡膜

清除内容周围的区域，是透明的。

 

 

• 边框（border）

盒子自己本身

围绕在内边距和内容外的边框

 

 

• 外边距（margin）

盒子摆放的时候要留一些空隙。同时也围绕方便取出

 

标准盒子模型

 

 总结：

    元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；

    元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。

 

 

二、盒子模型的属性

1、内容属性

  

 

2、内边距

 

 

 

3、边框

 

 

4、设置外边距