css 浮动及定位

原创 2016年08月28日 23:36:35
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		/*
		 
		 * 1 文档流(normal flow)
		 * 		在标准情况下 块级元素独占一行显示 行内元素在一行上显示
		 * 
		 * 2 浮动(float)
		 * 		用法:float:left|right
		 * 		特点:
		 * 			1 设置的浮动的元素 不占原来的位置(脱离标准流)
		 * 			2 可以让块元素在一行上显示
		 * 			3 给一个元素设置了浮动 那么会影响该元素后面的元素
		 * 			4 浮动(脱标)会实现模式的转换
		 *		应用:
		 * 			1 浮动最初就是为了实现问题img/img4的环绕效果
		 * 			2 制作网页导航
		 * 			3 网页布局(div+css)
		 *		清除浮动: 指 清楚浮动的影响
		 * 			1  使用clear属性清除浮动 clear:left| right |both
		 * 			2 给父元素设置 overflow:hidden
		 * 			3 浮动的元素的直接父元素调用clearfix(推荐) 
		 *					//使用为元素清除浮动
		 *  				.clearfix:after{
		 *						content:"";
		 * 						height:0;
		 * 						line-height:0;
		 * 						display:block;
		 * 						clear:both;
		 * 						visibility:hidden;  //隐藏
		 * 				}
		 * 				.clearfix{
		 * 					zoom:1;  //兼容其他浏览器
		 * 				}
		 * 		什么时候清除浮动?
		 * 			1 父元素的高度为0
		 * 			2 父元素中的子元素都设置了浮动
		 * 
		 * 3 css初始化
		 * 		CSS初始化:默认给html标签设置默认值
		 * 
		 * 4 Overflow的用法
		 * 		1 overflow:hidden 将超出盒子部分的内容隐藏
		 * 		2 overflow:scorll 添加滚动条
		 * 		3 overflow:auto 自适应
		 * 
		 * 5 定位(position) : 定位的元素常与具体的方位名称配合使用 left  top  right  bottom
		 * 	分类:
		 * 		1 静态定位(static)
		 * 			页面中的标准流下的盒子,都是静态定位的盒子	
		 * 		2 绝对定位(absolute) (看脸型)	---- 脱标------ 不占位 ----- 实现模式转换
		 * 			1 父元素没有设置定位,子元素设置绝对定位,子元素是以浏览器左上角为基准设置定位。
		 * 			2 父元素设置了定位,子元素设置绝对定位会以父元素左上角为基准设置定位
		 * 			3 元素设置了绝对定位后,该元素不占位置(脱离标准流)
		 * 			4 绝对定位可以实现模式转换
		 * 		3 相对定位 (relative) (自恋型)---- 未脱标------ 占位 ----- 不能实现模式转换
		 * 			1 如果一个元素设置了相对定位,那么该元素会以自己原来的位置为基准设置定位
		 * 			2 设置了相对定位的元素,该元素占位置(没有脱标)
		 * 			3 设置了相对定位的元素,不能实现模式转换
		 * 			4 一般情况下,设置子绝父相
		 * 		4 固定定位(fixed) 				---- 脱标------ 不占位 ----- 实现模式转换
		 * 			1 设置了固定位的元素 只会看浏览器的左上角
		 * 			2 设置了固定位的元素 脱离了标准流 不占位置
		 * 			3 固定定位的元素实现了模式转换
		 * 
		 * */	
			
		</style>
	</head>
	<body>
	</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

关于CSS浮动与绝对定位的个人感悟,看完这篇文章能得到很多相关问题的解释

个人经过千辛万苦从网上搜索资料,现总结关于CSS浮动与绝对定位的相关知识,相信一定能解决您在进行网页布局是遇到的一系列问题!!!!!...

CSS布局——元素浮动与定位篇

一、元素浮动(float) 定义:浮动是基于CSS现代Web设计用到的主要功能之一,它可以用来创建多列的网页布局。 1、属性值:none(不浮动)、left(向左)、right(向右) 注:fi...

HTML&CSS精选笔记_浮动与定位

浮动与定位 元素的浮动 元素的浮动属性float 什么是浮动? 元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制,移动到其父元素中指定位置的过程。 如何定义浮...

css浮动与定位

浮动与定位的实例,以及实际出现的问题

css之浮动与定位

浮动与定位

精通css(3) 盒模型,定位,浮动

终于到了css最重要的3个部分:盒模型,定位,浮动。先讲盒模型吧。 1.盒模型概述 页面上的每个元素都被看成一个矩形框。这个框由元素的内容、内边距、边框和外边距组成。 内边距、边...

CSS重点之定位和浮动

CSS重点之定位和浮动

CSS浮动与定位(一)

浮动 规则CSS允许浮动任何元素,使用float属性来实现。浮动元素会从正常流中删除,不过他仍然会影响到布局。 首先要明确任何浮动元素都会生成一个块级框,不论这个元素本身是什么。浮动元素会从正常流中...
  • ck1n9
  • ck1n9
  • 2016年12月11日 19:43
  • 125

(4)CSS定位和浮动

一、CSS的定位改变元素在页面上的位置1.CSS定位机制普通流:元素按照其在HTML中的位置顺序决定排布的过程 浮动: 绝对布局:2.CSS定位的属性 属性 描述 position ...

css的定位和浮动

定位浮动 float代码 #d0,p{ width: 400px; border: 1px solid red; ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css 浮动及定位
举报原因:
原因补充:

(最多只允许输入30个字)