绝对定位 | 易学教程

这可能是史上最全的CSS自适应布局总结教程

阅读更多关于这可能是史上最全的CSS自适应布局总结教程

标题严格遵守了新广告法，你再不爽，我也没犯法呀！话不多说，直入正题。所谓布局，其实包含两个含义：尺寸与定位。也就是说，所有与尺寸和定位相关的属性，都可以用来布局。大体上，布局中会用到的有：尺寸相关的盒子模型，普通流、浮动、绝对定位三种定位机制，CSS3中的transform、弹性盒子模块、试验中的grid模块。逛园子的时候经常可以看到浮动布局，inline-block布局，弹性盒布局这几个名词。现在对布局也算有一点了解，做个总结巩固一下。如果你也看了很多资料，但是实际动手时对布局还是无从下手的话，希望本文可以帮你理清思路。唠叨一句：看到一个效果图的时候，千万不要急着手贱去敲代码！先思考清楚页面的构造，理清各元素之间的关系，特别需要注意的是在不同的设备下需要有怎样的展现，当你思路清晰找到最好的布局方案时，coding其实真的不需要多少时间。尺寸相关为什么要先说尺寸呢？因为尺寸在布局中的作用非常核心，布局方式定位这些只是改变了元素之间的关系，没有尺寸就什么也不是。比如我们通常会用margin来控制跟其他元素的距离，这就是布局。很多人都会觉得，什么width、margin太简单了，早就掌握了。这种心态我一开始学习CSS的时候也有，觉得很好理解很简单，但是后面才发现自己原来很多东西都没真正掌握。看看张鑫旭大神给我们上的政治课： http://www.zhangxinxu.com

浏览器兼容性问题

阅读更多关于浏览器兼容性问题

CSS兼容技巧 1: FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会. 可用important解决　　2: 居中问题. 　　 1).垂直居中.将 line-height 设置为当前 div 相同的高度, 再通过vertical-align: middle.( 注意内容不要换行.) 　　 2).水平居中. margin: 0 auto;(当然不是万能) 　　3: 若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签) 　　4: FF 和 IE 对 BOX 理解的差异导致相差 2px,还有设为 float的div在ie下 margin加倍等问题. 　　5: ul 标签在 FF 下面默认有list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表) 　　6: 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应. 　　7: 关于手形光标. cursor: pointer. 而hand 只适用于 IE. 8: 针对firefox ie6 ie7的css样式 1:现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，　　2:但是ie7对

为什么img绝对定位了，从文档浏删除，那为什么两个图片没有覆盖？

阅读更多关于为什么img绝对定位了，从文档浏删除，那为什么两个图片没有覆盖？

因为img绝对p相对，p的盒子大小已经设定了，如果没设定，p的盒子大小就是内容撑起。那为什么相对定位删了（删后效果：所有位置都没变只有文字分别被两个图片覆盖），绝对定位的图片还和p有绝对定位一样，位置没变：因为绝对定位没设数值且前面有块元素挡着。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> img{ position: absolute; } p{ word-wrap: break-word; position: relative; width: 427px; height: 416px; } </style> </head> <body> <div> <img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" alt=""> <p

css布局两端固定中间自适应

阅读更多关于 css布局两端固定中间自适应

