您的位置：首页 > Web前端 > CSS
css 浮动及定位

2016-08-28 23:36 218 查看
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航