引子： 开始的时候我想先要解决一个问题，怎么设置一个div盒子撑满整个屏幕？ 看下面的html代码： 实现方法一： html, body,#father-body{ height:100%; width:100%; background-color:#123456; } 这里主要解释下%(百分号)在CSS中使用的问题。% 主要是在父级元素或者是祖先元素定义了固定的width 和height 的时候才可以使用（或者说使用的时候才会有效果）。 实现方法二： #father-body{ positi...
何为CSS Sprite 通常我们把它叫做CSS图像拼合技术,当然还有人把CSS Sprites叫做”CSS贴图定位”。 原理 CSS Sprites 原理：其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。 优点 利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页...
display 属性规定元素应该生成的框的类型。 这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。 浏览器支持: 所有主流浏览器都支持 display 属性。 注释：任何版本的 Internet Explorer （包括 IE8）都不支持 "inherit"、"inline-table"、"ru...
题外话 传统的开发我们是在编辑器操作代码保存,再到浏览器预览查看效果的; 而如今的firebug和chrome的内置调试器就不需要了..可以直接实时编辑且看到效果; 在调试中对代码的操作不会保存到本地实际代码中..是不是很赞!!; 定位HTML元素的三种方式 进入调试工具界面,按下”瓢虫”旁边的小鼠标,再进行网页元素的选择 默认快捷键,Ctrl + shift + C 鼠标移动到网页的某一块元素,鼠标右键,使用Firebug查看元素 HTM...
CSS 里也一样，每个元素盒子都可以想象成由两个图层组成。元素的前景层包含内容（如文本或图片）和边框，元素的背景层可以用实色填充（使用background-color 属性），也可以包含任意多个背景图片（使用background-image 属性），背景图片叠加在背景颜色之上。 CSS背景属性 background-color background-image background-repeat background-position background-size background-attachment background（简写属...
现在有一个窗口绝对定位position:absolute;，设置css样式left: 0;right: 0;，可以实现窗口的宽度百分之百(100%)。 这时候，没有给窗口设置顶部top:0;，默认情况下窗口顶部为零，或者也可以说，默认情况下，窗口跟随着上一个窗口的底部bottom:0;。 如果上一个窗口是浏览器的边框，那么当前窗口就会紧贴着上一个窗口的边框，也就是浏览器的边框。 总结以上概述，当我们绝对定位一个窗口，设置窗口的左(left)右(right)都为零， 相...
0. 目录 目录 引言 正文 1 DISPLAY NONE 2 POSITION ABSOLUTE OR FIXED Float DISPLAY 3 FLOAT LEFT OR RIGHT DISPLAY 4 POSITION STATIC 偏移值 声明 1. 引言 原文：bitsofcode的HOW POSITIONING CSS PROPERTIES INTERACT 译者：爱前端，乐分享的FedFun，前端痴王海庆的博客。 译言：来看下CSS标布局情况下，定位相关属性之间的相互作...
简述 定位问题一直是新手学习css的一个难点，现在我将他们总结出来，希望对大家有帮助 position详解 在css中，通过position属性，配合top,right,left,buttom对元素进行定位position属性有：static，relative，absolute，fixed四种，下面分别探讨 默认定位static Document .container { width: 400px; height: 400px; background-color: #DDDDDD; ...
1.static,relative,absolute,fixed含义 static: 元素框正常生成。块级元素生成一个矩形框，作为文档流的 的一部分，行内元素则会常见一个或多个行框，至于其父元素中。 relative： 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占有的空间仍保留。 absolute： 元素框从文档流中完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素挥着是初始包含块。 元素原先 在正常文档流...
CSS 定位 (Positioning) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边距 (padding) 实例 CSS 列表实例 CSS 表格实例 轮廓（Outline)实例 CSS 尺寸 (Dimension) 实例 CSS 分类 (Classification) 实例 CSS 定位 (Positioning) 实例 CSS 伪类 (Pseudo-classes)实例 CSS 伪元素 (Pseudo-elements)实例 01设置...
position属性 在前端中，position是很常见的属性。通过这个属性可以调整dom元素在浏览器中显示的位置。 它有几个常用的属性： static 默认值。通常是在覆盖absolute或者relative样式时使用。 relative 相对定位。相对于原本自己的位置，其他的元素样式不会发生改变。 position 绝对定位。相对于最近的一个应用absolute或者relative的父元素，然后相对这个元素进行定位。 fixed 相对浏览器定位。 inherit 继承...
CSS定位 CSS 定位机制 CSS中一共有三种基本定位机制：普通流、浮动、绝对定位。 如果不进行专门指定，所有的标签都在普通流中定位。 块级元素从上到下一个接一个的排列，框之间的垂直距离是由框的垂直外边距计算出来。 行内框在一行中水平布置。可以使用水平内边距、边框和外边距来调整它们之间的间距。 position属性 通过position属性，我们可以选择4种不同类型的定位，这会影响元素框生成的方式。 包括4个属性值：...
关于CSS定位，有人很多时候都是随便用用，符合自己的要求就行。但是CSS中的position等属性确实有很多需要认真考究的地方。 1.position:static static属性是position的默认值，也就是说，当一个元素没有为其设定position属性时，它的默认值就是static。 2.position:absolute 这是一个经常会被用到的position属性值。如果为某个元素设定了absolute，则该元素脱离原来的文档流。形象一些说，比如a元素被定义了position:abs...
× 目录 [1]定位 [2]包含块 [3]偏移属性 [4]绝对定位 [5]格式化 [6]auto 前面的话 CSS有三种基本的定位机制：普通流、浮动和绝对定位。利用定位，可以准确地定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。但元素究竟如何定位，定位到什么位置，主要依靠top/right/bottom/left这四个偏移属性。本文就定位中的偏移做详细介绍。 ...
× 目录 [1]定义 [2]堆叠规则 [3]堆叠上下文 [4]兼容 前面的话 对于所有定位，最后都不免遇到两个元素试图放在同一位置上的情况。显然，其中一个必须盖住另一个。但，如何控制哪个元素放在上层，这就引入了属性z-index 定义 利用z-index，可以改变元素相互覆盖的顺序。这个属性的名字由坐标系统得来，其中从左向右是x轴，从上到下是y轴。从屏幕到用户是z轴。在这个坐标系中，较...