第一种：采用浮动 1.1首先来看一下网上一个哥们给的代码　　 <body> <div class="left">左</div> <div class="right">右</div> <div class="center">中</div> </body> 　　 div{ height: 200px; } .left{ float: left; background: #bfa; width: 200px; } .right{ float:right; width: 200px; background: #baf; } .center{ width: 100%; margin: 0 200px; margin-right: 100px; background: #bdf; } 效果图如下：哎！乍一看，好像真的可以，可是当你把右侧的盒子和左侧的盒子删除后你将看到如下画面也就是说左侧确实空出了空间，可是右侧的实际情况只是：右盒子覆盖在了中间盒子上面，中间盒子的大小是中间的蓝色加上右侧的紫色部分对于这个现象我找到了一篇文章： https://blog.csdn.net/u011043843/article/details/28881557 即：margin-right其实有效果的，只是在默认即标准流的情况的下显示不出来效果。这样就会导致一个问题：虽然文字在中间的盒子中不会受到影响

CSS相对定位与绝对定位详解

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

相对定位和绝对定位，不改变元素的大小形状，只改变元素的位置。相对定位和绝对定位是通过position属性来控制的，position属性的值为下面几种：值描述 absolute 使元素绝对定位，相对于static定位以外的最近的一个祖先元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 relative 使元素相对定位，相对于自己的正常位置进行定位。 fixed 使元素绝对定位，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 inherit 规定应该从父元素继承 position 属性的值。　　注：对于html的标准流(文档流)和浏览器怎么渲染各个DOM元素等底层知识，我不怎么清楚，下面的理解方式不一定正确，仅供参考。相对定位： position: relative 　　　　该元素仍会呆在原来的位置，只不过通过top left等以其初始位置未起点移动。　　无论是否位移，相对定位的元素仍会在文档流中占用初始的空间。因此这样平移元素会导致它遮挡其他元素。　　相对定位总结：

前端整理——css部分

阅读更多关于前端整理——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、绝对定位实现水平垂直居中： <span style="color:#000000"><span style="color:#000000"><code>position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;</code></span></span> 注意： 1>对父元素要使用 position: relative; 对子元素要使用 position:

JAVA WEB2(CSS)

阅读更多关于 JAVA WEB2(CSS)

什么是CSS ？答： CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一 CSS如何创建？答：如何插入样式表当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部：浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子： hr {color: sienna;} p {margin-left: 20px;} body {background-image: url(“images/back40.gif”);} 不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它仅在 IE

CSS定位元素--定位

阅读更多关于 CSS定位元素--定位

CSS 布局的核心是 position 属性，对元素盒子应用这个属性，可以相对于它在常规文档流中的位置重新定位。 position 属性有 4 个值： static、relative、absolute、fixed，默认值为 static。静态定位 static，默认展示的文档流就是相对定位 relative，相对的是它原来在文档流中的位置（或者默认位置）。接下来，可以使用 top、 right、bottom 和 left 属性来改变它的位置了。但多数情况下，只用 top 和 left 就可以实现我们想要的效果。绝对定位 absolute，绝对定位跟静态定位和相对定位比，绝对不一样。因为绝对定位会把元素彻底从文档流中拿出来。可以看到元素之前占据的空间被“回收了”。这说明，绝对定位的元素完全脱离了常规文档流，它现在是相对于顶级元素 body 在定位。而这自然而然就引出了一个关于定位的重要概念：定位上下文。固定定位 fixed，从完全移出文档流的角度说，固定定位与绝对定位类似。 --但不同之处在于，固定定位元素的定位上下文是视口（浏览器窗口或手持设备的屏幕），因此它不会随页面滚动而移动。 --就是说固定定位是展示在窗口的固定位置，不随下拉而上移或下动。固定定位并不常用，最常见的情况是用它创建不随页面滚动而移动的导航元素。 --定位上下文 --绝对定位元素默认的定位上下文是

深入理解CSS中的层叠上下文和层叠顺序

阅读更多关于深入理解CSS中的层叠上下文和层叠顺序

深入理解CSS中的层叠上下文和层叠顺序上下文前端大全 · 2016-01-20 20:12 (点击上方公众号，可快速关注) 作者：张鑫旭网址：http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零、世间的道理都是想通的在这个世界上，凡事都有个先后顺序，凡物都有个论资排辈。比方说食堂排队打饭，对吧，讲求先到先得，总不可能一拥而上。再比如说话语权，老婆的话永远是对的，领导的话永远是对的。在CSS届，也是如此。只是，一般情况下，大家歌舞升平，看不出什么差异，即所谓的众生平等。但是，当发生冲突发生纠葛的时候，显然，是不可能做到完全等同的，先后顺序，身份差异就显现出来了。例如，杰克和罗斯，只能一人浮在木板上，此时，出现了冲突，结果大家都知道的。那对于CSS世界中的元素而言，所谓的“冲突”指什么呢，其中，很重要的一个层面就是“层叠显示冲突”。默认情况下，网页内容是没有偏移角的垂直视觉呈现，当内容发生层叠的时候，一定会有一个前后的层叠顺序产生，有点类似于真实世界中论资排辈的感觉。而要理解网页中元素是如何“论资排辈”的，就需要深入理解CSS中的层叠上下文和层叠顺序。我们大家可能都熟悉CSS中的z-index属性，需要跟大家讲的是，z

css实现水平、垂直居中的几种方法

阅读更多关于 css实现水平、垂直居中的几种方法

用text-align: center来实现水平居中（只能实现文本的水平居中） //html <div class="center"> 文本水平居中 </div> //css .center{width: 200px;height: 100px;background-color: #a036b4; text-align: center; /*水平居中*/ } 2.用margin：auto实现块级元素的水平居中 <div class="center"> <div class="child_div"></div> </div> .center{width: 200px;height: 100px;background-color: #a036b4; } .child_div{width: 50px;height: 50px;background-color: blue;margin: 0 auto;/*水平居中*/} 3.使用浮动float来实现水平居中，用float：left；left:50%;同时margin-left:自身宽度的一半； <div class="center"> <div class="child_div"></div> </div> .center{width: 200px;height: 100px;background-color: #a036b4

订阅绝对定位