谈谈定位
CSS 定位机制:
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
1, 普通流:除非专门指定,否则所有框都在普通流中定位。(元素根据自己的display类型,长宽,等属性顺序排列在z-index:0这一层的。就是普通流也可以是文档流。)
2, 浮动:就是通过float:left;float:right;来控制元素在同层里的左浮和右浮。Float,会改变正常的文档流的排列但是他仍然还是在z-index:0层里。
3, 定位:
Position:relative(翻译相对)
Position:absolute(翻译绝对)
Position:fixed(翻译固定)
Position:static(翻译静态默认值无特殊定位)
他们都可以改变元素在文档流中的位置。并且可以让元素激活left,right,top,bottom和z-index属性。
例子
CSS hack
css hack的方式有很多种
1, IE条件注释法:
<!--[if IE]>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css"></style>
<script type="text/javascript"></script>
(可以针对不同ie版本分别导入不同样式)
<![endif]-->
<!--[if gt IE6]>只在ie6以上版本生效<![endif]-->
<!--[if ! IE7]>只在ie7上不生效<![endif]-->
2, 选择符前缀法:
*html{}/*只对ie6生效*/
*+html{}/*只对ie7生效*/
*{}/*作为通配符表示所有这个不是hack*/
3, 样式属性前缀法:
.test{ margin-top:10px; *margin-top:8px; _margin-top:8px;}/**在ie6和ie7下生效,_只在ie6下生效*/
相关推荐
总的来说,HTML+CSS定位是网页设计中的关键技能,熟练掌握它能让你创建出更加灵活和精细的网页布局。通过这个练习集,希望你能深入理解定位的概念,提升你的网页设计能力。记得多实践、多尝试,理论与实践相结合才能...
本话题主要关注如何利用CSS定位技术实现动态关联的效果,这对于网页设计和前端开发至关重要。下面将详细阐述CSS定位的基本概念、常见定位方式以及如何应用它们来创建动态关联效果。 首先,了解CSS定位的基本概念。...
有了这个就可以搞定很多事情 在“CSS规则对话框”中,我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置,来美化我们的页面,当然啦,我们在定义某个...还有【CSS定位详解之绝对定位和相对定位】哦
总的来说,CSS定位技术为前端布局提供了强大的控制能力,可以实现元素的精确布局。理解定位的工作原理及其在不同布局方式(标准流、浮动、定位)中的应用,对于前端开发者来说至关重要。在网页布局中,定位通常是在...
### CSS定位详解:绝对定位与相对定位 #### 相对定位(Relative Positioning) 相对定位是一种常见的CSS定位方式,它允许元素相对于其正常位置进行偏移。这种定位不会影响其他元素的位置。 - **定义**: 当元素...
本文将详细解析div+css定位的四种基本类型:static、relative、absolute和fixed,以及它们之间的差异。 1. **static**: - 这是元素的默认定位方式,元素会按照正常的文档流顺序排列,不考虑`top`, `bottom`, `...
CSS定位是网页设计中至关重要的一个概念,它允许开发者精确控制元素在页面上的位置。CSS定位主要有四种方式,分别是默认定位(static)、相对定位(relative)、绝对定位(absolute)和固定定位(fixed)。 1. **...
### 什么是CSS定位? CSS(层叠样式表)定位是一种用于控制HTML元素在网页上的位置的方法。通过CSS定位,开发者可以精确地控制元素相对于其原始位置、父元素或浏览器窗口的位置。CSS提供了多种定位方式,主要包括...
4. CSS定位: 定位是CSS中的一项重要技术,用于控制元素在页面上的精确位置。主要有以下几种定位方式: - `static`:默认值,元素按常规流排列。 - `relative`:相对于其正常位置偏移。 - `absolute`:相对于...
网页CSS定位和滤镜是构建动态、美观网页的关键技术,它们极大地丰富了网页的设计与交互体验。在这份资源中,包含的"CSS5_定位"和"CSS6_尺寸"两个PPT课件以及相关的实例网页,将帮助我们深入理解和应用这些概念。 ...
CSS定位主要包括静态定位、相对定位、绝对定位、固定定位和粘性定位。其中,相对定位是基础,它允许元素相对于其原始位置进行偏移,但不会改变文档流。相对定位的CSS代码通常写作: ```css .element { position: ...
本篇文章将深入探讨两个关键概念:CSS定位和元素的隐藏与显示,通过具体的案例来阐述这些知识点。 一、CSS定位 定位是CSS中用于控制元素在页面上精确位置的重要技术。主要的定位机制有以下几种: 1. 静态定位...
CSS(层叠样式表)是网页设计中用于控制布局和样式的语言,它的重要性在于能够实现灵活、响应式的设计。本文将深入探讨CSS中的四个关键...通过实践和深入学习,我们可以更好地掌握CSS定位,从而提升网页设计的质量。
在网页设计中,Div+CSS定位是构建高效、响应式布局的关键技术。Dreamweaver CS6作为一款强大的网页设计工具,提供了直观的界面来处理Div和CSS的定位问题。本文将详细探讨在Dreamweaver CS6中,如何利用Div和CSS的...
本教程将深入讲解CSS定位与div布局,这是创建复杂网页结构的关键技能。在第10课中,我们将详细探讨以下知识点: 1. **CSS盒模型**:理解CSS盒模型是掌握布局的基础。每个HTML元素都是一个矩形的盒子,包括内容区域...
div+css定位代码示例 说明了绝对和相对
在本主题“CSS定位表格”中,我们将深入探讨如何使用CSS来创建和定位不同布局的表格,包括单行一列、两行一列、三行一列以及多列布局。这些布局通常基于浮动(float)和绝对定位(absolute positioning)方法。 1. ...
**二、CSS定位** 定位(Positioning)提供了更精细的控制,使开发者能够精确地指定元素在页面上的位置。定位分为以下几种类型: 1. **静态定位(static)**:这是元素的默认定位方式,遵循正常文档流。 2. **相对...
借助CSS定位来实现,你将右下角的那个DIV放在另一个DIV里面,参考代码如下示: 复制代码代码如下: ”box1″> ”box2″>测试内容</div> </div> <style> <!– #box1{width:600px;height:600px;background:...