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;*/}
 
 

相关推荐