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

时间: 2024-10-11 03:39:54

Css定位之relative_慕课网课程笔记的相关文章

网站优化之-SEO在网页制作中的应用(信息来自慕课网课程笔记)

一.SEO基本介绍. 1.搜索引擎工作原理. 2.seo简介:SEarch Engine Optimization,搜索引擎优化.为了提升网页在搜索引擎自然搜索结果中的收录数量及排序位置而做的优化行为,就是为了使百度.谷歌这些搜索引擎多多收录我们精心制作的网页,同时在网页搜索相关内容时,使网页链接排在搜索引擎店面. 分为以下两种: 1):白帽SEO:起到规范,改良网站设计的作用,使之对搜索引擎和用户更加友好,并且网站也能从搜索引擎中获得合理流量,这是搜索引擎鼓励和支持的. 2):黑帽SEO:利用

Node.js爬虫-爬取慕课网课程信息

第一次学习Node.js爬虫,所以这时一个简单的爬虫,Node.js的好处就是可以并发的执行 这个爬虫主要就是获取慕课网的课程信息,并把获得的信息存储到一个文件中,其中要用到cheerio库,它可以让我们方便的操作HTML,就像是用jQ一样 开始前,记得 npm install cheerio 为了能够并发的进行爬取,用到了Promise对象 //接受一个url爬取整个网页,返回一个Promise对象 function getPageAsync(url){ return new Promise(

慕课网课程学习--JS事件探秘

事件流 事件冒泡(IE):事件最先被最具体的元素(文档中嵌套层次最深的节点)接受,然后逐级向上传播至最不具体的节点(.. -> body ->html -> document): 事件捕获(网景):不具体的节点更早接收到事件,最具体的节点最后接收到事件,和事件冒泡相反. 事件处理程序 1.HTML事件处理程序 原理:把事件直接在HTML结构中的HTML元素上. 方法一. <input type="button" value="click" o

慕课网学习笔记02

如何利用CSS进行网页布局 内容来自慕课网 浮动(float)和 绝对定位(position:absolute)可以让元素脱离文档流. 清除浮动可以理解为打破横向排列. 清除浮动的关键字是clear,官方定义如下: 语法: clear : none | left | right | both 取值: none : 默认值.允许两边都可以有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 both : 不允许有浮动对象 CSS浮动及清除浮动通俗讲解 网页布局基础

JavaScript入门--慕课网学习笔记

 JAVASCRIPT-(慕课网)入门篇 我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码.注意, <script>标签要成对出现,并把JavaScript代码写在<script></script>之间. <script type="text/javascript">表示在<script></script>之间的是文本类型(text),ja

JavaScript进阶--慕课网学习笔记

                     JAVASCRIPT-进阶篇 给变量取个名字(变量命名) 变量名字可以任意取,只不过取名字要遵循一些规则: 1.必须以字母.下划线或美元符号开头,后面可以跟字母.下划线.美元符号和数字.如下: 正确: mysum _mychar $numa1 错误: 6num  //开头不能用数字 %sum //开头不能用除(_ $)外特殊符号,如(%  + /等) sum+num //开头中间不能使用除(_ $)外特殊符号,如(%  + /等) 2.变量名区分大小写,

vagrant 慕课网 学习笔记

搭建一个环境,不需要重复配置,直接利用vagrant复制就可以了 vagrant 和 virtualbox 的版本必须匹配, 不匹配的话可能会出很多未知的错误 搭配问题可以去官网查看 所有源码在 githup.com/apanly/mooc 如果不能FQ 就请访问 git.oschina.net/apanly/mooc 安装git sudo apt-get install git http://www.imooc.com/video/14218 3-5 vagrant ThinkPHP5运行环境

慕课网 Ajax笔记

Ajax技术实现: 运用HTML和CSS来实现页面,表达信息: 运用XMLHttpRequest和web服务器进行数据的异步交换: 运用JavaScript操作DOM,实现动态局部刷新: 同步:就是用户填写完信息之后,全部提交给服务器,等待服务器的回应,是一次性全部的. 异步:当用户填写完一条信息之后,这条信息会自动向服务器提交,然后服务器响应客户端,在此过程中,用户依然在填写表格的信息,即向服务器请求多次,节省了用户的时间,提高了用户的体验. HTTP http是计算机通过网络进行通信的规则.

慕课网 jQuery 笔记

$("div").html()是使用标签选择器获取div标签,对应于javascript中的各类选择器 $("*") --所有元素 $("#lastname") --id="lastname" 的元素 $(".intro") --所有 class="intro" 的元素 $("p") --所有 <p> 元素 $(".intro.demo"