absolute | 易学教程

关于绝对定位和相对定位的理解（转自php100）

阅读更多关于关于绝对定位和相对定位的理解（转自php100）

本文和大家重点讨论一下DIV+CSS之绝对定位和相对定位，在用DIV+CSS控制排版过程中，定位一直被人认为是一个难点，这主要是表现为很多网友在没有深入理解清楚定位的原理时，排出来的杂乱网页常让他们不知所措。　　前言　　在用DIV+CSS控制排版过程中，定位一直被人认为是一个难点，这主要是表现为很多网友在没有深入理解清楚定位的原理时，排出来的杂乱网页常让他们不知所措，而另一边一些高手则常常借助定位的强大功能做出些很酷的效果来，比如CSS相册等等，因此自己杂乱的网页与高手完美的设计形成鲜明对比，这在一定程度上打击了初学定位的网友，也在他们心目中形成这样的一种思想：当我熟练地玩转DIV+CSS定位时，我就已是高手了。不管你怎么想，我只希望下面的教程能让你更深入地了解CSS定位属性。　　阅读建议　　先说说我这篇教程的思路，这对于你在正真开始阅教程前是有很大帮助的。我的思路是这样的：先给出定位较专业化精炼的解释，接下来再用打比如的方法形象地介绍它们，此时大家要和前面讲到的专业解释对比阅读。介绍完理论，将通过实例来介绍定位的各知识点，虽然实例不美，但每一则实例都是精心挑选的，如果要完整掌握DIV+CSS定位方法，请务必弄懂每一个实例的原理。最后将会带大家做一个较为酷的综合实例。如果你想提高你阅读本文的兴趣或者动力，你可以先跳到最后看综合实例的运行效果。　　1.定位的专业解释　　

absolute和relative定位简单示例&div在屏幕拖动

阅读更多关于 absolute和relative定位简单示例&div在屏幕拖动

<html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>absolute和relative定位示例</title> <script src="jquery-1.8.3.min.js"></script> <style type="text/css"> .divFather{ left: 200px; top: 200px; position: absolute;/* 绝对定位 */ height: 300px; width: 300px; background: #bfb0b0; display: flex;/* 设置为弹性布局 */ justify-content: space-around;/* 内容左右居中显示 */ align-items: center; /* 内容上下居中显示 */ z-index: 1； } .divSon{ position: relative;/* 绝对定位 */ height: 150px; width: 150px; background:

Position属性

阅读更多关于 Position属性

文档流一、什么是文档流？ “流”，我们在生活中经常听到这个词，比如水流，电流。就像水流从高处往低处流一样，我们可以把文档流想象成html元素在浏览器上“流动”。浏览器的顶端就是河流的源头，浏览器的底部就是河流的尽头。那么所谓的文档流（normal flow，也被称为“普通流”），指的是就是元素排版布局过程中，元素会自动从左往右，从上往下地遵守这种流式排列方式。当浏览器渲染html文档时，从顶部开始开始渲染，为元素分配所需要的空间，每一个块级元素单独占一行，行内元素则按照顺序被水平渲染直到在当前行遇到了边界，然后换到下一行的起点继续渲染。那么此时就不得不说一下块级元素和行内元素。二、块级元素与行内元素块级元素：顾名思义，这个元素是“一块”，那么作为一个块，它就应该有自己的宽度和高度。而且它比较霸道，每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外），一般作为容器使用，常见的块级元素有：from、select、 textarea、h1-h6 、table 、button 、hr 、p 、ol 、ul等。结合以上内容，块级元素拥有以下特点： 1.每个块级元素都是独自占一行。 2.元素的高度、宽度、行高和边距都是可以设置的。　　 3.元素的宽度如果不设置的话，默认为父元素的宽度。行内元素：显然，这种元素存在于一行内

网页播放器开发系列笔记(二)

阅读更多关于网页播放器开发系列笔记(二)

（二）页面展示各位朋友大家好，我们接着上文继续开发，这一节我们主要是把上一节最后的图片素材从新组合，用 web形式展现，我们用到的主要工具是：HBuilderX，这个工具我就不介绍了，上手很容易，很好用的，具体情况大家可以百度研究一下。 1.新建项目首先启动 HBuilderX开发工具，新建一个项目，具体操作“文件”→“新建”→“项目”如图2-1所示。图 2-1 新建项目在弹出的对话框中选择普通项目，项目名称填入 “网页播放器”，选择存储路径，选择空项目，单击创建即可，如图2-2所示。图 2-2 设置新项目 2.新建目录在左侧的项目管理窗口，项目上单击右键选择 “新建”→“目录”，CSS文件夹，用于存放样式文件，如图2-3所示新建目录。新建images目录，存放我们上节剪切的图片素材，记得把所有需要的图片素材全部拷贝到该目录下，拷贝十分简单，在文件中复制图片，在项目管理images目录点击右键，选择粘贴，这样所复制的图片就全部拷贝到该目录下了；新建JS目录，用于存放Javascript文件。图 2-3 新建目录 3.新建文件新建文件与新建目录大同小异，在项目上点击右键依次选择 “新建”→“html文件”，命名为“index.html”,用于编写HTML代码;在CSS目录上点击右键依次选择“新建”→“css文件”，命名为“playMusic.css”

html&css 机器猫的实现

阅读更多关于 html&css 机器猫的实现

新手小白写的机器猫，效果图如下： html代码： <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <meta http-equiv= "X-UA-Compatible" content= "ie=edge" > <title>哆啦A梦</title> <link rel= "stylesheet" href= "./css/demo.css" > </head> <body> <div class= "box" >  <header>  <div class= "face" >  <div class= "eye1" >  <div class= "eyeball" ></div> </div>  <div class= "eye2" >  <div class= "eyeball" ></div> </div>  <div class= "nose" > <div></div> </div> <

深入了解absolute

阅读更多关于深入了解absolute

1.absolute与float的相同的特性表现 a.包裹性 b.破坏性:父元素没有设置高或宽，父元素的高或宽取决于这个元素的内容 c.不能同时存在 2.absolute独立使用，不与relative合用 * 超越overflow，无论是滚动还是隐藏案例： html <div class="scroll"> <a href="javascript:;" class="close" title="关闭"></a> <img src="1.jpg"> <img src="2.jpg"> </div> css .scroll { width: 500px; height: 300px; margin: 200px auto 0; border: 1px solid #ccc; border-radius: 3px; box-shadow: 0 0 3px rgba(0,0,0,.35); background-color: #fff; overflow: auto; } .close { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 483px; background: url(images/close.png) no-repeat; } img { display: block; margin:

absolute强大的高级运用

阅读更多关于 absolute强大的高级运用

一、absolute超越overflow 父元素有overflow：hidden/overflow：auto并且不需要position：relative， position:absolute与margin结合就OK了。二、absolute无依赖性、跟随性的绝对定位。 1)、图片图标来覆盖 2)、如何定位下拉框 3)、对齐居中或边缘 4)、星号时有时无 5)、图文对齐兼容 6)、文字溢出三、absolute脱离文档流 z-index无依赖并且标准： 1)、如果只有一个绝对定位元素，自然不需要z-index。自动覆盖普通元素 2)、如果两个绝对定位，控制DOM流前后顺序达到需要的覆盖效果，一日无z-index 3)、如果多个绝对定位交错，非常非常少见，z-index：1控制 4)、如果非弹框类的绝对定位元素z-index>2，必定z-index冗余，请优化。四、absolute与width和height 1)、容器无需固定width/height值内部元素亦可拉伸 2)、容器拉伸，内部元素支持百分比width/height值五、absolute实现网页的整体布局你会发现：兼容性好，自适应强，扩展方便，性能优异，可以方便实现诸多效果，适合移动端，PC端同样精彩。来源： oschina 链接： https://my.oschina.net/u/2318153/blog

