CSS深入理解学习笔记之relative
1、relative和absolute的相煎关系
限制作用:①限制left/top/right/bottom定位;②限制z-index层级;③限制在overflow下的嚣张气焰。
relative和fixed限制作用:限制z-index层级。
2、relative和定位
特性:①相对自行进行定位;②无侵入,不影响其他元素布局。
top/bottom和left/right对立属性同时存在时的表现:top>bottom left>right
3、relative和层级
提高元素的层叠上下文。
新建层叠上下文与层级控制:relative元素的z-index是auto的时候,不会限制子元素的层叠。(IE8+)
4、relative的最小化影响原则
定义:尽量降低relative属性对其他元素或者布局的潜在影响。
原则:①尽量避免使用relative;②relative最小化,将需要absolute定位的元素放到一个空的relative元素中。
CSS深入理解学习笔记之relative的更多相关文章
- CSS深入理解学习笔记之absolute
1.absolute和float 拥有相同的特性表现: ①包裹性(容器应用之后,可以包裹里面的内容): <!doctype html> <html> <head> ...
- CSS深入理解学习笔记之float
1.float的历史 float设计的初衷仅仅是为了文字环绕效果. 示例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- CSS深入理解学习笔记之overflow
1.Overflow基本属性 overflow:visible(默认)/hidden/scroll/auto/inherit; visible:超出部分可见. hidden:超出部分隐藏. scrol ...
- CSS深入理解学习笔记之vertical-align
1.vertical-align基本认识 支持的属性值: ①线类:baseline(默认),top,middle,bottom ②文本类:text-top,text-bottom ③上标下标类:sub ...
- CSS深入理解学习笔记之margin
1.margin与容器尺寸 元素尺寸:①可视尺寸 clientWidth(标准):②占据尺寸 margin与可视尺寸:①适用于没有设定width/height的普通block元素:②只适用于水平方向尺 ...
- CSS深入理解学习笔记之line-height
1.line-height的定义 定义:两行文字基线之间的距离. 注:不同字体之间的基线是不同的. 2.line-height与行内框盒子模型 行内框盒子模型: ①内容区域(content area) ...
- CSS深入理解学习笔记之z-index
1.z-index基础 z-index含义:指定了元素及其子元素的"z顺序",而"z顺序"可以决定元素的覆盖顺序.z-index值越大越在上面. z-index ...
- CSS深入理解学习笔记之padding
1.padding与容器尺寸之间的关系 对于block水平元素:①padding值暴走,一定会影响尺寸:②width非auto,padding影响尺寸:③width为auto或box-sizing为b ...
- CSS深入理解学习笔记之border
1.border-width border-width为何不支持百分比:语义和使用场景决定的,现实中各种边框本身的概念就不存在百分比的使用方法. border-width支持关键字:thin.medi ...
随机推荐
- Javascript一句代码实现JS字符串去除重复字符
需求: 原字符串:abcdabecd 去重后字符串:abcde JS字符串去重,一个简单需求,网上找案例发现都是一大堆代码,对于强迫症的我 实再无法忍受,于是自己手动写出一段代码,完美解决该问题. 代 ...
- 【sunday算法】玄学字符串匹配
和KMP相似,用于字符串的匹配,貌似平均复杂度比KMP快,也比KMP更好理解. 大概意思是: 如果串b被串a包含,那么串a此时与串b匹配的部分一定一样 所以如果从开头开始匹配到不同处时,在a串找中此时 ...
- Oracle之 11gR2 RAC 修改监听器端口号的步骤
Oracle 11gR2 RAC 修改监听器端口号的步骤 说明:192.168.188.181 为public ip1192.168.188.182 为public ip2192.168.188.18 ...
- Updates were rejected because the remote contains work that you do(git报错解决方案)
Updates were rejected because the remote contains work that you do(git报错解决方案) 今天向GitHub远程仓库提交本地项目文件时 ...
- 使用 requirejs 打包 jQuery 插件 datetimepicker 的问题记录
网站之前用的时间选择 UI 实在太丑,而且功能单一,决定全站改用 https://github.com/xdan/datetimepicker/ 里面有好几个 js,奇怪的是,只有 /build 目录 ...
- MongoDB批量导入及简单的性能优化
今天简单分享一下MongoDB使用过程中的一些性能优化,其实并不只适用MongoDB,其他数据库多少也可适用. 首先先随机导入一千万条数据.这里我分段导入的,因为mongo的BsonDocument一 ...
- RabbitMQ的应用场景以及基本原理介绍
1.背景 RabbitMQ是一个由erlang开发的AMQP(Advanved Message Queue)的开源实现. 2.应用场景 2.1异步处理 场景说明:用户注册后,需要发注册邮件和注册短信, ...
- python函数定义
刚学用Python的时候,特别是看一些库的源码时,经常会看到func(*args, **kwargs)这样的函数定义,这个*和**让人有点费解.其实只要把函数参数定义搞清楚了,就不难理解了. 先说说函 ...
- Machine Learning - week 4 - 习题
1. 第一个.,是对的. 第二个.结果只会认出是一类,如图:.但这里是为了举例子,实际上不会恰好是 1.而是选择最大概率表示的类别.所以是错误的. 第三个:所有基于 0,1 的逻辑方程都可以使用神经网 ...
- CTF---密码学入门第一题 这里没有key
这里没有key分值:10 来源: 西普学院 难度:易 参与人数:5577人 Get Flag:1965人 答题人数:2074人 解题通过率:95% 你说没有就没有啊,俺为啥要听你的啊 解题链接: ht ...