在前端网页布局中，在同一平面上布局，我们大都采用float属性来定位网页元素的位置。但是涉及到弹出层、浮层、页面广告插件等等，都需要CSS中的position属性来定位了，对于初学者来说经常分不清楚是应该用position属性的absolute值、relative值、fixed值等等，下面我们就position属性基本的这三个值的用法做一些简单的介绍，希望对初学者有些帮助。 1、position的absolute（绝对定位） 在这里position的absolute绝对定...
视区（视口） 当浏览者查看一份网页文件时，通常使用者代理(User Agents, UA, 浏览器)会提供给浏览者一个视区(视窗或者是画面里的其它可视区域)。当我们调整视区大小时，UA 就有可能会改变文件上布局。 当视区比文件所呈现的Canvas 区域还小时，UA 可能会提供一个卷轴的机制来让您一窥文件的全貌。理论上每个Canvas 最多只能有一个视区，不过UA 可以产生一个以上的Canvas(例如在同一份文件上提供不同的可视区域, 如框架格)。...
引言 使用position和display来实现的当鼠标移动到图片上时显示和隐藏文字或者视频的效果。 知识点 1、relative、absolute的使用。 当子元素使用position:absolute时，父元素应该设置postion:relative以便使它作为决定定位段落的定位环境。在这里相对定位的元素 必须是绝对定位的祖先元素，才有资格成为定位环境。 2、CSS选择器。其中用到了两种选择器：element,element 和 element element di...
最近做了几个项目：配资公司，ecmal商城等，客户对前台要求都很高。所以，今天来谈谈css的基础，以及核心，定位问题。 div、h1或p元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span和h3等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。 在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。 块级元素的文本行也会发生类似的情况。假设有一个包含三...
1.先看要实现的效果 实际的效果图 可以看到我的实现过程是先使用一个父级的div来定位水平垂直居中，然后再父级的div中定位出两个十字架的div。 看实现代码： body{margin:0;padding:0} /*定位父级div水平垂直居中*/ .body_main{ width:200px; height: 300px; background-color: #3091E5; margin:-150px 0 0 -100px; top:50%; left:50%; position: absolute; } /*定位水平div垂直居中*/ .row_div{ width:200...
引子： 开始的时候我想先要解决一个问题，怎么设置一个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设置...