absolute | 易学教程

居中的最佳方法在垂直和水平页面上？ [重复]

阅读更多关于居中的最佳方法在垂直和水平页面上？ [重复]

这个问题已经在这里有了答案：如何水平和垂直居中放置元素（19个答案） 11个月前关闭。在页面上垂直和水平居中放置 <div> 元素的最佳方法？我知道 margin-left: auto; margin-right: auto; margin-left: auto; margin-right: auto; 会以水平为中心，但是垂直进行的最佳方法是什么？ #1楼这个解决方案对我有用 .middleDiv{ position : absolute; height : 90%; bottom: 5%; } （或高度：70％/底部：15％高度：40％/底部：30％...） #2楼最好，最灵活的方式我在dabblet.com上的演示该演示的主要技巧是元素的正常流动是从上到下，因此 margin-top: auto 设置为零。但是，绝对放置的元素在分配自由空间方面的作用相同，并且类似地可以在指定的 top 和 bottom 垂直居中（在IE7中不起作用）。此技巧适用于任何大小的 div 。 div { width: 100px; height: 100px; background-color: red; position: absolute; top:0; bottom: 0; left: 0; right: 0; margin: auto; } <div></div

堆叠上下文

阅读更多关于堆叠上下文

　　本文试着先解释一下堆叠顺序是什么，在引入堆叠上下文。　　MDN上这样解释堆叠上下文：　　层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。　　平时我们浏览网页时，可以理解为从网页的正视图方向观看，理解堆叠上下文时，我们试着从侧视图的方向理解。方方老师说CSS的一个很重要的学习方法就是实验法，本文试着将所有的结论都有实验的依据。（祝福我吧，希望可以不看回放。。。）　　首先，我们先思考一下，border和background的先后关系： <body> <div class="demo"></div> </body> <style> .demo{ width: 100px; height: 100px; border: 10px solid rgba(255,0,0,0.5); background: green; } </style> 　　效果图：　　　　可见，background < border；接着，我们在父元素里加一个div，观察一下border和子元素div的关系：　　 <body> <div class="parent"> <div class="child"></div> </div> </body> <style>

DIV常用属性大全

阅读更多关于 DIV常用属性大全

一、属性列表 color : #999999 文字颜色 font-family : 宋体文字字型 font-size : 10pt 文字大小 font-style:itelic 文字斜体育 font-variant:small-caps 小字体 letter-spacing : 1pt 文字间距 line-height : 200% 设定行高 font-weight:bold 文字粗体 vertical-align:sub 下标字 vertical-align:super 上标字 text-decoration:line-through 加?h除线 text-decoration:overline 加顶线 text-decoration:underline 加底线 text-decoration:none ?h除连接底线 text-transform : capitalize 首字大写 text-transform : uppercase 英文大写 text-transform : lowercase 英文写 text-align:right 文字*右对齐 text-align:left 文字*左对齐 text-align:center 文字置中对齐这些是一些简单的文字效果，可以应用到css的页面中。　背景 background-color:black 背景颜色

html+css学习笔记 4[定位]

阅读更多关于 html+css学习笔记 4[定位]

如何让图1中的div2移动到如图2上的位置；思路：哪些css命令能够影响盒子显示的位置呢？ relative相对定位/定位偏移量 position:relative; 相对定位 a、不影响元素本身的特性； b、不使元素脱离文档流； c、如果没有定位偏移量，对元素本身没有任何影响；定位元素位置控制 top/right/bottom/left 定位元素偏移量。 absolute绝对定位/定位层级 osition:absolute; 绝对定位 a、使元素完全脱离文档流； b、使内嵌支持宽高； c、块属性标签内容撑开宽度； d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移； e、相对定位一般都是配合绝对定位元素使用； z-index:[number]；定位层级 a、定位元素默认后者层级高于前者；待解决:脱离文本流貌似 margin0 auto失效原因是什么闭合浮动等等问题遮罩滤镜/固定定位遮罩弹窗（优酷弹窗）标准不透明度： opacity:0~1; IE 滤镜： filter:alpha(opacity=0~100); position:fixed；固定定位与绝对定位的特性基本一致，的差别是始终相对整个文档进行定位；问题：IE6不支持固定定位；定位其他值： position:static ；默认值 position:inherit

css3实现时钟效果

阅读更多关于 css3实现时钟效果

