前端面试题之CSS(三)

1. 块级元素和行内元素有什么区别？

块级元素
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示；
width,height,padding,margin都可以设置；
可以包含块级元素和行内元素；
行内元素
和相邻的内联元素总占一行；
width,height,margin-top,margin-bottom,padding-top,padding-bottom设置无效。
只能包含行内元素和文本；

2.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响？

一个浮动盒会向左或向右移动，直到其外边（outer edge）挨到包含块边沿或者另一个浮动盒的外边。如果存在行盒，浮动盒的外top（边）会与当前行盒的top（边）对齐如果没有足够的水平空间来浮动，它会向下移动，直到空间合适或者不会再出现其它浮动了

因为浮动（盒）不在普通流内，在浮动盒之前或者之后创建的未定位的（non-positioned）块盒会竖直排列，就像浮动不存在一样。然而，接着（next to）浮动（盒）创建的当前及后续行盒会进行必要的缩短，为了给浮动（盒）的margin box让出空间。

父容器感知不到浮动元素的存在，因此父容器的宽度不受浮动元素影响，造成父元素高度塌陷
与其他浮动元素类似行内元素排列。
普通元素也感知不到浮动元素的存在，会被浮动元素覆盖。
文字因为是匿名行盒，可以看到浮动元素，会围绕着浮动元素。

3.清除浮动指什两种以上么?如何清楚浮动？两种以上方法

overflow: hidden


 忘了密码？
 注册新账号

.links { overflow: hidden; }
.links .forget { float: left; }
.links .register { float: right; }

.clearfix
将以下 .clearfix 类应用到需要清除浮动的父元素。

.clearfix::after {
  content: '';
  clear: both;
  display: block;
}

4.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？

inherit继承：继承父元素的position属性
static无定位：没有定位，元素出现在普通文档流中，设置top, right, bottom, left不起任何作用。
relative：相对定位。元素不脱离文档流。参考点：自身在文档流中的位置。使用场景：一般作为绝对定位的元素参考点，或者页面图片的小偏移。
absolute：绝对定位。元素脱离文档流。参考点：距离最近的非static祖先元素
位置。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位。使用场景：元素的水平垂直居中。
fixed：基于浏览器固定定位。元素脱离文档流。参考点：参考浏览器窗口的位置。使用场景：相对于浏览器窗口位置始终不变的显示窗口，比如：固定边栏和底栏

5.z-index有什么作用？

z-index作用：设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。元素可拥有负的 z-index 属性值使用方法： z-index 仅能在定位元素上奏效，css中有position属性值为absolute、relative或fixed，用z-index此取值方可生效。此属性参数值越大，则被层叠在最上面。

6.实现如下导航栏效果

http://js.jirengu.com/beka

7.实现如下效果

http://js.jirengu.com/fovuy