Css定位之relative_慕课网课程笔记
前言
最近在慕课网上跟着张鑫旭大神重新学习一遍CSS相关的知识,以下是学习的笔记以及个人一些理解
relative对绝对定位的限制
1.限制绝对定位 绝对定位的top、left、right和bottom是相对最近的一个relative父元素的。
2.限制层级 绝对定位的层级优先级是低于其父元素相对定位的层级的
3.限制overflow 绝对定位可以不受父容器overflow的影响,即可以溢出,但是父元素加上relative后,即可以完美包裹绝对定位元素.
relative自身定位
1 相对自身 当relative使用top、left、right和bottom来移动定位时,这些属性上的值是相对于relative在当前文档流中的位置位移,相对的是,绝对定位则是相对于离它最近的relative父元素
2 无侵入 当相对定位位移时,类似于悬浮效果的位移,不会影响其他元素,即其周末的元素不会因为relative的位移而调整位置,相对的,其它定位可能会引起其它元素的位移(比如说margin)
3 同时设置top bottom 和left right怎么办? 绝对定位是拉伸,相对定位是斗争,简而言之就是top>bottom,left>right
relative层级
1 提高层叠上下文 当两个元素的层级一样时,在文档流中添加有relative的元素层级会比较高,而不会由后面的元素覆盖前面的
2 新建层级上下文和层级控制 相对定位的z-index为auto时,就无法限制子元素为绝对定位的层级了,相当于这时候相对定位的z-index为零了。 IE6/7是不行的,既然是auto也会限制绝对定位
relative的最小化影响原则
所谓最小化影响原则,就是尽量降低relative属性对其他元素或布局的潜在影响
1 尽量避免使用relative 绝对位尽量不依赖相对定位
2 relative最小化原则 将需要的元素从大的dom结构中分离
外链:
http://www.imooc.com/learn/565
Css定位之relative_慕课网课程笔记的更多相关文章
- Css定位之absolute_慕课网课程笔记
absolute和float 绝对定位和浮动有相似之处,即都有破坏性和包裹性,破坏性是指其会导致包裹自身的复原塌陷,包裹性是float的天赋技能,对于绝对定位来说,其会包括子元素 越独立越强大 1.去 ...
- Css深入理解之浮动_慕课网课程笔记
前言 这篇是在慕课网上跟着张鑫旭重走CSS之路的第三篇学习笔记了,主要是学习float属性,闲话少说,下面进入正文. float的历史 要想了解一个东西,我们还是需要从本质去了解它,那么我们就需要问一 ...
- CSS基本语法(慕课网学习笔记)
CSS的声明,内外联样式以及CSS的优先级 css学习.html <!DOCTYPE html> <html lang="en"> <head> ...
- 网站优化之-SEO在网页制作中的应用(信息来自慕课网课程笔记)
一.SEO基本介绍. 1.搜索引擎工作原理. 2.seo简介:SEarch Engine Optimization,搜索引擎优化.为了提升网页在搜索引擎自然搜索结果中的收录数量及排序位置而做的优化行为 ...
- Node.js爬虫-爬取慕课网课程信息
第一次学习Node.js爬虫,所以这时一个简单的爬虫,Node.js的好处就是可以并发的执行 这个爬虫主要就是获取慕课网的课程信息,并把获得的信息存储到一个文件中,其中要用到cheerio库,它可以让 ...
- JavaScript入门--慕课网学习笔记
JAVASCRIPT—(慕课网)入门篇 我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码.注意, <script&g ...
- Python爬虫之爬取慕课网课程评分
BS是什么? BeautifulSoup是一个基于标签的文本解析工具.可以根据标签提取想要的内容,很适合处理html和xml这类语言文本.如果你希望了解更多关于BS的介绍和用法,请看Beautiful ...
- JavaScript进阶--慕课网学习笔记
JAVASCRIPT—进阶篇 给变量取个名字(变量命名) 变量名字可以任意取,只不过取名字要遵循一些规则: 1.必须以字母.下划线或美元符号开头,后面可以跟字 ...
- HTML基本语法(慕课网学习笔记)
标题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...
随机推荐
- js调试--查找dom对象绑定的函数
点击最右侧的js文件. 选中函数upload_pic_box,右击,选择在控制台中调试,或者在控制台直接输入该函数 点击最后一行代码会打开该函数所在的js文件
- webbench之编译安装(一)
1.编译安装: 1 2 3 4 [root@hexuweb102 ~]$wget http://blog.s135.com/soft/linux/webbench/webbench-1.5.tar ...
- Javassist 字节码操作
1.读写字节码 Javassist是用来处理java字节码的类库.字节码保存在二进制文件中称为类文件.每个类文件夹包括一个java类或接口. Javasssist.CtClass这个类是一个类文件的抽 ...
- web请求的拦截与处理
1,特定请求的拦截:spring或struct2的拦截器,指定拦截模式和处理的servlet: 2,非特定的恶意非法请求,web.xml的error-page元素可以接受tomcat返回的错误代码,并 ...
- Swagger - 前后端分离后的契约
前后端分离 按照现在的趋势,前后端分离几乎已经是业界对开发和部署方式所达成的一种共识.所谓的前后端分离,并不是传统行业中的按部门划分,一部分人只做前端(HTML/CSS/JavaScript等等),另 ...
- [深入浅出WP8.1(Runtime)]Windows Phone 8.1和Silverlight 8.1的区别
1.2.2 Windows Phone 8.1应用程序模型 Windows Phone 8.1支持多种开发语言来开发应用程序,包括C#.VB.JavaScript和C++,那么本书的代码主要是采用C# ...
- C#中UnixTime和DateTime的转换(转载)
由于在API请求中返回回来的时间格式为UNIX形式,需要转换成正常的显示方式,在网上找到了这么一个例子. 使用是在C#中使用的,所以WP8开发应该也可以. 转载源地址:http://blog.linu ...
- 在Oracle SQLplus下建用户 建表
在建表之前最好新建一个用户,因为在sys用户下的表格不允许删除列, 所以最好不要在sys用户下建表. 一.在Oracle SQLplus下建用户: 1.以dba身份登陆SQLplus: [oracle ...
- 二进制mysql5.7.16下载地址
下载地址:http://mirrors.sohu.com/mysql/MySQL-5.7/mysql-5.7.16-linux-glibc2.5-x86_64.tar.gz 2. 解压 tar xx ...
- PowerGUI错误-Microsoft SharePoint is not supported with version 4 of the Microsoft .Net Runtime
PowerGUI是个写powershell的神器,相比于PowerShell ISE,它那断点和按步追踪的能力不知让多少脚本狂们神魂颠倒.. 今天我也下载了一个放到测试环境里打算玩玩,结果出师不利,一 ...