<pre name="code" class="html">1.浮动的历史大家知道吗？最早的浮动初衷就是为了实现文字环绕的效果，类似于一张图片在左上角，然后其周围都是文字环绕着它，这个场景相信大家都见过吧！然而，浮动衍生至今，我们需要用到它的地方已经太多太多，最常用的就是导航的实现，还有其它方面的应用，比如单侧固定，另一侧自适应等等（这在下面将会有例子），下面会分几个方面对浮动做介绍。2.浮动的影响 相信float属性是前端工程师切图...
概念z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 层级关系的比较1. 对于同级元素，默认(或position:static)情况下文档流后面的元素会覆盖前面的。2. 对于同级元素，position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素，即z-index越大优先级越高。3. IE6/7下position不为static，且z-index不存在时z-index为0，除此之外的浏览器z-index为auto。4. z-i...
DIV层、span层等html标签层重叠顺序样式z-index，平时我们使用较少，但也会难免会碰到CSS z-index使用。接下来divcss5介绍z-index从基本属性到设置对象的层叠顺序、重叠顺序，从基础语法到应用案例教程讲解学习z-index。一、z-index语法与结构 z-index 跟具体数字如：div{z-index:100}注意：z-index的数值不跟单位。z-index的数字越高越靠前，并且值必须为整数和正数（正数的整数）。二、z-index使用条件Z-index在使用绝对定位 pos...
CSS中position属性是设定元素的定位类型，它有absolute（绝对定位）、relative（相对定位）、static（静态定位，默认值）、fixed（固定定位）四种参数。static：默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。relative：位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位...
定位标签：position包含属性：relative（相对） absolute（绝对）1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）相对定位：relative 没有脱离正常的文档流，被设置元素相对于其原始位置而进行定位...
我们先来看看CSS3 中对position属性的相关定义：static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。 relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 fixed：对象脱离正常文档流，使用top，right，...
对于图片，首先我们先想到是背景图片。因为我们许许多的装饰都是用背景图片来实现的。既然这样，那么就从CSS控制背景图片讲起吧。定义和用法background-image 属性为元素设置背景图像。元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。1.CSS控制背景图片： 对于一个网页，我们开始设计的时候，可能没有过多的去想背景图到底是什么，因为大多都...
语法： ime-mode : auto | active | inactive | disabled参数： auto : 不影响IME的状态。与不指定ime-mode属性时相同 active : 指定所有使用IME输入的字符。即激活本地语言输入法。用户仍可以撤销激活IME inactive : 指定所有不使用IME输入的字符。即激活非本地语言。用户仍可以撤销激活IME disabled : 完全禁用IME。对于有焦点的控件（如输入框），用户不可以激活IME 说明： 设置或检索是否允许用户激活输入中文，韩文，日文等的...
语法： layout-grid-char : none | auto | length参数： none : 不指定行网格值 auto : 在对象文本中按最大字符确定网格 length : 百分数 | 由浮点数字和单位标识符组成的长度值，其百分比取值是基于父对象尺寸。请参阅长度单位 说明： 设置或检索应用于对象文本的字符网格值。要实现此属性，layout-grid-mode必须设置为char或both。其视觉效果类似于line-height属性。只应用于块对象（如div）。其视觉效果类似于 line-he...
语法： layout-grid : layout-grid-mode || layout-grid-type || layout-grid-line || layout-grid-char || layout-grid-char-spacing参数： 该属性是复合属性。请参阅各参数对应的属性。 说明： 设置或检索复合文档中指定文本字符版式的网格特性。以东亚语言（如中文，日文）编写的文档通常根据一维或二维网格使用字符的页面版式。 对应的脚本特性为layoutGrid。请参阅我编写的其他书目。 示例： p { layout-grid:char line 1...
背景(background)是css中重要的的部分，也是需要知道的css的基础知识之一。这篇文章将会涉及css背景(background)的基本用法，包括诸如 background-attachment 等的属性，也会介绍有关背景(background)的常用技巧，以及 css3 中的 背景(background)(包含4个新的背景(background)属性)。背景色可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。这条规则把元素的背景设置为灰色：p {background-colo...
CSS的white-space属性用于指定如何处理容器中的空白字符，例如：空格( )、换行(\n)、缩进(\t)等。white-space出自CSS1，适用于块状元素，具有继承性，支持IE 5.5+、Chrome、FireFox、Safari、Opera等所有主流浏览器，其默认值为normal。语法： white-space : normal | pre | nowrap参数： normal : 默认处理方式 pre : 用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。参阅pre对象 nowrap : 强制在同...
这是一个简单的代码就是让长单词在外框不够大的时候可以换行显示。它在很多英文的网页编辑中还是非常管用的。语法： word-wrap : normal | break-word参数： normal : 允许内容顶开指定的容器边界 break-word : 内容将在边界内换行。如果需要，词内换行（word-break）也行发生 说明： 设置或检索当当前行超过指定容器的边界时是否断开转行。 对应的脚本特性为wordWrap。请参阅我编写的其他书目。 示例： div { word-wrap: ...
关于fixed属性，在什么情况下需要用，怎么用，首先，我们应该先了解下fixed属性的说明：fixed总是以body为定位时的对象，总是根据浏览器的窗口来进行元素的定位，通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。那么，我们了解了fixed属性的说明后，就可以知道它的作用了。当我们需要使一个层相对于浏览器来自动调整该层的位置的时候，如果你使用position的absolute属性来定位该层，你会发现absolute属性并不能达到你想要...
语法： text-justify : auto |inter-word | newspaper | distribute | distribute-all-lines | inter-ideograph参数： auto : 允许浏览器用户代理确定使用的两端对齐法则 inter-word : 通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效 newspaper : 通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式 distribute : 处理空格很像n...