css三种定位方式的探讨

标签: css 探讨 | 发表时间:2013-09-17 02:54 | 作者:buyingfei888
出处:http://blog.csdn.net

css   3种类型定位方式,进行控制页面布局:普通定位,浮动定位,绝对定位。

默认使用普通流技术再页面中布局元素,希望表现与普通流不同,另外两个特性position和float

具体实例

<html>
 <head>
   <title>
      css定位功能探索
   </title>
   <style type="text/css">
   #relative{
   	/*相对定位探索
      将相对于它在普通流中位置进行定位
      相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
      相对定位是“相对于”元素在文档中的初始位置
   	*/
   	position: relative;
   	top: -10px;
   	left: 30px;
   	color: red;
   }
   /*
    绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块 即是body元素
    */
   #absolute1{
   	position: absolute;
   	top: 20px;
   	left: 360px;
   	color: blue;
   }
   /*
   有父元素 不过父元素没有定位
    */
   #absolute2{
   	position: absolute;
   	top: 50px;
   	left: 360px;
   	color: blue;
   }
   /*属性和上面一样 
   不过是父元素定位方式变为 relative
   */
   #absolute3{
    position: absolute;
   	top: 50px;
   	left: 360px;
   	color: blue;  	
   }
   /*相对于浏览器窗口来对元素进行定位*/
  #fixed{
  	position: fixed;
  	top: 90px;
  	left: 80px;
  }
  
  /*float定位受当前布局影响,也会影响伺候布局
 比如在普通定位1下行才开始进行浮动
 普通定位2  直接就接在浮动定位后面

  */
#float1{
	float: left;
	margin-left: 50px;
}
#float2{
	float: left;
	margin-left: 50px;
}

   </style>
 </head>
  <body style='height: 1000px;'>

   <div>
     position 值为relative 定位探索1
   </div>
     <div id='relative'>
     position 值为relative 定位探索2
   </div>

  <div>
    position 值为absolute 定位探索3
  </div>
    <div id='absolute1'>
    position 值为absolute 定位探索4
  </div>

	<div style='margin-top: 50px;'>
		 这是position 值为absolute 定位探索4和5的父元素
	  <div id='absolute2'>
	  	 position 值为absolute 定位探索4
	  </div>
	   <div>
	  	 position 值为absolute 定位探索5
	  </div>
	</div>

	<div style='margin-top: 50px;position: relative;'>
		 这是position 值为absolute 定位探索6和7的父元素
	  <div id='absolute3'>
	  	 position 值为absolute 定位探索6
	  </div>
	   <div>
	  	 position 值为absolute 定位探索7
	  </div>
	</div>
  
  <div style='margin-top: 20px;'>
    这是position值为fixed 定位探索1
  </div>
  <div id='fixed'>
    这是position值为fixed 定位探索2
  </div>

 
  <div>这是一个普通定位1</div>

	 <div style='border: 2px solid red;' id='float1'>这是float定位1</div>
	  <div  id='float2' style='border: 2px solid red;'>这是float定位2</div>

  <div>这是一个普通定位2</div>
  </body>
</html>



运行效果:

作者:buyingfei888 发表于2013-9-16 18:54:07 原文链接
阅读:24 评论:0 查看评论

相关 [css 探讨] 推荐:

css三种定位方式的探讨

- - CSDN博客推荐文章
css   3种类型定位方式,进行控制页面布局:普通定位,浮动定位,绝对定位. 默认使用普通流技术再页面中布局元素,希望表现与普通流不同,另外两个特性position和float. 将相对于它在普通流中位置进行定位. 相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置.

CSS图形

- GLORY - 酷壳 - CoolShell.cn
下面的示例展示了使用纯CSS制作的各种图形,你可以自由地修改文中的CSS代码. 经测试,IE9, Chrome, FF, Safari都可以正常显示. 五角星形 via Kit MacAllister. 心形 via Nicolas Gallagher. 无穷大 via Nicolas Gallagher.

用 Compass 寫 CSS

- Jay - Blog.XDite.net
最近在開發一個新產品,整體來說應該是接近寫完了,不過越接近完工,抓 IE 系列的 bug 就越是挫折. 朋友 @evenwu 就來洗我要不要換成 Compass,說這東西超神奇,超好用,還可以把 IE bug 殺光光. 其實之前就久仰 Compass 大名了,只是文件實在看起來太他媽的眼花繚亂,因為專案進度一直在跑,不太敢貿然換掉寫 CSS 的方式.

CSS 入门

- - 博客 - 伯乐在线
级联样式表非常简单,也就是 (X)HTML 网页之上的分层设计. 使样式表 “级联”,这样您就可以跨站点应用它 — 也就是说,将样式应用到网站,它就会自行应用到每个网页的每个元素. ●XHTML:可扩展 HTML. 对于网站,将数据与设计分离是一个重要的概念:数据使用 (X)HTML 发送到 浏览器,而设计使用 CSS 应用到该数据.

css 圆角

- - CSDN博客推荐文章
作者:kangquan2008 发表于2012-2-20 22:32:24 原文链接. 阅读:6 评论:0 查看评论.

CSS架构

- - 博客 - 伯乐在线
英文原文: CSS Architecture,编译: CSDN-张红月. Philip Walton 在AppFolio担任前端工程师,他在Santa Barbara on Rails的聚会上提出了CSS架构和一些最佳实践,并且在工作中一直沿用. 擅长CSS的Web开发人员不仅可以从视觉上复制实物原型,还可以用代码进行完美的呈现.

CSS总结

- - CSDN博客Web前端推荐文章
         接触过一段CSS,为简单理解,将CSS说成两步,一步是你做个“记号”,另一步是根据记号设置样式.      网页的内容和样式是分开的. “记号”便是能标识网页中某部分内容的关键字词(选择器),而根据记号设置样式呢,就是按图索骥根据记号设置标识的那部分内容的样式.     这段时间练习的每个CSS小例子,或是用id做记号,或是用name,或是用class,只有有了这些所谓的记号,CSS设定的样式才有用,.

CSS基础

- - CSDN博客Web前端推荐文章
1、引入CSS的四种方式. 行内样式、内嵌样式、链接样式、导入样式. 基本选择器:标签选择器,ID选择器,类选择器,通用选择器. 通用选择器:*{css代码}. 通用选择器作用:对整个网页中所有HTML标签进行样式定义. 常见用法:定义*{margin:0;padding:0}通用样式,并置于CSS文件最顶端,用于对HTML内所有的标签进行重置以保证页面能兼容多种浏览器.

CSS命名规范

- - BlogJava-首页技术区
网上整理的比较好的css命名规则,为css代码的规范化做参考,增加代码的可读性. 容器: container 页头:header 内容:content/container. 页面主体:main 页尾:footer 导航:nav . 侧栏:sidebar 栏目:column 左右中:leftright center .

css基础入门

- - CSDN博客推荐文章
css是Cascading Style Sheets的缩写,是一种用于为Html文档定义布局的样式表语言. Css是一种样式表语言,用于为html定义布局. Css弥补了Html对标记属性控制的不足. Css将网页内容与样式实现分离,使得网页设计更加明了、简洁. Css可以精确控制网页布局,如行间距、字间距、段落缩进和图片定位等.