css的浮动与定位

• 显示与隐藏

标签	属性	值	效果	区别
css的style	display	none	元素不可见	不占页面空间
css的style	visibility	hidden	元素不可见	占页面空间

• display的三个属性值显示效果

属性	值	效果
display	inline	显示为内联元素
display	block	显示为块级元素
display	inline-block	显示为行内块级元素

• overflow内容溢出

属性	值	效果
overflow	visible	可见
overflow	hidden	隐藏
overflow	scroll	滚动
overflow	auto	自动（最优）

• float浮动

属性	值	效果
float	none	不浮动
float	left	向左浮动
float	right	向右浮动

• 子元素浮动不能超出父元素的范围

• 兄弟元素设置相同浮动效果时，会自动进行排列，排列超出页面最大宽度会自动换行

• 兄弟元素前一个未设置浮动，而后一个设置，后面元素浮动不能超过前面兄弟元素

• 高度塌陷

• * 块级元素高度 = 所有子元素高度 + padding + border

• * 由于没有给父级元素设置高度 ，当子级元素设置浮动时 ， 脱离了文档流 ， 导致父级元素高度丢失效果称为高度塌陷

• * 高度塌陷问题解决 —— 开启BFC （block formatting context）块级格式化上下文环境

•     * BFC特性：

•         - 文档流中的元素不会被浮动的元素所覆盖

•         - 子元素设置外边距时，不会传递给父元素

•         - 元素可以包含浮动的子元素

•    * 怎样开启BFC：

•         - 设置浮动（float）

•         - 设置元素显示为行内块级元素（inline-block）

•         - 将元素内容溢出设置为非visible值（hidden）

•         - 设置元素为绝对定位（position）

•         - 在所有子元素后设置一个子元素，并设置clear属性为both

• position

属性	值	定位位置 （相对偏移量）	效果说明
position	static	默认	静态定位
position	absolute	top/right/bottom/left	绝对定位
position	relative	top/right/bottom/left	相对定位
position	fixed	top/right/bottom/left	固定定位

• 区别

类型	是否脱离文档流	情况描述
绝对定位	√	1.父级为body，相对于页面 2.父级不为body，父级未开启定位，子级相对于页面 3.父级不为body，父级开启定位，子级相对于父级
相对定位	X	相对于元素本身位置，与父级无关
固定定位	√	相对于页面，一种特殊的绝对定位