CSS中的盒子模型

---

前言

在网页制作过程中，处处都会用到盒子模型

提示：以下是本篇文章正文内容，下面案例可供参考

一、盒子是什么？

示例：盒子模型是CSS控制页面的一个很重要的概念，只要用到div布局那么必然会用到盒子模型

二、盒子模型的应用

1.盒子模型的介绍

在CSS中一个独立的盒子模型由网页内容（content）、边框（boder）、
内边距（padding）、外边距（margin）四部分组成。网页内容位于最中间，是网页的主要显示内容。边框位于内边距外边，如果没有内边距就是包着网页内容的外框，边框一般具有厚度。内边距位于边框内部的空隙，是网页内容与边框的距离。外边距位于边框外部的空隙，是边框与周围事物的距离。

2.边框的使用

边框由三个属性分别是：color颜色、width粗细、style样式
1.boder-color：设置方法与文本的color属性或background-color属性完全一样，也是使用十六进制，也可以直接使用颜色的英文单词或者三原色的组合RGBA.(其中boder-top-color、boder-bottom-color、boder-left-color、boder-right-color可以设置上下左右四个边框的颜色。

2.boder-width：用来指定边框的粗细程度，属性值有四个：thin（设置细的边框），medium（默认值，一般为2px），thick（设置粗的边框），像素值（px）。跟boder-color的属性一样，也可以设置上下左右四个边框的样式。

3.boder-style：用来指定边框的样式，取值有none（无边框）、hidden、dotted、doshed（虚线）、solid（实线）、double、groove和ridge、outset等，同样跟前面两个属性一样也可以分别设置上下左右四个边框的样式。

3.外边距的使用

1.外边距（margin）是位于盒子边框之外，是指与其他盒子之间的距离，也就是网页中元素与元素之间的距离。外边距与边框一样可以设置上下左右外边距的距离：margin-top（设置上外边距）、margin-right（设置右外边距）、margin-left（设置左外边距）、margin-bottom（设置下外边距），也可以简写margin: 2px 3px 5px 6px（顺序为上、右、下、左）;

2.网页中有很多标签都有默认外边距，如p标签、h1~h6标题标签、from标签、body标签、以及ol、ul、li、dl、dt、dd标签等，所以在CSS需要通过选择器来统一设置这些标签的外边距为0px（如*{padding:0px;margin:0px;}），这样页面就不会因为外边距而产生不必要的空隙。

3.内边距的使用

1.内边距（padding）用于控制内容与边框之间的距离，以便精确的控制内容在盒子中的位置，内边距跟外边距一样也分为上下左右的内边距，设置方法与外边距的设置方法和顺序相同。

3.box-sizing拯救布局

盒子的总尺寸不但包括内容宽度（width），还有包括内边距，外边距和边框等，每次使用都要计算，很麻烦，所以CSS中增加了一个盒子模型box-sizing，用于事先定义盒子模型的尺寸解析方式，属性值有：conten-box（默认值，等于盒子边框+外边距+内边距+宽度+高度），border-box（盒子的宽度和高度等于元素的内容的宽度和高度），inherit（元素继承父元素的盒子模型模式）

---

总结

以上就是CSS中盒子模型的介绍和使用，实际应用时还应结合网页布局去使用。