雪碧图，块级元素，行盒总结

一个块级元素水平和垂直居中有几种方法，分别是什么？

1.水平居中对齐
1.1 设置margin:0 auto
{
margin:0 auto;
}

设置在子元素上
1.2 使用flex布局,设置justify-content
概属性将设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式
{
display: flex;
justify-content: center;
}
2.垂直居中对齐
2.1 使用flex布局，设置align-items
该属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

{
display: flex;
align-items: center;
}
设置在父元素上

2.2 使用absolute布局
{
position: absolute;
border: 1px solid black;
background-color: green;
width: 300px;
height: 200px;
top: 50%;
bottom: 0px;
left: 0px;
right: 0px;
margin-top: -100px;
}
设置在子元素上

2.3 使用table-cell布局
{
display: table-cell;
vertical-align: middle;
}
该布局设置在父元素上。

2.4 使用transform
{
position: absolute;
top: 50%;
left: 50%;
bottom: 0px;
right: 0px;
transform: translate(-50%, -50%);
height: 100px;
}

总结
1.使用flex布局，设置align-items和justify-content分别达到垂直和水平居中比较方便，而且可以针对不定宽度和高度的块元素。因为flex定位个人感觉最为方便

什么是雪碧图，它的优缺点是什么？

雪碧图的使用

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图，雪碧图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

制作雪碧图

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。

大部分情况下，精灵图都是网页美工做。

我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。
我们精灵图的宽度取决于最宽的那个背景。 
我们可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。
在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。

结束语： 小公司，背景图片很少的情况，没有必要使用精灵技术，维护成本太高。 如果是背景图片比较多，可以建议使用精灵技术。

什么是行盒，描述它的特征，尺寸和定位

1）. 尺寸相关属性
Height：高度
Width：宽度
div{ height: 100px; width: 100px;}
Max-height：
Min-height：
Max-width：
Min-width：
（2）. 隐藏属性的方法
Visibility：后面接hidden，表示仅仅隐藏了内容，却还是存在的
Display：后面接none，把内容都搞没了，且不占位置
Display可以设置元素的显示模式
Inline：可以将块集元素以内联形式显示，且width和height无效，其空间大小取决于元素的内容。
Inline-black：可以将块集元素以内联形式显示，同时兼具块集元素的某些特征，比如使用width和height属性设置大小
i. 块集元素可以转换为内联元素，转换方式是定义display=inline-black;
ii. 内联元素可以转换为块集元素，转换方式是定义display= black;
li{ display: inline-block; width: 300px; height: 300px; background-color: green;}span{ width: 200px; height: 200px; display: block; background-color: blue;}

（3）.定位
定位的方式有：static、fixed、relative、absolute
Static：静态定位（默认）
无定位，元素正常出现了流中，不受上下左右属性影响

Fixed：动态定位
#div1{ width: 200px; height: 200px; background-color: blue; /left: 50px;/ /top: 50px;/ position: fixed; /z-index: 3;/}#div2{ width: 200px; height: 200px; background-color: yellow; left: 50px; top: 30px; position: fixed; /z-index: 2;/}
从结果看出，fix定位可以将div从流中取出来，重新定位取决于left、top。重新定位之后会出现重叠，可以用z-index来实现谁在上面，大的在上。
Relative：相对的
#div1{ width: 200px; height: 200px; background-color: blue; /left: 50px;/ /top: 50px;/ position: static; /z-index: 3;/}#div2{ width: 200px; height: 200px; background-color: yello left: 50px; top: 30px; position: relative; /z-index: 2;/}#div3{ width: 200px; height: 200px; background-color: yello left: 100px; top: 60px; position: relative; /z-index: 2;/ }

相对定位可以跳出流，不会影响别的定位Absolute：绝对的#div1{ width: 200px; height: 200px; background-color: blue; / left: 50px;/ / top: 50px;/ position: static; / z-index: 3;/}#div2{ width: 200px; height: 200px; background-color: yellow; left: 50px; top: 30px; position: absolute; / z-index: 2;/}#div3{ width: 200px; height: 200px; background-color: yellow; left: 40px; top: 20px; position: absolute; / z-index: 2;/}

HTML和css常见问题解答2

标签：截取 原理 resize sprite min jquery 避免 size span