CSS彻底研究(3) - 浮动,定位
Github pages 博文
CSS彻底研究(3)-浮动,定位
一 . 浮动float
I . 定义及规则
float默认为none,对应标准流的情况。当float : left;时，元素就会向其父元素的左侧靠紧，脱离标准流，同时宽度不再伸展至充满父容器，而是根据自身内容来确定。
II . 演示规则
准备代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
body
{
margin: 0;
padding: 0;
}
#father
{
background-color: cyan;
/*父级div 没有定位 造成子div的margin-top传递给父级*/
position: absolute;
}
#father *
{
margin: 10px;
padding: 10px;
border: 1px dashed red;
}
#son1
{
}
#son2
{
}
#son3
{
}
</style>
</head>
<body>
<div id="father">
<div id="son1">#son1</div>
<div id="son2">#son2</div>
<div id="son3">#son3-son3son3son3</div>
<p>
这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字
</p>
</div>
</body>
</html>
- 中间给#father加上
position:absolute,是为了消除未定位父div的margin-top传递问题,见http://blog.sina.com.cn/s/blog_6bec36f9010110w9.html
显示效果为
- 1,2的float分别为left right时,有
可见1,2脱离标准流,标准流中的son3当他们不存在,于是son3代替原来son1的位置,而son1的左border、son2的右border与son3的左右border重合 - 当1,2,3全都float left时
文字围绕着float过的div - 1,2左浮动，3右浮动，当窗口宽度减小时，3会被挤下来
当3左浮动，2右浮动的时候，显示为
当浏览器窗口宽度减小时，猜猜谁会被挤下来，son2么？
答案还是son3，规则为 ： 写在html文件中后面的会被挤下来，在html文件中，son3在son2后面，因此总是son3先挤下来。 - 增加son1高度，son3挤下来时会卡在那里
- 删除盒子中的文字，3个子div全部左浮动
显示为
父div中的三个子div全部脱离标准流了,父div就缩成一条线了,可以用clear来修正
加一个margin-padding-border全为0,clear为both的空div,来撑大父div
III . clear清除浮动
如果前面有float:left的元素,他会影响下面元素,如上例中的p,在p元素中写clear : left即可消除前面左浮动元素对本元素的影响.同理clear:both是左右都清除.
二 . 定位position
position取值有static absolute relative fixed
1. static
这个是默认的,即标准流排下来,就是static定位方式.
2. fixed
在浏览器窗口中固定,什么论坛中的[回到顶部]这种按钮就是fixed做的
练习做个回到顶部玩玩
<div id="backToTop">
回到顶部
</div>
#backToTop
{
width: 100px;
height: 50px;
background-color: red;
color: white;
cursor: pointer;
border-radius : 25px 0 0 25px;
padding-left : 20px;
text-align: center;
line-height: 50px;
position : fixed;
bottom : 80px;
right : 0;
}
显示效果
3. relative相对定位
相对于自己的偏移,而且不脱离标准流,使用top/bottom left/right指定偏移量
4. absolute绝对定位
根据别的已定位元素进行定位,应用absolute规则的脱离标准流
- 这个别的元素:
离它最近的已定位的祖先元素 或者 浏览器窗口,当找不到前面的祖先元素时,就以后者浏览器窗口来定位. - 已经定位 : 是指position已经设置,而且不是static...即position值不为static就是已经定位的元素,未设置position或设置为static认为它没有定位.
Trick
只设置 position : absolute,而不设置top/bottom/left/right值,那么元素会保持在原地,但是已经脱离标准流.
三 . display
display取值有inline block none
设置为none，即可将其隐藏，像inline-block等新添加的，参考http://www.w3school.com.cn/cssref/pr_class_display.asp
CSS彻底研究(3) - 浮动,定位的更多相关文章
- css清除浮动定位造成的异常
清除浮动是为了解决高度塌陷的问题:内层有好几个div有宽有高,并且选择了浮动定位,但是外层的div却并没有设置宽高.在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动( ...
- CSS入门(定位之浮动定位、伪类之鼠标悬停、光标修改和透明度修改和列表样式)
一.定位 所为定位,实际上就是定义元素框相对于其正常位置,应该出现在哪儿 定位就是改变元素在页面上的默认位置 分类: 普通流定位(元素默认的定位方式) 浮动定位 相对定位 绝对定位 固定定位 1.普通 ...
- CSS定位——浮动定位
CSS定位机制Ⅱ——浮动定位 float属性:进行浮动定位 left,right clear属性:清除浮动 left,right,both ㈠ float属性 1.概述 ⑴div实现横向多 ...
- CSS定位机制之浮动定位float
一.浮动定位实现的效果 二.使用float实现浮动定位 三.使用clear属性清除浮动定位 四.浮动定位的应用(布局) 一.浮动定位实现的效果 (一).块元素(div)在文档流中默认垂直排列,如果 ...
- css定位之浮动定位
浮动定位可以是原本垂直排列的块级元素,变成水平排列 1浮动元素 float:left 或者float:right 这些浮动会直接碰到父容器的边界为止. 2设置了浮动的元素,元素会脱离标准文档流中,但 ...
- CSS(6)---通俗讲解浮动(float)
CSS(6)---通俗讲解浮动(float) CSS有三模块:盒子模型.浮动 .定位.上篇博客有讲到 盒子模型地址:CSS(5)---通俗讲解盒子模型 一.理解浮动 1.概念 概念 浮动可以理解为让某 ...
- 浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
- (转)浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
- CSS学习笔记：浮动属性
目录 一.浮动流是什么 二.通过代码实例了解浮动特点 1. 搭建测试框架 2. 添加浮动 3. 浮动元素的排布 4. 给行内元素添加浮动效果 5. 子元素浮动后对父元素的影响 5.1 在父元素中添加o ...
随机推荐
- Struts2上传文件
jsp: <form action="file_upload.action" method="post" enctype="multipart/ ...
- C#编写Windows服务程序图文教程（转载）
Windows Service这一块并不复杂,但是注意事项太多了,网上资料也很凌乱,偶尔自己写也会丢三落四的.所以本文也就产生了,本文不会写复杂的东西,完全以基础应用的需求来写,所以不会对Window ...
- Key lock 的秘密
研究死锁,或者观察sp_lock,有时候最恼人的莫过于你看到下面研究成果的key lock,但是却不知道究竟是哪个page 哪个row被lock住了: Exec sp_lock: 就说上面的key ...
- Apache URL转发
httpd.conf 尾巴加 Alias /web "F:\xampp\htdocs\test/" <Directory "F:\xampp\htdocs\test ...
- MDX示例：求解中位数、四分位数(median、quartile）
一个人力资源咨询集团通过网络爬虫采集手段将多个知名招聘网站上发布的求职和招聘等信息准实时采集到自己的库里,形成一个数据量浩大的招聘信息库,跟踪全国招聘和求职的行业.工种.职位.待遇等信息,并通过商业智 ...
- open_basedir restriction in effect. File() is not within the allowed path(s)
目前发现eaccelerator安装之后如果php.ini中设置open_basedir将导致open_basedir的一些报错(open_basedir restriction in effect. ...
- lnmp 60秒的服务器缓存时间
1.问题 php代码写好之后执行发现居然没有生效,打断点,改代码.刷新都没有达到预期的效果.但是间隔60秒之后刷新就看到效果了,或者删除文件就里面见效. 2.原因 从phpinfo()页面输出搜索&q ...
- Python核心编程(第七章)--映像和集合类型
字典:它是一个容器类型,能存储任意个数的Python对象,也包括其他容器类型,Python的字典是作为可变的哈希表实现的 映像类型中的数据是无序排列的 可以用工厂方法dict()来创建字典,也可以 ...
- (转)CentOS搭建Nagios监控
A.Nagios服务端1.安装软件包 yum install -y httpd 2.下载nagios wget http://syslab.comsenz.com/downloads/linux/na ...
- JMXMP SSL
http://docs.oracle.com/javase/7/docs/technotes/guides/management/agent.html http://docs.oracle.com/c ...