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& ...
随机推荐
- Linux学习笔记(4)-远程登录
根据网上的那些说法,如Linux服务器假设在外地(新疆),和程序员工作的环境(北京)相距太远,那么每次出问题都要出差跑到现场去调试的话,那就太烦人了. 所以,人们开发出了一种远程登录的手段,可以让程序 ...
- spring-表达式语言-SpEL【转】
Spring表达式语言(Spring Expression Language)简称:SpEL 课程概要: Spring表达式语言的入门介绍 Spring表达式语言的操作范围 Spring表达式语言的运 ...
- 2016 Multi-University Training Contest 1 C.Game
Game Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Submis ...
- 如何使用ArcGIS Online的地图数据作为底图
1.添加数据-GIS服务器 2.选择添加ArcGIS Server 3.使用GIS服务,下一步 4.输入url为http://cache1.arcgisonline.cn/ArcGIS/service ...
- 【资源】NOIP2013测试数据senior/junior 普及/提高 数据
https://yunpan.cn/cRSepfcG4XX3V 访问密码 48e1 NOIP2013测试数据senior/junior 普及/提高 数据都在了
- AngularJS 30分钟快速入门【译】
引用自:http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/,翻译如下: 简介 我三年前开始使用 ...
- Wordpress 所有hoor列表
d 在插件加载的时候执行 wp_footer 加载页面底部时执行 admin_menu 加载管理员菜单时执行 wp_head 在body标签的开始添加html内容 after_setup_theme ...
- Ubuntu14.04安装Ubuntu Tweak
第一步:添加tweak源 sudo add-apt-repository ppa:tualatrix/ppa 第二步:更新 sudo apt-get update 第三步:安装ubuntu-tweak ...
- *HDU1969 二分
Pie Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...
- SQl中的char,varcher,nvarchar,txt
CHAR char是定长的,在字段建立时,空间就固定了,不管是否插入值(NULL也包含在内),都占用字符的空间.例如: char(8),输入字符小于8,后面补空值.输入字符大于8时,会截取.CH ...