前端（六）

一css定位

css定位有三种：绝对定位、相对定位、固定定位。

position: absolute;  <!-- 绝对定位 -->

position: relative;  <!-- 相对定位 -->

position: fixed;     <!-- 固定定位 -->复制代码

相对定位

让元素相对于本身原来的位置，进行位置调整（可用于盒子的位置微调）。

相对定位：不脱标，老家留坑，别人不会把它的位置挤走。也就是说，相对定位的真实位置还在老家，只不过影子出去了，能够处处飘。

相对定位的定位值

• left：盒子右移

• right：盒子左移

• top：盒子下移

• bottom：盒子上移

PS：负数表示相反的方向。

绝对定位

定义横纵坐标。父容器有定位样式原点在父容器左上角或左下角；父容器没有定位样式原点在网页的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。

绝对定位： 脱标，因此，全部的标准文档流的性质，绝对定位以后都不遵照了。绝对定位以后，标签就不区分所谓的行内元素、块级元素了，不须要display:block就能够设置宽、高了。

若是用top描述，那么参考点就是页面或父控件左上角，原点是会动的。

若是用bottom描述，那么参考点就是页面或者父亲就控件左下角，原点也是会动的。这样定位的div都会跟随网页移动。

tips：绝对定位，无视参考的那个盒子的padding。

固定定位

就是相对浏览器窗口进行定位。不管页面如何滚动，这个盒子显示的位置不变。他也是脱标了。

z-index属性

z-index属性：表示谁压着谁。数值大的压盖住数值小的。

有以下特性：

• 属性值大的位于上层，属性值小的位于下层。
• z-index值没有单位，就是一个正整数。默认的z-index值是0。
• 若是你们都没有z-index值，或者z-index值同样，那么在HTML代码里谁写在后面，谁就在上面能压住别人。定位了的元素，永远可以压住没有定位的元素。
• 只有定位了的元素，才能有z-index值。也就是说，无论相对定位、绝对定位、固定定位，均可以使用z-index值。而浮动的元素不能用。
• 从父现象：父亲怂了，儿子再牛逼也没用。意思是，若是父亲1比父亲2大，那么，即便儿子1比儿子2小，儿子1也能在最上层。

二css中经常使用的小知识

2.1隐藏盒子

（1）方式一：

overflow：hidden;   //隐藏盒子超出的部分
复制代码

（2）方式二：

display: none;	  隐藏盒子，并且不占位置(用的最多)复制代码

（3）方式三：

visibility: hidden;   //隐藏盒子，占位置。
visibility: visible;   //让盒子从新显示

复制代码

2.2超连接

href=""                    //刷新页面

href="#"                   //跳转到当前页面的顶部（不会刷新）
复制代码

2.3设置盒子的半透明

• background: rgba(0,0,0,0.3);

• background: rgba(0,0,0,.3);

2.4网页地址和映射地址区别

站点的访问都是经过后台的Controller层去访问，好比访问地址为：

http://192.168.1.166:8080/project/web/a.html

对应的后台应为

//对外暴漏的地址，
@RequestMapping("/a.html")
 public String e(){
     //html映射地址，和访问地址无关。
     return "index";
 } 复制代码

如index页面有一个超连接代码以下:

<a href="/project/web/b.html?name=zhangsan" target="_blank">跳转页面二</a>复制代码

那么对应的Controller层应该还有一个处理方法：

//对外暴漏的地址，
@RequestMapping("/b.html")
public String f(Model model, String name){
    //获取传递过来的参数，而后放入网页，固然还能够查询数据库获得更多的数据，再放入网页
    model.addAttribute("name",name);
     //html映射地址，和访问地址无关。
     return "test";
}复制代码

这个时候在test页面获取数据，写法为：${name}

实际项目开发的过程当中，要限制部分网页不能经过浏览器直接访问，要经过内部页面跳转，才能访问。

三练习

跟着慕课网视频去练习css布局用法：www.imooc.com/video/1489