css三种定位方式的探讨
- - CSDN博客推荐文章css 3种类型定位方式，进行控制页面布局：普通定位，浮动定位，绝对定位. 默认使用普通流技术再页面中布局元素，希望表现与普通流不同，另外两个特性position和float. 将相对于它在普通流中位置进行定位. 相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置.
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图形
- 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可以精确控制网页布局，如行间距、字间距、段落缩进和图片定位等.