CSS基础（四） 个人笔记
来源：互联网 发布：云计算大数据就业前景 编辑：程序博客网 时间：2024/06/05 16:04
定位
相对定位
相对定位是如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
用法如下：
position: relative;
left: 30px;
top: 20px;
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
实例如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> #container{ width: 800px; height: 300px; background-color: #ff6600; margin: 0 auto ; overflow: hidden; } #top{ width:200px; height: 100px; margin: 5px 5px; float: left; background-color: aqua; } #center{ width:200px; height: 100px; margin: 5px 5px; float: left; position: relative; top: 20px; left: 60px; background-color:red; } #bottom{ width:200px; height: 100px; margin: 5px 5px; float: left; /*相对对位*/ /*1.相对于自己原来的位置进行定位*/ /*2.移动后，原来位置不被占用*/ position: relative; top: 20px; left: 60px; background-color: aqua; } </style> <title>相对定位</title></head><body><div id="container"> <div id="top"></div> <div id="center"></div> <div id="bottom"></div></div></body></html><!--绝对定位;离他最近的，并且使用定位的-->结果如下：
绝对定位
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
用法如下：
position: absolute;
left: 30px;
top: 20px;
实例如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> #div1{ width: 800px; height: 300px; background-color: black; position: relative; overflow: hidden; } #div2{ width:600px; height: 250px; background-color: #c6c7c7; margin: 20px 0 0 20px; overflow: hidden; } #div3{ width:400px; height: 150px; background-color: cyan; margin: 20px 0 0 20px; overflow: hidden; } #top{ width:100px; height: 100px; float: left; background-color: red; position: absolute; top:10px; left: 10px; } #center{ width:100px; height: 100px; float: left; background-color: blue; } #bottom{ width:100px; height: 100px; float: left; background-color: chartreuse; } </style> <!--绝对定位： 1.离他最近的，并且使用定位的父元素 如果没有符合的，使用以border为基准 2.原本位置可以被占用--> <title>绝对定位</title></head><body><div id="div1"> <div id="div2"> <div id="div3"> <div id="top"></div> <div id="center"></div> <div id="bottom"></div> </div> </div></div></body></html>结果如下：
固定定位
简单来说：不随着滚动条移动而移动
实例如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> #div1{ height: 1200px; background-color: red; } #backtop{ height: 50px; width: 50px; background-color: #ff6600; position: fixed;/*固定定位：不随着滚动条移动而移动*/ bottom: 50px; right: 0px; } </style> <title>固定定位</title></head><body><a name="top"></a><!--锚点连接--><div id="div1"></div><button id="backtop"><a href="#top">返回顶部</a></button></body></html>结果：
简单应用
如何让一个子div一直在父div的正中间？
1：给父容器添加一个相对定位。
2：给子容器添加绝对定位。
3：top:50%;left :50%.
4:marign-left(width) marign-left(height) 子容器的大小一半。
实例如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> #top{ width: 300px; height: 300px; background-color: #ff6600; margin: 0 auto; position: relative;/*相对定位*/ } #center{ width: 80px; height: 100px; background-color: aqua; position: absolute;/*绝对定位*/ top: 50%; left: 50%; margin-top: -50px;/*负边距=本身大小的一半*/ margin-left: -40px; } </style> <title>Title</title></head><body><!--1：给父容器加相对定位 2：给子容器添加绝对定位 3：top left： 50% 4：margin-top（height） margin-left(width)：子容器的大小的一半--><div id="top"> <div id="center"></div></div></body></html>结果如下：
阅读全文
0 0
- CSS基础（四） 个人笔记
- CSS基础（一） 个人笔记
- CSS基础（二） 个人笔记
- CSS基础（三） 个人笔记
- CSS基础（五） 个人笔记
- javascript基础（四） 个人笔记
- 黑马程序员：iOS基础——个人笔记（四）
- CSS基础（四）
- CSS学习笔记－－基础（四）
- 慕课网《HTML+CSS基础课程》笔记总结（四）
- 《HTML+CSS基础课程》学习笔记四
- Ｒ基础（个人笔记）
- CSS基础（笔记）
- css学习笔记（四）
- CSS学习笔记---（四）
- CSS学习笔记（四）--CSS高级
- CSS学习笔记（四）：CSS布局
- web之css（个人学习笔记）
- HDU 5984 ACM-ICPC Regional QingDao（数学期望）
- c/c++编程小知识1
- vue2中（路由/父子/组件/事件）数据通信方法总结
- POJ 3630 Phone List
- 2. HashMap总结
- CSS基础（四） 个人笔记
- 第三发资源
- 蒟蒻背板
- web安全，js base64加密， MD5加密，sha1加密
- open-github新项目快报
- Hibernate的Session及其缓存
- 解决WampServer 中MySQL插入中文乱码问题
- 为测试执行立法——浅谈测试设计
- PKI系统深入介绍
