NO.56 CSS定位、网页显示

1.照片墙案例（相对定位）：以元素自己为目标设置偏移

通常偏移量是很小的,而且元素不离队(流)

position:relative;

效果：

2.绝对定位：以元素的带有position的父辈为目标设置偏移

若父辈上都有position,则以就近的父辈为目标

若父辈上都没有position,则以就远的父辈为目标(body)

元素会离队(流)

position:absolute;

你想以谁为目标,就在谁上面加position

效果：

3.固定定位：以浏览器窗口为目标设置偏移

元素会离队(流)

position:fixed;

元素会挂在窗口上保持不动

中间略

后加<div><a href="#">顶部</a></div>

效果：

定位使用建议（它们在偏移时所参考的目标不同）：

固定定位:看元素是否要挂在窗口上保持不动.

相对定位:看元素偏移量是否很小,它的位置是否释放.

浮动定位:是否要将块元素左右排列.

绝对定位:一般超过10秒没想出来,就是绝对定位.

---

4.堆叠顺序：实现鼠标指向图片将不被遮盖

效果：

5.列表样式：

效果：

6.元素的显示方式：可以改变为行内元素、块元素，或隐藏

1）块

有宽高,垂直排列

h,p,ol,ul,div,table,form

2）行内

无宽高,左右排列

span,i,em,b,strong,u,del,a,label

3）行内块

有宽高,左右排列

img,input,select,textarea

4）如何修改元素的显示方式?

块: display:block;

行内: display:inline;

行内块: display:inline-block;

隐藏: display:none;

效果：

---

最后完善一下之前的网页案例：

html中增加的代码

logo图片和菜单区图片 消息提示框

css增加代码：

效果：