HTML和css常见问题解答2

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

四种方式：

（1）.要让div等块级元素水平和垂直居中，必需知道该div等块级元素的宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该div等块级元素分别左移和上移，左移和上移的大小就是该div等块级元素宽度和高度的一半。
 

.mydiv{     width:200px;      height:200px;      position:absolute;      left:50%;      top:50%;      margin:-100px 0 0 -100px }

（2）.利用CSS的margin设置为auto让浏览器自己帮我们水平和垂直居中。

.mydiv{     position: absolute;     left: 0px;     right: 0;     top: 0;     bottom: 0;     margin: auto;     height: 200px;     width: 200px; }

（3） jQuery实现水平和垂直居中

　原理：jQuery实现水平和垂直居中的原理就是通过jQuery设置div等块级元素的CSS，获取div等块级元素的左、上的边距偏移量，边距偏移量的算法就是用页面窗口 的宽度减去该div等块级元素的宽度，得到的值再除以2即左偏移量，右偏移量算法相同。注意div等块级元素的CSS设置要在resize()方法中完成，就是每次改变窗口大 小时，都要执行设置div等块级元素的CSS。
 

$(window).resize(function(){     $(".myblock").css({         position: "absolute",         left: ($(window).width() - $(".myblock").outerWidth())/2,         top: ($(window).height() - $(".myblock").outerHeight())/2     });         });

在页面加载的时候调用刚刚创建的方法

$(function(){     $(window).resize(); });

 

（4）使用transform

.mydiv{width: 100px;height: 100px;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);}

 

 

 

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

 

所谓的雪碧图是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分;简单说就是在一整张图片中分割出自己想要的部分，也可理解为图片截取显示（坐标的移动)

（1）.优点

①减少加载网页图片时对服务器的请求次数；

可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。

②提高页面的加载速度

sprite技术的其中一个好处是图片的加载时间(在有许多sprite时，单张图片的加载时间)。由所需图片拼成的一张 GIF 图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF 只有相关的一个色表，而单独分割的每一张 GIF 都有自己的一个色表，这就增加了总体的大小。因此，单独的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。

（2）.缺点

①在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；

②CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css

 

 

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

 
（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：静态定位（默认）
无定位，元素正常出现了流中，不受上下左右属性影响

<style>    div{        width: 200px;        height: 200px;        background-color: yellow;        position: static;    }</style>

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;*/ }<div id="div1"></div><div id="div2"></div><div id="div3"></div>相对定位可以跳出流，不会影响别的定位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;*/}