1.CSS样式的分类
CSS样式分为一项4种：
1.内联样式表，直接写在元素style属性里面的样式，如
<p style="color:red;">内联样式</p>
2.内部样式表，写在<head><.head>标签内部<style></style>标签里面的样式
<head>
<meta charset="utf-8" />
<title>无标题文档 </title>
<style>
.colorred{
color:red;
}
</style>
</head>
3.外部样式表，通过link方式链接的样式
<link rel="Stylesheet" href="Styles/StyleSheet1.css" type ="text/css" />
4.导入样式表，通过import标签导入的样式，import标签必须在style标签内部，也可以在一个样式表文件中导入其他样式表文件，导入的样式表必须写在样式表的第一行，但是浏览器在最后解释，有可能造成闪屏
<style>
@import url("Styles/StyleSheet1.css");/*导入样式表*/
</style>
2.盒模型
网页上的每个元素都是以一个矩形的形式存在,每个矩形由元素内容、内边距、边框、外边距组成。如下图元素的最内部分是元素内容，包裹这内容的是内边距，内边距外面的边框，最外面的外边距。
元素盒模型的大小直接影响到元素占用的空间。盒模型的宽度、高度计算方式
盒模型的宽度：margin-left+border-left-width+padding-left +width+padding-right+border-right-width+margin-right
盒模型的高度：margin-top+border-top-width+padding-top+height+padding-bottom+border-bottom-width+margin-bottom
以上的盒模型计算方式是大部分浏览器都适用的，但是在ie6及更低版本的浏览器中有可能触发怪异模式
低版本的ie浏览器存在两种渲染模式：标准模式和怪异模式，没有标明DOCTYPE 或者DOCTYPE拼写错误会导致IE触发怪异模式
怪异模式下面的盒模型宽度高度是盒模型的宽度和高度，不是元素的宽度和高度
怪异模式下的盒模型宽度、高度计算方式
宽度：margin-left+width+margin-right
高度：margin-top+height+margin-bottom
如果盒模型的内边距和边框加起来超过设定的宽度和高度会撑大元素，并且会随着元素内容的增大而变大
原文地址：https://www.cnblogs.com/lidaying5/p/9994240.html