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 相对定位,原位置仍占用空间 ...
随机推荐
- 测试中出现ERROR StatusLogger No log4j2 configuration file
概述 在hibernate框架搭建完成用log4j2进行测试时,总是出现ERROR StatusLogger No log4j2 configuration file found. Using def ...
- Taffy自动化测试框架简介
Taffy Taffy是基于nosetests的自动化测试框架. Taffy主要用来测试后台服务(包括且不限于Http, Dubbo/hessian, Webservice, Socket等类型接口) ...
- 使用clone
1.继承Cloneable接口 2.重写clone方法 3.在clone方法中调用super.clone() 4.把浅复制的引用指向原型对象新的克隆体
- (原创)（三）机器学习笔记之Scikit Learn的线性回归模型初探
一.Scikit Learn中使用estimator三部曲 1. 构造estimator 2. 训练模型:fit 3. 利用模型进行预测:predict 二.模型评价 模型训练好后,度量模型拟合效果的 ...
- JAVA基础知识总结：一
一.软件开发的常识 1.什么是软件? 一系列按照特定顺序组织起来的计算机数据或者指令 常见的软件: 系统软件:Windows\Mac OS \Linux 应用软件:QQ,一系列的播放器(爱奇艺,乐视, ...
- 关于CSS 的position定位问题
对于初学者来说,css的position定位问题是比较常见的.之前搞不清楚postion定位是怎么回事,排版一直歪歪斜斜的,老是排不好 css的定位一般来说,分为四种: position:static ...
- LeetCode 566. Reshape the Matrix （重塑矩阵）
In MATLAB, there is a very useful function called 'reshape', which can reshape a matrix into a new o ...
- ES6 class的继承使用细节
ES6 class的继承与java的继承大同小异,如果学过java的话应该很容易理解,都是通过extends关键字继承. class Animal{ constructor(color){ this. ...
- Linux驱动模型解析bus之platform bus
这是内核启动之后要调用的驱动模型的开始代码: drivers/base/init.c/** * driver_init - initialize driver model. * * Call the ...
- poj 3484 Showstopper
Showstopper Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 2236 Accepted: 662 Descri ...