Python import中相对路径的问题

阅读更多关于 Python import中相对路径的问题

1. 从查到的资料来看，关于import路径的来说，分成3类： absolute import import xml import youpackage.xml from youpackage import xml 这几种都算绝对路径 relative import import xml 从这个语句上是看不出来import的是标准库的xml，还是你的包里的一个库叫xml。 explicit relative import from . import xml from .xml import some_thing from ..xml import some_thing 这些以点开头的import明确的表示了import的是相对路径，从而避免了普通relative import的麻烦。 2. 第二种（relative import）肯定是不推荐的。在python2.5以前，如果当前包中有一个叫xml的库，局部的这个xml就会shadow标准库的xml（和局部变量感觉类似，我犯过好几次这个错误，调试的时候还一定能反应过来）。在2.5和2.6，这个行为还是一样的，但是如果有以下这个语句，局部的包将不能覆盖全局的包 from __future__ import absolute_import 在2.7中，absolute_import的行为变成了默认行为，如果需要应用局部的包

定位 position: absolute & relative

阅读更多关于定位 position: absolute & relative

【position:absolute】意思是绝对定位，他默认参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，有以下属性： 1)如果没有TRBL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角,如果在没有父级元素的情况下，存在文本，则以它前面的最后一个文字的右上角为原点进行定位但是不断开文字，覆盖于上方。 2)如果设定TRBL，并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。 3)如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由TRBL决定。即使父级有Padding属性，对其也不起作用，说简单点就是：它只坚持一点，就以父级左上角为原点进行定位，父级的padding对其根本没有影响。以上三点可以总结出，若想把一个定位属性为absolute的元素定位于其父级元素内，只有满足两个条件，第一：设定TRBL 第二：父级设定Position属性上面的这个总结非常重要，可以保证你在用absolue布局页面的时候，不会错位，并且随着浏览器的大小或者显示器分辨率的大小，而不发生改变。只要有一点不满足，元素就会以浏览器左上角为原点，这就是初学者容易犯错的一点，已经定位好的板块

垂直居中的几种方式 + css文本框文字溢出显示省略号

阅读更多关于垂直居中的几种方式 + css文本框文字溢出显示省略号

1 对于最最基础的单行文本，要想实现垂直方向居中，很简单的方法就是让文本的行高等于父级元素的高度。这个仅适用于让当行文本垂直居中的情况，多行文本就不适用了。 father{ width:500px; height:500px } child{ line-height:500px; } 2 如果是图片的话，直接设置img的属性vertical-align: middle;前提是需要设置父级元素为块级元素并且设置高度。 3 用absolute绝对定位，分别父级元素和子元素的position为 HTML： <div class="out"> <div class="in"> 节点内容节点内容 </div> </div> .out {position: relative;} .in { position: absolute; top: 50%; left: 50%; height: 30%; width: 50%; margin: -15% 0 0 -25%; } 这个只适玉元素本身有规定的高度和宽度，但是实际应用中是要根据内容才能确定高度，所以就有了升级版 4 用absolute定位，并且可不限制高度。很简单，借助强大的CSS3中的translate() 变形函数。具体原理是translate() 属性值的百分比是元素本身的宽高为基准进行计算的

订阅 absolute