绝对定位

CSS2.0 HandBook上的解释： 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。 要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。 TRBL属性（TOP、RIGHT、BOTTOM、LEFT）只有当设定了position属性才有效。 当设定position:absolute 如果父级（无限）没有设定position属性，那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位 如果父级（无限）设定position属性，那么当前的absolute则结合TRBL属性以父级（最近）的左上角为原始点进行定位。 当设定position: relative 则 参照父级（最近）的内容区的左上角为原始点结合TRBL属性进行定位（或者说相对于被定位元素在父级内容区中的上一个元素进行偏移）

CSS布局：居中的多种实现方式 1. 把margin设为auto 具体来说就是把要居中的元素的margin-left和margin-right都设为auto，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。 2、使用 text-align:center 这个没什么好说的，只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE6、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的。 3、使用line-height让单行的文字垂直居中 把文字的line-height设为文字父容器的高度，适用于只有一行文字的情况。 4、使用表格 如果你使用的是表格的话，那完全不用为各种居中问题而烦恼了，只要用到 td(也可能会用到 th)元素的 align=”center” 以及 valign=”middle” 这两个属性就可以完美的处理它里面内容的水平和垂直居中问题了,而且表格默认的就会对它里面的内容进行垂直居中。如果想在css中控制表格内容的居中，垂直居中可以使用 vertical-align:middle，至于水平居中，貌似css中是没有相对应的属性的,但是在IE6、7中我们可以使用text-align:center来对表格里的元素进行水平居中，IE8+以及谷歌、火狐等浏览器的text-align

关于居中的问题，一直处于疑惑不解的状态，知道的几种方法好像也不是每一次都会起到作用，所以更加迷惑。主要是不清楚该 在什么情况下采用哪种解决方法，所以，整理了一些方法，梳理一下思路，做一个总结。 1. line-height使单行文本垂直居中 对于单行文本，可以设置它的行高等于它父容器的高度，这样就实现了该文本的垂直居中，但是此方法只适用于单行文本。 （其实严格意义上来说，文字并不是绝对的垂直居中的，有那么很小的几像素差距，只是我们看上去它是居中的；这里的原因，就是文本的基线对齐的因素了，感兴趣的朋友可以再深入地去了解一下，这里我就不展开了）平时这样用就可以了。 对于多行文本，设置line-height就无法实现了，在这里有一个方法比较好。 还记得刚学习html的时候，大家应该都记得表格table吧，在每一个单元格里，如果我们想要让里边的文本垂直居中的话，用到的属性是 vertical-align：middle；所以在多行文本的情况下，就可以用的这个属性。 前提条件是，我们需要给文本再加一层标签，这里在 box3 中，我用 span 标签把文字包了起来。 给 span 的父级元素 div.box3 设置 display:table；给 span 设置display:table-cell;vertical-align:middle; 就可以了。 这里我没有考虑IE低版本兼容性问题

