css的float和position属性
（1）float的简单用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
width: 200px;
height: 50px;
background-color: aqua;
}
.div2{
width: 250px;
height: 100px;
background-color: red;
float: left;
}
/*如果加了float，则div3会被div2覆盖，因为div2设置了向左漂浮，会接着找上一个div1的尾部进行漂浮，叫重叠样式表*/
.div3{
width: 300px;
height: 150px;
background-color: violet;
}
.div4{
width: 450px;
height: 250px;
background-color: blue;
} </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div> </body>
</html>
结果如图
如若div2和div3都设置了向左浮动，结果如图
如果div3加了clear：left，则不会放在div右边了，会在下面，也就是当div2不是浮动对象了
（2）position属性
1、fixed表示固定位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
width: 200px;
height: 50px;
background-color: aqua;
position: fixed;
}
/*static一般情况都是默认按这种情况，所以加不加都没影响这里*/
/*fixed表示固定位置，也是脱离了文档流，覆盖别的标签*/
.div2{
width: 250px;
height: 100px;
background-color: red; } .div3{
width: 300px;
height: 150px;
background-color: violet; }
.div4{
width: 450px;
height: 250px;
background-color: blue;
} </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div> </body>
</html>
效果如图
2、relative表示根据自己之前的位置进行调整
如图
css的float和position属性的更多相关文章
- CSS float和position属性
1. 浮动 CSS float属性定义了元素在水平方向的浮动.该元素从网页的正常流动(文档流)中移除,对于浮动元素后的块级元素,块级元素将会被浮动元素覆盖,并且会接着其上一个文档流中的元素,按文档流的 ...
- 总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- CSS学习笔记——定位position属性的学习
今天学习之前剩下的一个问题:CSS的position属性.首先归纳出和position相关的问题: position作为一个属性,它一共有哪几个属性值? position常用的属性值有哪几个?分别有什 ...
- [转]总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- CSS之float vs position:absolute
补充:ul 应该设置下 list-style: none; 题外话:看了张鑫旭的视频,这家伙把简单的css玩出了新花样,绝对大神级的存在.膜拜下先~ float的作用前面一章已经说过了,但没考虑过的是 ...
- DIV CSS布局中position属性用法深入探究
本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...
- DIV-CSS布局中position属性详解
本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...
- [转载]CSS元素的定位position
CSS元素的定位position 属性position 值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一 ...
- CSS中float和Clear的使用
CSS中float和Clear的使用 本文和大家重点讨论一下CSS中Float和Clear属性的使用,一个float对象可以居左或居右,一个设置为float的对象,将根据设置的方向,左移或右移到其父容 ...
随机推荐
- LeetCode Missing Number （简单题）
题意: 给一个含有n个整数的数组,数组中的元素应该是0-n.现在缺了其中某1个,找出缺少的那个整数? 思路: 0-n的总和是可以直接计算的,而缺少的那个就是sum减去数组的和. int missing ...
- 使用后台程序的第一个程序hello word
1.在advanced\backend\SiteController.php中输入 2.在advanced\backend\Views文件夹下添加名字为say.php的文件,文件名必须和控制器中的视图 ...
- linux 命令——30 chown (转）
chown将指定文件的拥有者改为指定的用户或组,用户可以是用户名或者用户ID:组可以是组名或者组ID:文件是以空格分开的要改变权限的文件列表,支持通配符.系统管理员经常使用chown命令,在将文件拷贝 ...
- HBuilder发行App（Android和ios）
怎样将开发好的app测试和上架,此文包括Android和ios打包.测试和上架的大概过程.内容有些简陋,因为此过程踏坑无数,特此留念. 特此声明:内容不全仅供参考. 介绍两个参考网站: 1. http ...
- 【51nod1299】监狱逃离（树形DP）
点此看题面 大致题意: 在一棵树中有\(N\)条边连接\(N+1\)个节点,现在已知这棵树上的\(M\)个节点,要求封住最少的节点,使这\(M\)个节点中的任意一个节点无法到达叶子节点,若能办到输出最 ...
- 【转】iOS开发之压缩与解压文件
ziparchive是基于开源代码”MiniZip”的zip压缩与解压的Objective-C 的Class,使用起来非常的简单方法:从http://code.google.com/p/ziparch ...
- apache的安全增强配置(使用mod_chroot,mod_security)
apache的安全增强配置(使用mod_chroot,mod_security) 作者:windydays 2010/8/17 LAMP环境的一般入侵,大致经过sql注入,上传webshel ...
- tmux 用z关闭之后的恢复
ctrl+b 然后z是全屏 但是如果是ctrl+z就是关闭窗口了 tmux ls看所有窗口 然后 tmux attach -t 2或者3就恢复
- python_57_高阶函数
变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数. def add(a,b,f): return f(a)+f(b) res=add(-3,- ...
- Feign + Hystrix 服务熔断和服务降级
本机IP为 192.168.1.102 1. 新建 Maven 项目 feign 2. pom.xml <project xmlns="http://maven.apa ...