关闭

css 浮动及定位

442人阅读 评论(0) 收藏 举报
分类:
<!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>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:87379次
    • 积分:1791
    • 等级:
    • 排名:千里之外
    • 原创:101篇
    • 转载:30篇
    • 译文:2篇
    • 评论:4条
    最新评论