工作中遇到垂直居中问题，特此总结了一下几种方式与大家分享。本文讨论的垂直居中仅支持IE8+ 　1、使用绝对定位垂直居中 HTML <div class="container"> <div class="absolute_center"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias aspernatur dolor dolorem dolores earum eos error harum iusto molestiae perspiciatis possimus quisquam quo, rem rerum sit ullam velit voluptates. </div> </div> CSS .container{ position: relative; width: 800px; height: 800px; border: 1px solid #000000; } .absolute_center{ position:absolute; width:200px; height:200px; top:0; bottom:0; left:0; right:0; margin:auto; background:#518fca; resize:both;/

本文讨论的垂直居中仅支持IE8+ 　　1、使用绝对定位垂直居中 　　绝对对位原理：元素在过度受限情况下，将margin设置为auto，浏览器会重算margin的值，过度受限指的是同时设置top/bottom与height或者left/right与width。 　 <div class="container"> 　　 <div class="center absolute_center"> 　　 生活不能等待别人来安排，要自已去争取和奋斗；<br> 　　 而不论其结果是喜是悲，但可以慰藉的是，你总不枉在这世界上活了一场。<br> 　　 有了这样的认识，你就会珍重生活，而不会玩世不恭；同时，也会给人自身注入一种强大的内在力量。 　　 </div> </div> 　.absolute_center{ 　　 position:absolute; 　　 width:200px; 　　 height:200px; 　　 top:0; 　　 bottom:0; 　　 left:0; 　　 right:0; 　　 margin:auto; 　　 background:#518fca; 　　 resize:both;/*用于设置了所有除overflow为visible的元素*/ 　　 overflow:auto; 　 } 　　使用绝对定位要求元素必须设置明确高度

1、使用绝对定位垂直居中 　　绝对对位原理：元素在过度受限情况下，将margin设置为auto，浏览器会重算margin的值，过度受限指的是同时设置top/bottom与height或者left/right与width。 .absolute_center{ /*display:none;*/ position:absolute; width:200px; height:200px; top:0; bottom:0; left:0; right:0; margin:auto; background:#518fca; resize:both;/*用于设置了所有除overflow为visible的元素*/ overflow:auto; } 　　使用绝对定位要求元素必须设置明确高度。内容超过元素高度时需要设置overflow决定滚动条的出现 　　优点：支持响应式，只有这种方法在resize之后仍然垂直居中 　　缺点：没有显式设置overflow时，内容超过元素高度时会溢出，没有滚动条 　　 　　2、负marginTop方式 　　已知元素高度后，使用绝对定位将top设置为50%，mergin-top设置为内容高度的一半(height + padding) / 2；内容超过元素高度时需要设置overflow决定滚动条的出现 　　原理：top：50%元素上边界位于包含框中点

1.文本的水平垂直居中 line-height + text-align:center 1 <div class='wrap'> 2 水平垂直居中水平垂直居中 3 </div> 1 html,body{ 2 margin: 0; 3 } 4 .wrap{ 5 line-height: 400px; 6 text-align:center; 7 8 height: 400px; 9 font-size: 36px; 10 background-color: #ccc; 11 } 2.利用盒模型的水平垂直居中 我们一般讲的盒模型都是说的块级盒的盒模型，也只有块级盒的盒模型用得多一点，块级盒block-level box又是分别由content-box、padding-box、border-box、margin-box组成的，如下图： 用css3的calc()动态计算: 1 <div class="wrap"> 2 <div class="content"></div> 3 </div> 1 .wrap{ 2 margin-top: 20px; 3 margin-left: auto; 4 margin-right: auto; 5 width: 400px; 6 height: 400px; 7 background-color: #ccc; 8 .content{ 9 padding

使用DIV+CSS对网页进行标准化布局前，除了要掌握盒子模型，还要掌握定位和浮动两个比较重要的概念，它们可以控制在页面上排列和显示元素的方式。一个盒子是装内容的区块，如果多个盒子组合在一起使用，再通过定位和浮动的设置，就可以对整个页面进行布局。如图1所示为由多个盒子布局的页面，每个虚线框代表一个盒子模型。 图1 多个盒子定义页面布局 虽然CSS的样式属性非常多，但实际参与页面布局的属性其实很少。CSS的定位属性应用得非常广泛，可以控制元素的平面或空间位置，以及高度、宽度和可见性。也可以使用CSS的display属性改变生成区块的类型，例如将display属性设置为none，则这个区块框及其所有内容就不再显示。通过将display属性设置为block，可以让行内元素表现得像块级元素一样。常见的参与页面布局的CSS属性如表1所示。 表1 常见的参与页面布局的CSS属性 在CSS中提供了相对和绝对两种定位方法。所谓相对定位是指让操作的元素在相对其他元素的位置上进行偏移，而绝对定位是指让操作的元素参照原始文档进行偏移。使用表2-2中部分定位属性的例句代码如下所示： 来源： https://www.cnblogs.com/itxdl/p/12008976.html

html和css w3c 规范 结构化标准语言 样式标准语言 行为标准语言 1） 盒模型 常见的盒模型有w3c盒模型（又名标准盒模型）box-sizing:content-box和IE盒模型（又名怪异盒模型）box-sizing:border-box。 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2）css3 新特性 常问： word-wrap 文字换行 text-overflow 超过指定容器的边界时如何显示 text-decoration 文字渲染 text-shadow文字阴影 gradient渐变效果 transition过渡效果 transition-duration：过渡的持续时间 transform拉伸，压缩，旋转，偏移等变换 animation动画 audio音频 vadio视频 RGBA和透明度 css3 边框 border-radius 圆角 box-shadow 盒子阴影 border-image 边框图片 css3 背景 background-image 背景图片 background-size 背景大小 background-origin 背景图像的位置区域 background-clip

原文： https://webdesign.tutsplus.co... 原作： Jase Smith 翻译： Stypstive 当你的用户需要漂亮的图标给出额外的文字信息时，亦或是当他们在点击了按钮之后需要确认自己没点错时，又或是带图片和字幕的复活节彩蛋，提示框是用来增强用户界面的绝佳手段。现在，让我们来做几个动画提示框，没有别的，只有HTML和CSS。 样例 这是我们之后要做的： http://jsfiddle.net/kcschaefe... 在我们沉浸在写代码的过程中之前，让我们先来看看我们的意图是什么。主要目的是为了获得一种简单的添加提示框的方法，这样一来，我们之后就能够通过增加一个自定义的 tooltip 属性来做到这一点。 <span tooltip="message">visible text or icon, etc.</span> 关于可访问性和功能的记注 如果你在寻找兼容508的提示框，或者需要带容器冲突侦测和/或HTML内容 vs 纯文本的智能提示框，有许多实用第三方脚本的解决方案能满足你的要求。 "用JavaScript来做完全可访问的交互组件是命令式的" - Sara Soueidan, 打造一个完全可访问的帮助提示框...比你想的要难 这篇教程不会特地解决可访问性的需求。你了解你的用户，知道他们需要什么，所以有关这方面，也要记得考虑他们的需求。