学习了这么多，我终于也要开始总结最最重要的盒模型啦，不过在此之前，还是先来了解一下Css一些知识点吧：锚伪类伪类，与类选择器相似，但又有所不同。锚伪类a:link:给a标签设置没有被访问过的样式。代码
学习了这么多，我终于也要开始总结最最重要的盒模型啦，不过在此之前，还是先来了解一下Css一些知识点吧：
锚伪类
- 伪类，与类选择器相似，但又有所不同。
- 锚伪类
a:link:给a标签设置没有被访问过的样式。
- 代码
a:link { color: red; font-size: 30px; }a:visited:给a标签设置没有被访问过的样式。
- 代码
a:link { color: red; font-size: 30px; }a:hover:给a标签设置鼠标悬停时的样式。
- 代码
a:hover { color: red; font-size: 30px; }a:active:给a标签设置被激活时的样式（被点击时的样式）
- 代码
a:active { color: red; font-size: 30px; }
- 注意点
- 在使用的时候一定遵守这样的顺序：a:link,a:visited,a:hover,a:active
- 记忆方法：爱恨原则（love-ha，t，心理作用：lv-ha。买了一个lv，心里乐哈哈）
- 有些锚伪类除了可以作用在a标签上还可以作用来其它标签上：
- :link 只能用于a标签
- :visited只能用于a标签
- :hover 其它标签也可以使用这个伪类
- :active 其它标签也可以使用这个伪类
- 每次查看伪类效果时清除浏览器记录：浏览器中-设置-显示高级设置-清除浏览记录。
- 做一个五彩导航（可以直接复制查看效果哦）：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> a { color: white; text-decoration: none; width: 120px; height: 58px; display: inline-block; text-align: center;/*水平居中*/ line-height: 50px;/*垂直居中*/ } .one { background: url(images/bg1.png) no-repeat; } .two { background: url(images/bg2.png); } .three { background: url(images/bg3.jpg); } .four { background: url(images/bg4.png); } .one:hover { background: url(images/bg5.png); } .two:hover { background: url(images/bg6.png); } .three:hover { background: url(images/bg7.png); } .four:hover { background: url(images/bg3.png); } </style></head><body> <a class="one" href="#">导航1</a> <a class="two" href="#">导航2</a> <a class="three" href="#">导航3</a> <a class="four" href="#">导航4</a></body></html>行高（line-height）
- 应用 ：如果行高等于容器的高度那么元素在父容器中垂直居中。
- 行高的定义：两行文本之间基线的距离就是做行高。
- 自己理解与w3c定义
- 了解文字的结构默认情况下一行文本的行高分为：上间距，文本的高度，下间距，并且上间距是等于下间距的，所以文字默认在这一行中是垂直居中的。
- 问题：为什么行高等于容器的高度，元素在父容器中垂直居中？因为如果行高等于容器的高度，那么相当这个容器中只有这一行文本，并且容器被这一行文本占满。而本身文字在自己的一行中是垂直居中的，所以看起来就像是在容器中垂直居中。
- 注意点line-height设置时以em、%、没有为单位的时候，是以font-size为基数设置的。（注意，em、%设置时，先计算出行高再继承到子元素；而没有设置时，先继承到子元素后计算行高。）
盒子模型
概念
在写一个html页面的时候，其实就相当于在这个页面中叠盒子。
思想：万物皆盒子。
具体内容：
盒子的挡板---------border，盒子的泡沫---------padding，盒子中的物品--------内容。，子与盒子之间的距离---------margin
border(边框)---盒子的挡板
- border-color:边框的颜色
- border-top-color
- border-right-color
- border-bottom-color
- border-left-color
- border-width:边框的宽度
- border-top-width
- border-right-width
- border-bottom-width
- border-left-width
- border-style:边框的样式
- border-top-style-border-right-style
- border-bottom-style
- border-left-style
- 取值：solid：实线;dashed：虚线;dotted：点线
- 边框的连写方法：border: border-width border-style border-color;
- border-collapse: collapse;/去掉单元格之间的间隙/
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 200px; height: 200px; background: red; /*border-color: green; border-width: 10px; border-style: solid;*/ /*border: 10px solid green;*/ /*border-top-color: green; border-top-width: 5px; border-top-style: solid;*/ border-top: 5px dotted green; /*border-right-color: blue; border-right-width: 10px; border-right-style: solid;*/ border-right: 10px dashed blue; /*border-bottom-color: pink; border-bottom-width: 15px; border-bottom-style: solid;*/ border-bottom: 15px double pink; /*border-left-color: yellow; border-left-width: 20px; border-left-style: solid;*/ border-left: 20px groove yellow; } </style></head><body> <div> </div></body></html>使用开发人员工具查看元素的盒子模型
盒子的填充：padding(内边距)
- 作用：设置盒子的内容与边框之间的距离。
- 取值：
- padding: 40px;给上右下左所有的内边距都设置了40像素的距离。
- padding: 40px 80px;给上下内边距设置了40像素，下左右边距设置了80像素。
- padding: 40px 60px 80px;给上边距设置了40像素，给左右设置了60像素，给下设置了80像素。
- padding: 40px 60px 80px 100px;以顺时针方向进行设置，上为40px,右为60像素，下为80像素，右为100像素。
- padding-top;padding-right;padding-bottom;padding-left
- 计算盒子的大小：注意：padding（盒子中的填充物）会改变盒子的大小（跟日常生活中有区别）。
- 计算盒子大小的公式：
- 盒子宽：border-left-width + padding-left + width + padding-right + border-right-width
- 盒子高：border-top-width + padding-top +height + padding-bottom + border-bottom-width
- 特殊情况下padding不会改变盒子的大小：当一个大盒子包含一个小盒子，并且大小盒子都是块级元素，而且小盒子的宽是继承自大盒子的话，那么设置小盒子的padding-left不会改变小盒子的大小。
盒子与盒子之间的距离：margin（外边距）
作用：设置盒子与盒子之间的距离。
取值：
- margin: 10px;给上右下左所有的外边距都设置了10像素的距离。
- margin: 10px 20px;给上下外边距设置了10像素，下左右外边距设置了20像素。
- margin: 10 px 20px 40px;给上设置10px外边距，给左右设置20px的外边距，给下设置40px外边距
- margin:10px 20px 40px 80px;给上10，右20，下40，左80
- maring-top;margin-right;margin-bottom;margin-left
margin两种特殊现象
- 外边距的合并现象如果两个div上下排序，给上面一个div设置margin-bottom，给下面一个div设置margin-top，那么两个margin会发生合并现象，合并以后的值较大的那个。
- margin的塌陷现象如果一个大盒子中包含一个小盒子，给小盒子设置margin-top大盒子会一起向下平移。
- 解决：<strong>给大盒子设置：border；给大盒子设置：overflow:hidden。给小盒子设置浮动(还不了解浮动的话可以先查看我的下一篇博客：地址)。</strong>
注意点：很多标签默认带有margin和padding，所以将来进行页面的布局的时候一定要清除这些标签的默认的margin和padding。
- 例如：
- body标签默认带有margin: 8px的属性
- p标签默认带有margin: font-size 0;
- h标签也默认带有margin-top和margin-bottom
- ul默认带有上下的margin以及左边的padding-清除的方法：
* { margin: 0; padding: 0; }
其他补充点
- 取消默认状态下input点击时出现的蓝色边缘：outline-style：none；
- 去掉单元格之间的间隙：border-collapse:collapse(一般写在table样式里)。
- 列表里(无序列表，有序列表，自定义列表)去除默认的清单样式：list-style：none。
这些都是基础但很重要的知识哦，盒模型的思想一定要让自己深入骨髓哈，如果您还是有点模糊，建议可以看看以下这些链接哈：w3c盒模型MDN盒模型介绍
学习了这些样式，我们就可以把很多页面做的很漂亮了，试试看做一些小示例哦！在不断学习新东西的过程中，这些练习可是必不可少的呢！加油，加油！
如有错误，希望您多多指正！
