浮动、定位随堂笔记

一、浮动

浮动框可以向左或向右移动，直到外边缘碰到包含框或另一个浮动框边框为止。

float:left：左浮动；float:right：右浮动；clear:both：清除浮动；

img{float:right}

同级元素要统一都是浮动

清除浮动方法：

1》父级元素后加元素：<div style=”clear:both”></div>

2》父级元素加::after{display:block;content:” ”;clear:both}

3》overflow:hidden

 二、显示

display:规定元素应该生成的框的类型
display:block;块级元素显示div
display:inline;内联元素显示span
display:inline-block;行内块元素
display:flex;弹性盒子
display:none元素隐藏

三、定位

position: static(默认，没有定位);   fixed（绝对定位，相对浏览器）;   relative（相对定位，相对正常位置）;   absolute（绝对定位，相对不是static的父元素定位）;

fixed（根据窗口定位）和absolute（用的比较多）是不占据空间的，fixed不设置top，是相对于原来位置显示

top:规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

 

left:规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。

 

right:规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。

 

bottom:规定元素的底部边缘。该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移。

 

z-index:设置元素的堆叠顺序（当默认成0时是不显示的）