随笔03

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

　　1.利用CSS的margin设置为auto让元素水平和垂直居中；

　　2.弹性盒模型flex;将父级设置为弹性盒模型，通过

　　display：flex；

　　justify-content：center；

　　来实现元素居中。

　　3.text-align：cennter；

　　　line-hight=xxpx；

　　4.还可以用定位的方式实现居中；

 

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

　　雪碧图名sprite，图片拼合技术。

 

 

　　在网页加速过程中，图片个数越多就越可能造成一直加载不出来的现象，Sprite图像拼合可以让页面中设计到的小图标都整合到一个图片上，通过图像位置定位来操作。

　　优点: 图片变成一张所占位置减少，可以减少加载时间，增强用户体验；减少设计师工作量。

 　　缺点：背景容易出现断裂，不是直接替换照片，而是利用PS来测量好每一个的位置，环节繁琐一些，测量不精确会导致显示图片有出入。

　　总的来说：图片拼合技术适用于网页上图标相对不会变动的情况；而经常需要更换图片等的地方则不建议使用。

3. 什么是行盒？它的特征、尺寸和定位。

　　display属性为inline的元素；

　　因行内元素可以换行，所以行盒可以被折断。

　　在一行中，多个行盒由左向右依次排列。

　　行盒之间的距离可以设置，高度不可设置。

　　1.行盒可被折断，因为内容可被折断换行（可通过word-break属性设置截断位置）；

　　2.同一个包含块中，连续的多个行盒水平依次排列 ；

　　3.源代码中的连续空白字符，比如空格、换行以及制表符，在页面上，都会被折叠为一个空格。

　　这种折叠的规则仅适用于行盒内部和行盒之间 ；

　　4.行盒与行盒之间的距离可使用水平方向上的margin和padding进行设置。