. 浮动布局
1.1 特点
1）加了浮动的标签会超出文档流，不占页面位置；
2）浮动的排列优先级比正常文本流排列方式高；
3）非浮动块级元素在浮动元素后面产生重叠时，该块级元素在浮动元素下显示，只有内容不在浮动元素下
1.2 参数
1）float:left; 左浮动
2）float:right; 右浮动
3）float:none; 不浮动
4）float:inherit; 从父元素继承
1.3 清除浮动
1）给其父元素设置一个高度
2）给父元素加上overflow:hidden;
3）给浮动元素后面添加一个同级的.clear
<style>
.clear{
clear:both;
}
</style>
<body>
<div class="clear"></div>
</body>
1.4 clear参数
1）clear:left；在左侧不允许浮动元素
2）clear:right;在右侧不允许浮动
3）clear:both;在左右两侧不允许浮动
4）clear:none;默认值，允许两侧浮动
5）clear:inherit;规定应该从父元素继承clear属性的值
单行文字超出
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;-
多行文字超出
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; 数字为行数
-
position 定位 一个元素盖在一个元素可用定位
-
相对定位 relative
不会脱离文档流
不管你怎么设置位置 他原先所占的位置 一直都在
如果给元素设置margin的时候 依旧会影响正常文档流的排列
只想对其本身做移动 不影响其他元素 但是元素设置margin会影响
-
绝对定位 absolute
- 会脱离文档流
- 谁有relative 谁就是参考点 向上查找 如果其父元素 设置了相对定位 则其父元素为参照物 如何没有 不断向上查找 知道找到其设置相对定位的祖先元素 如果祖先元素没有 则以body为参照物
- 不能以祖先元素的兄弟元素参照我 必须是直系祖先元素
- 如果不止一个祖先元素设置了相对定位那么就以最近的元素为参照物
-
fixed 固定定位
会脱离文档流
直接以窗口为参照物
不管窗口 怎么滚 他都是以固定的位置存在
-
