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的对象,将根据设置的方向,左移或右移到其父容 ...
随机推荐
- 使用Window Media Player网页播放器
近段时间在做一个IETM的项目,项目需要使用WebBrower对包含avi的xml进行显示,可avi的显示总是有问题,网上找到这段在html中播放avi的代码,在Win10上表现不错,明天上班用Win ...
- 在vue-cli中引入图片不能正常显示
我们用vue-cli构建项目的时候,图片的地址是后台的,可是在template中item.img放到src中是不能正常显示的为什么? 原因是:url-loader无法解析js动态生成的路径. 解决: ...
- 忽略mysql库的同步
忽略mysql库的同步,请使用: stop slave sql_thread; change replication filter replicate_ignore_db=(mysql);
- Processing入门指南
简介 Processing 是由 MIT 媒体实验室的 Casey Reas 和 Benjamin Fry 发明的一种开源可视化编程语言.Processing为数字媒体与娱乐交互设计而创建,其目的是通 ...
- vue组件 $children,$refs，$parent的使用
如果项目很大,组件很多,怎么样才能准确的.快速的寻找到我们想要的组件了?? 1)$refs 首先你的给子组件做标记.demo :<firstchild ref="one"&g ...
- Object.prototype.toString的应用
使用Object.prototype上的原生toString()方法判断数据类型,使用方法如下: Object.prototype.toString.call(value)1.判断基本类型: Obje ...
- JoinQuant策略代码示例
总体回测前 ''' ================================================================================ 总体回测前 === ...
- Vue 恢复初始值的快速方法
vue 中经常定义很多data ,在用户进行一些操作后,需要讲data中的某个对象定义为初始值 例如 form: { title: '', describe: '', inspectionCatego ...
- nginx负载均衡集群（二）
nginx负载均衡配置实战 一.配置基于域名虚拟主机的web节点 web02和web01做同样的操作,nginx配置文件如下: [root@web01 conf]# cat nginx.conf wo ...
- Why I get “No connection associated with this command”?