小白只发有用的面试题----(三)

11、如何居中div，如何居中一个浮动元素？如何让绝对定位的div居中？

a.margin:xpx auto;

b.确定容器的宽高，这里宽度是必须的，高度可以不设，设置外层的上外边距和左外边距分别是宽高的一半。

实现居中关键在于 margin设置与 position:relative.

    .div {

	     width:500px ;
	
	     height:300px;
	
	     margin: -150px 0 0 -250px;
	
	     position:relative;
	
	     left:50%;
	
	     top:50%;
    }

c.position:absolute;

 top: 50%;

 left: 50%; 只能把div定位在以红色圈为起点的位置，加上margin:-100px 0px 0px -100

12、display有哪些值？说明他们的作用？

block :块对象的默认值。用该值为对象之后添加新行

none :隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间

inline :内联对象的默认值。用该值将从对象中删除行

compact :分配对象为块对象或基于内容之上的内联对象

marker :指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用

inline-table :将表格显示为无前后换行的内联对象或内联容器

list-item :将块对象指定为列表项目。并可以添加可选项目标志

run-in :分配对象为块对象或基于内容之上的内联对象

table :将对象作为块元素级的表格显示

13、position的值relative和absolute的定位原点是什么？

Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。

Relative，CSS中的写法是：position:relative; 他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

14、display设置为inline-block时，li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车空格等等）的影响，这些空白也会被应用样式，占据空间，所以会有间隔

解决：设置ul的font-size为0，缺陷是必须重新在li中去设置字体大小

15、请解释下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

a.添加新的元素 、应用 clear：both;

b.父级定义 overflow: auto（注意：是父级div也就是这里的 div.outer） 一个对seo比较友好，另个hidden对seo不是太友好

    在IE6中还需要触发 hasLayout ，例如 zoom：1；

c.据说是最高大上的方法 :after

    方法：（注意：作用于浮动元素的父亲）IE6-7不支持:after，

    使用 zoom:1触发 hasLayout

    {zoom:1;} /*==for IE6/7 Maxthon2==*/

    :after {clear:both;content:’.’;display:block;width: 0;height: 0;visibility:hidden;}

d.使用 br标签和其自身的 html属性,<br clear=”all” /> clear=”all | left | right | none” 属性

e.父元素也设置浮动

f.父元素设置display:table 盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用