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 ...
随机推荐
- Android-AnsyncTask异步任务
同步和异步的概念区别: 同步,必须执行完成某个问题后才能继续执行其他的. 异步,我会去先执行其他问题,你执行完之后返回给我一个结果就可以. android中为什么要引用异步任务呢 android启动的 ...
- Java学习笔记6(循环和数组练习题)
1.输出100到1000的水仙花数: public class LoopTest{ public static void main(String[] args){ int bai = 0; int s ...
- 【转载】MySQL之权限管理
一.MySQL权限简介 关于mysql的权限简单的理解就是mysql允许你做你全力以内的事情,不可以越界.比如只允许你执行select操作,那么你就不能执行update操作.只允许你从某台机器上连接m ...
- ARM非对齐操作异常解决过程
在测试MF固件时,发生一个非常诡异的异常,代码如下: CLR_DBG_Commands::Monitor_EraseMemory* cmd = (CLR_DBG_Commands::Monitor_E ...
- dataZoom 详细参数
dataZoom:[ //区域缩放 { id: 'dataZoomX', show:true, //是否显示 组件.如果设置为 false,不会显示,但是数据过滤的功能还存在. backgroundC ...
- springboot(十七):使用Spring Boot上传文件
上传文件是互联网中常常应用的场景之一,最典型的情况就是上传头像等,今天就带着带着大家做一个Spring Boot上传文件的小案例. 1.pom包配置 我们使用Spring Boot最新版本1.5.9. ...
- python2.7源码编译安装
最近学习docker容器,因为平时用的linux发型版都是centos6系列,所有pull了一个centos:6.6的景像,运行景像,进入容器后,发现其默认的python环境是2.6,为了更好的兼容我 ...
- 学习笔记 - 用js判断页面是否加载完成实现代码
用document.onreadystatechange的方法来监听状态改变, 然后用document.readyState == "complete"判断是否加载完成 docum ...
- Codeforces__Raising Bacteria
题目传送门:Raising Bacteria //问题描述:一个盒子里面放一个细菌在一天可以增生两个细菌. 现在已知盒子里面细菌的个数,问你最初放多少个细菌可以增生盒子里面的细菌数量 //输入:盒子中 ...
- css3 样式 圆角
第一次学习css3 现在总结一下,方便以后查看: 1.border-radius:25px; 这个用来增加圆角属性 2.CSS3边框阴影 在 CSS3 中,box-shadow 用于向方框添加阴影: ...