css中的float和position
1.float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title> <style>
body{
border-style:solid;
border-size:3px;
}
.div1{
width:100px;
height:100px;
background-color:red;
float:left;
}
.div2{
width:100px;
height:100px;
background-color:green;
float:left;
}
.div3{
width:200px;
height:200px;
background-color:gray;
}
</style>
</head>
<body>
<!
目的：如何在一行显示多个div元素
--正常文档流：将元素（标签）在进行排版布局的时候按着 从上到下 从左到右的顺序排版的一个布局流
脱离文档流：将元素从文档流中取出，进行覆盖，其他元素会按文档流中不存在该元素重新布局
float：浮动,最好用float，如果有文本，会被挤出去。对于文本来说是不完全文档流
position:absolute fixed定位（完全脱离）
-->
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clear</title> <style>
.div1{
width:100px;
height:100px;
background-color:red;
float:left;
}
.div2{
width:100px;
height:100px;
background-color:green;
float:left;
}
.div3{
width:200px;
height:200px;
background-color:gray;
clear:both;
}
</style>
</head>
<body>
<!--clear就是清除float元素，可以设置左右两边不能有浮动元素-->
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
2.position
fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position</title> <style>
.div1{
height:1500px;
background-color:green;
}
.div2{
height:1500px;
background-color:yellow;
}
a{
position:fixed;
bottom:20px;
right:20px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<!--position:absolute fixed 定位（完全）-->
<a >返回顶部</a>
</body>
</html>
css中的float和position的更多相关文章
- [转][译]关于CSS中的float和position和z-index
原文:http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取 ...
- [译] 关于CSS中的float和position
原文 http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取 ...
- css中的定位属性position（转）
css中的定位属性position 同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...
- 关于CSS中的float可能出现的小问题
关于CSS中的float可能出现的小问题 前言:最近学习CSS的float所遇到点小问题,然后顺便分享给大家. 一.什么是CSS以及float (一) CSS概述 CSS是层叠样式表(英文全称:Cas ...
- 如何理解css中的float
最近一段时间一直在为一个即将上线的新站进行一些前端开发.自然,对CSS的使用是必不可少的了.我们在CSS 中很多时候会用到浮动来布局.常见的有 float:left 或者 float:right .简 ...
- CSS中盒子模型和position（一）
今天遇到几个css中的重要的知识点,记得这些都是以前看过的:margin.padding.border和position.可是用起来还是有很多的问题,以前自己看过去总是懒得记录,等到用起来了都不知道自 ...
- css 中 的 float :left 和 clear :both
float:left;(左浮动)他使得指定元素脱离普通的文档流而产生的特别的布局特性.并且FLOAT必需应用在块级元素之上,也就是说浮动并不应用于内联标签.或者换句话来说当应用了FLOAT那么这个元素 ...
- css中的float属性以及清除方法 (2011-09-03 17:36:26)
CSS里面的浮动属性是布局的常用工具,只有真正了解它并熟练使用才能将它的优点发挥到极致. 许多页面中都有文字绕图效果,并且各区块分布得错落有置,很多朋友在自学CSS布局时为了做出这些效果往往会被div ...
- CSS中常见的位置(position)属性
常用的位置属性列表: position(top.bottom.left.right) .overflow.z-index position用法: 值 描述 relative 相对定位,原位置仍占用空间 ...
随机推荐
- 关于JavaScript日期类型处理的总结
在任何一门开发语言中,对日期时间类型的处理,必不可少也非常重要,长期以来对于JS的日期类型处理较为苍白.在这里做一个浅显的总结. Date 对象用于处理日期和时间.Date 对象用于处理日期和时间.D ...
- [SVN服务器搭建] 在myecplise下使用的 tortoise1.9 64位 跟 subversion1.9的服务器使用
由于在公司经常用到SVN服务器,所以自己也想搭建在本机上面搭建一个SVN服务器玩玩,废话不多说,下面直接贴出来如何搭建的. 一.tortoise1.9 64位下载 直接百度下载即可,百度时候需要显示 ...
- css雪碧图（css splite）
将很多小的背景图片放在一起,可以减少http请求. 这些图片通常是一类的. 所以使用雪碧图. 雪碧图即为: 测试一下减少了多长时间 0 = 0
- Java常用类（四）之数组工具类Arrays
前言 数组的工具类java.util.Arrays 由于数组对象本身并没有什么方法可以供我们调用,但API中提供了一个工具类Arrays供我们使用,从而可以对数据对象进行一些基本的操作. 一.Arra ...
- Anaconda Error opening file for writing ， failed to create anacoda menu等报错问题解决方案
安装anaconda的时候可能会遇到这个报错, 原因可能是:路径不允许有空格 此外发生报错failed to create anacoda menu, 解决方案 进入 cmd,找到你安装的位置(我的是 ...
- Vue-cli安装教程
第一步:安装vue-cli npm install vue-cli -g -g :代表全局安装.如果你安装时报错,一般是网络问题,你可以尝试用cnpm来进行安装. 检测是否安装成功:可以用vue -V ...
- 剑指offer（一）
面试题3:二维数组中查找 题目描述: 在一个二维数组中,每一行都按照从左往右递增地顺序排序,每一列都按照从上往下递增的顺序排序.请完成一个函数,输入这样的一个数组和一个整数,判断数组中是否存在该整数. ...
- POJ 3468 A Simple Problem with Integers（树状数组区间更新） 续
这个题刚开始的时候是套模板的,并没有真的理解什么树状数组的区间更新,这几天想了一下,下面是总结: 区间更新这里引进了一个数组delta数组,delta[i]表示区间 [i, n] 的共同增量,每次你需 ...
- Elasticsearch集群调优
系统调优 禁用swap 使用swapoff命令可以暂时关闭swap.永久关闭需要编辑/etc/fstab,注释掉swap设备的挂载项. swapoff -a 如果完全关闭swap不可行,可以试着降低s ...
- font-size:100% 原因
The browser default which is something like 16pt for Firefox, You can check by going into Firefox op ...