定位/布局

CSS常用属性

定位（position）

一、静态定位（static）

static：静态位置属性
注意：元素没有脱离文档流，为默认值。

二、相对定位（relative）

relative：参照自身文档流中的位置进行偏移
注意：自身不脱离文档流，定位后原来的位置不会被其他元素所占据。

三、绝对定位（absolute）

absolute：参照离自身最近的定位祖先元素进行定位。
注意：定位后元素脱离文档流，位置被其他元素所占据，元素大小有默认百分之百变为内容大小（默认无外边距）

三、固定定位（fixed）

fixed：参照视图窗口进行定位
注意：元素自身脱离文档流，原来的位置被其他元素所占据，元素有原来默认宽度百分之百；变为内容大小；尽可量小。

• top 目标元素距离视图窗口顶部 如果小于0 则 往上走
• bottom 目标元素距离视图窗口底部 如果小于0 则 往下走
• left 目标元素距离视图窗口左边 如果小于0 则 往左走
• right 目标元素距离视图窗口右边 如果小于0 则 往右走

布局

（一）display

display：改变元素的显示方式

• none ：隐藏对象
• inline ：内联元素
• block ：块元素
• inlien-block ：内联块元素
• run-in ：根据上下文来决定是内联还是块级元素
• flex： 弹性伸缩盒
• inline-flex： 内联块级弹性伸缩盒

（二）float

float：浮动

• left 左浮动

float: left;

• right 右浮动

float:right;

注意：浮动后，元素本身脱离文档流，原来的位置被其他元素所占据。
浮动规律：1）找到元素在布局中的起始位置
                   2）沿自身水平方向进行浮动，如果水平方向不够，自动换到下一行

清除浮动
常用的清除浮动方法：

1. 在最后一个浮动元素下面加一个元素，使用 clear：both 清除浮动

clear: both;

2. 给父元素加固定高度
3. 伪元素清除浮动：给父元素加伪元素清除浮动

eg：div::after{
      content:'';
      display:block;
      clear：both;
  }

（三）visibility 是否显示

visile：设置对象可视
hidden： 设置对象隐藏

（四）overflow 内容溢出

visible ：不做处理
hidden：隐藏溢出的内容
scroll ：隐藏溢出的内容，溢出的内容以滚动条的方式呈现
auto：当内容没有溢出的时候不出现滚动条，当内容溢出的时候出现滚动条