Web-定位方式

定位方式

• 静态定位

• 相对定位

• 绝对定位

• 固定定位

• 浮动定位

静态定位

• 静态定位又称为文档流定位

• 格式: position:static; 默认的定位方式

• 特点: 元素以左上为基准, 块级元素从上往下排列, 行内元素从左向右依次排列,通过外边距控制元素的位置. 默认无法实现层叠效果

相对定位

• 格式: position:relative;

• 特点: 元素不脱离文档流(不管元素显示到什么位置仍然占着原来的位置), 通过left/right/top/bottom让元素相对于初始位置做偏移

绝对定位

• 格式:position:absolute;

• 特点:元素脱离文档流(不占原来的位置), 通过left/right/top/bottom让元素相对于窗口(默认)或某一个上级元素做偏移.

固定定位

• 格式: position:fixed;

• 特点: 元素脱离文档流,通过left/right/top/bottom让元素相对于窗口做偏移,元素会固定在窗口的某个位置.

浮动定位

• 格式:float:left/right;

• 特点: 元素脱离文档流, 从当前所在行向左或向右浮动, 当撞到上级元素或其它浮动元素时停止移动.

• 浮动元素一行装不下时会自动折行, 折行时有可能被卡主

• 当元素的所有子元素全部浮动时,自动识别的高度为0 , 后面元素会顶上来,如果元素中包含文本,文本会被挤出去, 最终导致显示异常, 通过给元素添加overflow:hidden 解决此问题

• 当需要将纵向排列的元素改成横向排列时使用浮动定位

溢出设置overflow

• visible显示(默认)
• hidden隐藏
• scroll 滚动显示

行内元素垂直对齐方式vertical-align

• top上对齐
• middle中间对齐
• bottom下对齐
• baseline基线对齐