<!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>
682
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
