一 综述： float position 对于div布局的作用明显, 注意使用的细节也变得有必要了. float position 有相同的地方,都会脱离"文档流"(position中绝对定位),游离在"平面空间" 一旦使用不当会导致布局错乱和一些不好处理的bug;
二 float细节：
先看"原始代码":
<head>
<style type="text/css">
*{margin:0px; padding:0px;} .top{
width:100%; height:30px;
background:#000; }
a{
font-size:14px;font-family:"微软雅黑";font-family:"微软雅黑";
text-decoration:none;
}
ul li{
list-style:none;
float:left; /*行向列表*/
}
/*.nav{
height:15px;
float:left;
}
.user{
height:15px;
float:left;
}*/
</style>
</head>
<body> <div class="top">
<ul class="nav">
<li><a href="#">java</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">php</a></li>
<li><a href="#">c++</a></li>
</ul>
<ul class="user">
<li><a href="#">登陆</a></li>
li><a href="#">注册</a></li>
</ul> </div> </body>
</html>
这里为了好看只写主要代码.使用"谷歌"浏览器运行结果如下;这里可以看到运行结果是我们想要的;下面的演示以这部分代码为基准;
下面做如下操作:(1)将.top里面的height去除; (2)加上其他样式;看代码
<head>
.top{
width:100%;
background:#000;
}
a{
font-size:14px;font-family:"微软雅黑";font-family:"微软雅黑";
text-decoration:none; /*去除文本修饰*/
}
ul li{
list-style:none;
float:left; /*行向列表*/
}
.nav{
height:15px;
}
.user{
height:15px; }*/
</style>
</head>
<body> <div class="top">
<ul class="nav">
<li><a href="#">java</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">php</a></li>
<li><a href="#">c++</a></li>
</ul>
<ul class="user">
<li><a href="#">登陆</a></li>
<li><a href="#">注册</a></li>
</ul>
<!--<div style="clear:both;"></div>
清除float;
-->
</div> </body>
</html>
结果如下:我们看到即使没有给.top height属性值,也一样可以显示背景色(黑色), 我们知道假如一个盒子不给 height属性,颜色解析我们是看不到的; 这里可以看到是因为top盒子的height是由nav user盒子的height撑开的;可以试试将nav user的height去除,那么什么都看不见;
将nav user 改成.nav{height:15px; float:left;} .user{height:15px; float:left;} 会怎么样? 看面1(图我放小了) 原因:是因为float会使"使用float"的标签脱离文档流,进入平面空间;此时.top是不会被撑开(子类标签不在同一流里面),top盒子 height解释为0px;自然就看不到; 你可以在.top里面加上 border:2px solid red;那你会看到下面图2
上面的红色区块就是.top;你再加上height:30px;那么结果就是我们想要的(背景有了);
所以得出结论：
(1)假如盒子里面的width height其中一个为0px;那么里面的样式解析会看不到;
建议：不要只是用"内容"将盒子撑开,最好为盒子设置width height属性;
(2)float的使用会脱离文档流,使用时要注意; "万不得已"再使用; 容易导致bug(布局错乱);有的可以使用定位position和display:inline-block;来处理;
三:定位--position
1,绝对定位:绝对定位和float一样,是会脱离文档流的. 假如当前位置有其他元素,那么会导致覆盖; 绝对定位最重要的是关注二点:(1)脱离文档流;(2)参考对象; 什么是参考对象呢? 看下面基准代码？
<head>
<style type="text/css">
.one{width:200px;height:200px;
background:#000;
}
.two{
width:100px;
height:100px;
background:yellow;
border:2px solid green;
}
</style>
</head>
<body>
<div class="one">
<div class="two">
</div>
</div> </body>
运行
:
two盒子在one盒子里面,也就是说one盒子是two盒子的父元素;我们给two加上绝对定位.two{position:absolute;}
此时two盒子的"参考对象"就是body本身; 那是不是什么时候都是以body为"参考对象"呢? 当然不是; 我们为one盒子加上.one{position:relative;} 那么就参考".one"
得出结论:元素进行绝对定位时以"最近的有设置定位的父类元素为参考对象'";这句话的意思是:假如元素的直接父元素和间接父元素都有设置定位,那么"就近为原则",假如父类都没有设置position, 那么就参照body了(其实body也是"父类");
*** 在基准代码上加 .two{position:absolute; top:10px;right:10px;}.one{
position:relative;}
运行：运行结果很好的验证了上面结论的正确性;
2 相对定位
也要注意二点：(1)相对定位不会脱离文档流;(2)相对定位是相对那个"对象"定位呢? 其实这个对象就是"自己".
对的,就是参照自己(元素本身);
***来一个有意思的:基准代码中我们加上 .two{position:reative; top:10px; left:10px;} 运行结果和上图是一样的;也就是说top:10px;的意思是相对于原来的位置:向下10px; left：10px;就是相对原来的位置向右10px; 这样好像不好理解.
简单粗暴：
原来位置的上边界在当前位置上边界的上面10px处.
左边的也一样：原来位置的左边界在当前位置的左边10px处;
绝对定位和相对定位都可以这样理解;
例1:你想把元素向右移10px; 你可以会这样做： right:10px; 这样是错的, 应该是left:10px;或者right：-10px;你照着上面结论就理解了(逻辑问题)。
float-position的一些细节的更多相关文章
-
【20】display,float,position的关系
[20]display,float,position的关系 如果display为none,元素不显示. 否则,如果position值为absolute或者fixed,元素绝对定位,float的计算值为 ...
-
jsp学习---css基础知识学习,float,position,padding,div,margin
1.常用页面布局 效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
-
float position的測试案例
依据<a target=_blank href="http://blog.csdn.net/goodshot/article/details/44348525">htt ...
-
常用的flex知识 ,比起float position 好用不少
flex布局具有便捷.灵活的特点,熟练的运用flex布局能解决大部分布局问题,这里对一些常用布局场景做一些总结. web页面布局(topbar + main + footbar) 示例代码 要 ...
-
盒模型、position、float详解css重点汇总
元素类型 HTML 的元素可以分为两种: 块级元素(block level element) 内联元素(inline element 有的人也叫它行内元素) 两者的区别在于以下三点: 块级元素会独占一 ...
-
CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
-
细说一下position（定位），以及其他的小知识
细说:position 位置 1.只要使用定位,必须要有一个相对的参照物.relative 2.具体定位的那个1元素需要加position:absolute:绝对的 绝对的:就是具体到某一个 ...
-
css之float(浮动)的特性
详解CSS float属性 float本身不脱离文档流,但是和 position:absolute;搭配使用会脱离文档流 阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 ...
-
[Web 前端] CSS篇之 4. position 和 display 的取值和各自的意思和用法
讲一讲CSS的position/float/display都有哪些取值,它们相互叠加时的行为都是什么? 列出display的值,说明他们的作用.position的值, relative和absolu ...
随机推荐
-
web应用动态文档技术
动态生成web文档分为服务器动态生成.客户端动态生成 服务器动态生成文档技术主要有: CGI - 公共网关接口,它是一个允许Web服务器与后端程序以及脚本进行通信的标准化接口.通常是web服务器收到一 ...
-
Servlet页面注册用户的小程序(一)
本实例实现用userreg.jsp页面中的表单提交注册请求,把注册信息提交给regservlet写入数据库并且查询新用户显示出来. 一.准备工作. 1.jdbc数据驱动开发包mysql-connect ...
-
常用邮件服务器名(POP3,SMTP地址)
POP3服务器地址:pop3.sina.com.cn(端口:110)SMTP服务器地址:smtp.sina.com.cn(端口:25) sina.cn: POP3服务器地址:pop3.sina.com ...
-
nginx实现ssl反向代理实战
登录认证account.free4lab.com需要提供ssl登录接口,ssl的原理看这篇博文,因为前面有反向代理nginx,所以这个需求就放在nginx实现了,否则可以放在web容器(jetty,t ...
-
Android沉浸式(侵入式)标题栏(状态栏)Status（二）
Android沉浸式(侵入式)标题栏(状态栏)Status(二) 附录1以xml写style实现了Android沉浸式(侵入式)状态栏(标题栏),同样以上层Java代码实现.在附录文章1的基础上 ...
-
CentOS 6.5 开机启动指定服务
gedit /etc/rc.d/rc.local #关闭防火墙 service iptables stop #开启samba服务 service smb start #开启ntopng 端口5000 ...
-
[知了堂学习笔记]_牵线Eclipse和Tomcat第二篇 —— 安装Tomcat&;&;添加Tomcat到Eclipse
来了来了~~~~~我们的"织女"--Tomcat来了,牛郎们等急了吧!哈哈! 一.安装Tomcat 下载地址:http://tomcat.apache.org/download-7 ...
-
构建之法 chapter 8 需求分析 ——读书心得
需求分析,是软件工程开发的第一步,准确全面地找到用户的需求,尽可能满足用户的要求,是软件惺惺发展的基础.所以需求分析很重要.具体来说有以下几个步骤: 1.获取和引导需求:软件团队需要找到软件的利益相关 ...
-
Linux命令_用户和用户组管理
新增组的命令 groupadd 格式:groupadd [-g GID] groupname 如果不加-g选项,则按照系统默认的gid创建组.跟uid一样,gid也是从1000开始的. 我们也可以如下 ...
-
Ubuntu 18.04设置dns
最近使用了最新版的ubuntu 18.04运行一些服务,然后发现服务器经常出现网络不通的情况,主要是一些域名无法解析. 检查/etc/resolv.conf,发现之前修改的nameserver总是会被 ...