css3实现时钟效果 <div class="clock"> <div class="line line1"></div> <div class="line line2"></div> <div class="line line3"></div> <div class="line line4"></div> <div class="line line5"></div> <div class="line line6"></div> <div class="cover"></div> <div class="hour"></div> <div class="minute"></div> <div class="second"></div> <div class="center"></div> </div> * { padding : 0 ; margin : 0 ; } .clock { width : 300px ; height : 300px ; border : 10px solid #ccc ; /*border-radius: 160px;*/ /*百分比参照元素的实际宽高*/ border-radius : 50% ; margin : 100px auto ; position : relative ; } .line { width : 8px ; height :

[css]我要用css画幅画(四)

阅读更多关于 [css]我要用css画幅画(四)

接着之前的 [css]我要用css画幅画(二) ，今天，我画了一个小人，他的名字暂时叫作小明。以下只列出本次修改增加的内容 html如下： 1 <div class="human left-190 bottom-25"> 2 <p class="lines">大家好，我叫小明</p> 3 <div class="human-head-normal"></div> 4 <div class="human-body-normal"></div> 5 <div class="human-arms-normal"></div> 6 <div class="human-legs-normal"></div> 7 </div> human css如下： 1 .left-190 { 2 left: 190px; 3 } 4 5 .bottom-25 { 6 bottom: 25px; 7 } 8 9 .human { 10 height:170px; 11 width: 120px; 12 13 position: absolute; 14 } 15 16 .lines { 17 position: absolute; 18 top: -20px; 19 width: 220px; 20 display: block; 21 } 22 23 .human-head-normal { 24

纯CSS气泡框实现方法探究

阅读更多关于纯CSS气泡框实现方法探究

气泡框（或者提示框）是网页中一种很常见的元素，大多用来展示提示信息，如下图所示：拆分来看，形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头，要制作出这样的气泡框，如果解决了三角形小箭头就容易了。一种方法就是制作这样一个三角形箭头的图片，然后定位在矩形框上。但这种解决办法在后期更改气泡框会很不方便，可能每修改一次气泡框都要重新制作一个三角形小图标。如果我们能够直接用HTML和CSS代码实现这样一个三角形小箭头一切都迎刃而解了。首先我们来看一下border这个属性，当我们把一个div的border-color设为不同值的时候，可以看到四边都成了一个梯形。 1 # test{ width : 50px ; height : 50px ; border-width : 50px ; border-style : solid ; border-color : #09F #990 #933 #0C9 ;} 如果我们继续把这个div的width和height都设为0，可以看到四边都成了一个三角形。 1 # test{ width : 0 ; height : 0 ; border-width : 75px ; border-style : solid ; border-color : #09F #990 #933 #0C9 ;} 在主流浏览器中检测一下

用css3实现各种图标效果

阅读更多关于用css3实现各种图标效果

原文: 用css3实现各种图标效果公共样式应该说现在绝大多数公司的项目前端都是一团乱，不仅仅是js写的没有任何框架而言，css同样也是如此，导致项目如果要升级或者说有新的变更维护起来就特别困难。最近领导决定花大时间整理一下css样式，用他的一句话来说就是为后来者造福。首先我们在整理样式之前，必须得有一个自己团队的规范。思考真的很重要，所谓的磨刀不误砍柴工，事实上也就是说你在做任何事情之前都要把大致的流程，大致的思路想清楚之后再动手，否则就可能做到一半发现这样不对，然后前面的工夫全白费了，这样启不是。。。前面说了一堆费话，下面就简单点来介绍一下我整理的图标（全部用css来实现的）。 css没有继承、多态等，所以为了write less ,do more就不得不想尽各种方法（我们自己规定凡是公共的、组件级别的样式全部以u-开头）。我这里因为写所有标签的样式名都是以u-icon开头，所以写了如下样式，这样的话所有的以u-icon开头的全部都应用了如下三个样式，你想如果你有100个u-icon的样式那就省去了你300行代码呀！ [class^="u-icon"] { display: inline-block; color: #fff; vertical-align: middle; } 手机上的切换标签 css样式代码： /*手机上的切换标签*/ .u-icon

用css3实现各种图标效果（2）

阅读更多关于用css3实现各种图标效果（2）

原文: 用css3实现各种图标效果（2）写在前面写的一模一样的css样式，结果却导致原来出来不一样的效果图。用chrome的开发者工具查看，比较起来还是一模一样的css样式，可为什么会出现不一样的placeholder效果呢？一个白色粗体，一个灰色正常字体。找了老半天找不到原因后来才发现是我同事写的框架css里面代码的一句话影响到了 ::-webkit-input-placeholder { color: #a4afc6; } 可是为什么在chrome控制台看不到这句代码呢？请教了一番同事，原来是这样的。 1、点击控制台“设置”按钮 2、按如下所示设置，选中“Show user agent shadow DOM” 3、你就会在elements控制面板里面能看到如下所示回归正题，继续我的css各种图标。。。。当然在开始之前，还是加上如下这段公共样式吧！ [class^="u-icon"] { display: inline-block; color: #fff; vertical-align: middle; } 各种删除按钮（不用图标只能css来实现） html代码如下： <span class="u-icon-radioDelete"></span> <span class="u-icon-deleteToggle Orange"> <span class="u

How to set parent div's height as child div with position: absolute

阅读更多关于 How to set parent div's height as child div with position: absolute

问题 I have parent div which has no height, there is also nested another child div with position absolute inside it. Child div has 652px of height. But I cannot get the same height in parent div. I tried to play with clear: both, overflow. Here is the code: HTML <div class="content"> <div class="container"> some other elements whose height is 652px... </div> </div> CSS .content { position: relative; } .container { position: absolute; width: 100%; max-width: 1160px; margin: 0 auto; padding: 120px 0

订阅 absolute