CSS盒模型
CSS盒模型指在一个网页文档中，每个元素都被呈现为一个矩形的盒子，描述了元素所占空间的内容。它包括内容（content）、内边距（padding）、边框（border）与外边距（margin），主要分为W3C盒模型与IE盒模型。
-
W3C盒模型
image
W3C盒模型的width与height只含content，不包括padding和border。
-
IE盒模型
image
IE盒模型的width与height是content、padding和border的总和。
CSS的box-sizing属性
box-sizing属性允许用户以特定的方式定义匹配某个区域的特定元素。其值主要有content-box、border-box与inherit。
-
content-box：这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 -
border-box：为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 -
inherit：规定应从父元素继承 box-sizing 属性的值。
line-height值“2”与“200%”的区别
-
line-height: 2表示单行文本的行高为其自身大小的两倍。而line-height: 200%表示单行文本的行高为其父元素大小的两倍。 - 在继承性上，对父元素设置
line-height: 2后，其子元素会继承line-height: 2属性，行高均为自身大小的两倍，行高随子元素字体大小变化；而父元素设置line-height: 200%后，子元素的行高为父元素大小的两倍，行高不随子元素字体大小变化，而只与父元素有关。
inline-block元素的空隙与对齐问题
一、空隙问题
两个inline-block元素之间如果有空格、回车、tab等那么页面显示就有一个空隙，去除空隙主要有如下方法：
- 代码间无间隙：上一个d元素闭合标签
>写在下一个元素开始标签<之前。
<p>代码无间隙</p
><p>代码无间隙</p>
- 对父元素设置
font-size:0：给父元素设置font-size:0后，对其子元素设置相应字体大小。
<style>
body{
font-size: 0;
}
div{
display: inline-block;
width:200px;
height:200px;
font-size:16px;
}
</style>
- 使用负外边距：
<style>
div{
display: inline-block;
width:200px;
height:200px;
font-size:16px;
}
.block1{
margin-left:-5px;
}
.block2{
margin-left:-5px;
}
</style>
二、对齐方式
- 顶部对齐：
vertical-align:top; - 底部对齐：
vertical-align:bottom - 中心对齐：
vertical-align:center
CSS Sprites图
CSS Sprites图也叫 CSS精灵图或雪碧图，是一种网页图片应用处理方式。它其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的background-image、background-repeat和background-position的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
Sprites图的优点
- 减少图片的字节与存储数量。
- 减少网页的http请求，从而大大提高了页面性能。
- 减少命名难的问题。
Sprites图的缺点
- 图片合并比较繁琐，必须把多张图片有序合理地合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。
- 在宽屏，高分辨率的屏幕下的自适应页面，图片如果不够宽，容易出现背景断裂。
-
维护比较麻烦。如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。
实例地址
元素不可见的方法
-
display: none;：给元素设置display: none;后，元素会从页面中彻底消失，它原本占据的空间会被其他元素占有，会造成浏览器的回流与重绘。 -
visibility: hidden;：给元素设置visibility: hidden;后，元素会从页面中消失，它原本占据的空间会被保留，会造成浏览器的重绘，适用于希望元素隐藏又不影响页面布局的场景。 -
opacity: 0;：给元素设置opacity: 0;后，元素变成透明，所以原本占据的空间还在。 -
设置盒模型属性为0：将
height、width、padding、border、margin等盒模型属性的值全设为0，如果元素內还有子元素或内容，还应overflow: hidden;来隐藏子元素。 - 设置元素绝对定位与
top、right、bottom、left等将元素移出屏幕。
.box1{
position: absolute;
top: 9999px;
}
- 设置元素的绝对定位与z-index，将z-index设置成尽量小的负数：但z-index是相对而言的 ，用z-index就要设置其他元素的z-index值，且如果元素本身占据空间很大就不一定会被z-index值比它大的元素完全覆盖，所以不推荐这种方法。
字体图标的原理
字体图标相当于用户自己建立了一个字体库，只不过这个字体库存放的不是文字而是图标。当需要使用指定图标时，在代码中让浏览器先先导入字体库，然后用对应的unicode码或类进行查找并引用即可。
利用iconfont的 Font class 使用字体图标
1.打开 iconfont ，搜索需要的图标添加入库
2.添加入库后打开购物车，把图标添加至项目（若没有项目则新建一个）
- 选择 Unicode 旁的 Font class
- 编辑修改图标名称（英文小写）
- 更新代码并复制，使用 <link> 引入
- body 内容中设置 class 如下：
<span class="iconfont icon-moon"></span>
其中iconfont为网站默认设置的font-family名称，icon-moon为用户修改的图表名称
预览地址
查看代码
