绝对定位 | 易学教程

CSS的水平居中和垂直居中方式

阅读更多关于 CSS的水平居中和垂直居中方式

水平居中 1.行内元素或行内块元素水平居中，即给其父元素添加text-align：center 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 * { 10 padding: 0; 11 margin: 0; 12 } 13 14 .wrapper { 15 height: 400px; 16 background-color: pink; 17 text-align: center; 18 } 19 </style> 20 </head> 21 22 <body> 23 24 <div class="wrapper"> 25 <span class="center">text-align：center</span> 26 </div> 27 28 </body> 29 30 </html> 2.块级元素水平居中可以用margin：0 auto 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta

css 定位属性

阅读更多关于 css 定位属性

CSS有三种基本定位属性： 1、普通流：上下排列布局 2、浮动流：左右排列布局 3、定位流：叠加排列布局定义和用法： **position：检索或设置对象的定位方式** 它定义了元素布局的所有机制。属性值： **1、static1**：默认值，没有定位，可用于取消之前的定位属性 **2、relative:**相对定位，如果没有定偏移属性，对元素本身是没有任何影响的，也不会使元素脱离文档流，并且它的空间是被保留的，也不会影响其他的元素布局。通过left、top、right、bottom、规定元素所在位置 **3、absolute：**绝对定位，使元素完全脱离了文档流，并且也使得内联元素支持宽高，也使得元素根据内容来决定宽高。 **4、inherited：**从父级元素来显示position的属性。注：如果有定位祖先元素相对定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移案例1：相对定位 <style type="text/css"> .top { width : 300px ; height : 300px ; background : #f0f ; margin : 50px auto ; } .lfet { position : relative ; left : -20px ; } .right { positoin : relative ; left :

纯CSS实现带返回顶部右侧悬浮菜单

阅读更多关于纯CSS实现带返回顶部右侧悬浮菜单

这是我做个人网页的时候加上的带返回顶部右侧悬浮菜单效果，如下图，使用工具是Hbuilder。代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1662617_jrv9w59at58.css"/> <style type="text/css"> /*返回顶部*/ .return-top{ font-family:"微软雅黑" ; height: 350px; width: 100px; padding: 10px 0 0 30px; right: 0; bottom: 30%; margin: auto; position: fixed; background: #FFFFFF; box-shadow: 0 4px 12px 0 rgba(7,17,27,.1); } .return-top>ul>li{ list-style-type: none; padding-bottom: 30px; } .return-top .one{ width: 100px; position: absolute; left: -50px; text-align:

CSS定位总结

阅读更多关于 CSS定位总结

定位(position) 1. static: 在标准流中，就算设置left,right,top,bottom也没有效果 2. relative 相对自己原来的位置移动 left:20px 自己左边距离20px，元素占据空间不变，周围的static元素不受影响。应用：把图片一直居中展示：先把装图片的div（.box）设置为overflow：hidden 然后：.box img{ positiion:relative; left:-960px;(图片的一半宽度) /*图片向左移动img的一半*/ (或者transform:translate(-50%)) margin-left:50%; /*向右移动父元素（.box）的一半*/ } 3. fixed固定定位元素脱离normal flow 可以通过left,right,top,bottom进行定位，定位参照对象是视口（viewPort）当画布滚动是，固定不动 4. absolute绝对定位元素脱离标准流可以通过left,right,top,bottom进行定位，定位参照对象是最邻近的定位祖先元素，如果找不到这样的祖先元素，参照对象是视口定位元素：position的值不为staticd的元素即position的值为relative,absolute,fixed的元素 4.1 子绝父相如果希望子元素相对于父元素进行定位

CSS Sprites

阅读更多关于 CSS Sprites

在css开发中有一件非常令人头疼的东西：拼背景图片。比如一个项目中有三种按钮：button-normal, button-submit, button-cancel。一般的方式是个人手动在PSD中新建一个较大的画布，把三个按钮分别移到该画布上，最后通过background-position定位。这个过程中有两步是比较耗时且不合理的： 1.在css中对需要的图标进行定位，尤其是集成度非常高的图片，一张图片中可能有数十个图标，而且图标之间的位置并没有绝对正确的规律，没有像素眼去调整位置是很消磨耐心的工作； 2.每一次有新的图标需要更新，都要注意不能移动以前图片的已有位置，然后再把新的图片添加进去，接着去为background-position定位。但是出于对性能的追求，这件事情有时候还不得不做。事实上，在 CSS 和 JavaScript 文件的处理上也有类似的情况，目前已经有很好的解决办法，当人们厌倦了一直重复某件事情的时候，最终总会殊途同归：自动化。以Grunt举例，我想把scripts中所有的js文件合并并成app.min.js，grunt配置核心代码如下： // Merge javascript files. concat: js: { src: '/scripts/**/*.js', dest: '/scripts/temp/app.js' } }, // Minifire

前端整理——css部分

阅读更多关于前端整理——css部分

（1）盒模型（普通盒模型、怪异盒模型） 1、元素的content（内容）、padding(内边距)、border（边框）、margin（外边距）构成了CSS盒模型 2、IE盒模型和W3C盒模型 1）IE盒模型是怪异模式下的盒模型，W3C盒模型是标准模式下的盒模型； 2）IE盒模型的width/height包含了content的width/heigh+padding+border W3C盒模型的width/height只是content的width/height 3、CSS3中的box-sizing 不同的人有不同的习惯，在css3中增加了box-sizing：content-box（遵循W3C盒模型）| border-box（遵循ie盒模型）|inherit（该属性的值从父元素继承）（2）如何让元素水平居中 1、绝对定位实现水平垂直居中： position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; 注意： 1>对父元素要使用 position: relative; 对子元素要使用 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; 缺一不可。 2>如果只要垂直居中，可以不写right: 0；left: 0;

开始做界面了

阅读更多关于开始做界面了

现在发现我熟悉的很多都不流行了也。看了Baidu和博客园的许多页面，都是采用div（层）来操作的，已经不是用表格定位了。博客园更是大胆的用层进行绝对定位了。还发现了完全的样式内容分离。给我震撼最深刻的是原来样式表都已经发生了这样多的变化了。这个图是3c协会制定的标准。而xsl是对xml进行样式控制的工具。我觉得现在好落后了哦～要找时间研究哈xml。我觉得做技术工作很好，因为总会有技术的更新，不用怕会一辈子重复～来源： https://www.cnblogs.com/xxpyeippx/archive/2006/02/22/335429.html

总结绝对定位和相对定位

阅读更多关于总结绝对定位和相对定位

定位分为4种： 1：static元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 (2)absolute元素框偏移某个距离。 http://www.w3cfuns.com/thread-258-1-1.html 　　无父级：参照浏览器左上角　　有父级：父级无position，参照浏览器左上角　　　　　　父级有position，参照父级左上角 (3)relative元素框从文档流完全删除，并相对于其包含块定位。　　无父级：参照自身原来在文档流中位置的左上角　　有父级：父级无position，参照自身原来在文档流中位置的左上角　　　　　　父级有position：有padding，参照padding 　　　　　　　　　　　　　　无padding，参照自身原来在文档流中位置的左上角 (4)fixed元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。　　始终不动总结：如果用定位来布局来定位页面，父级元素的Position 的属性必须设置为relative,而位于父级内部的某个元素最好用absolute,因为他不会受父级元素padding的影响，当然你也可以用relative，但不要忘记计算padd的值来源： https://www.cnblogs.com

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

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

（二）页面展示各位朋友大家好，我们接着上文继续开发，这一节我们主要是把上一节最后的图片素材从新组合，用 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”

绝对定位与相对定位

阅读更多关于绝对定位与相对定位

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

订阅绝对定位