WEB——03元素定位
居中相关
- text-align:center让元素的文本内容居中, 让元素里面的行内元素自身和行内块元素自身居中
- margin:0 auto; 让块级元素自身居中
元素定位
- 静态定位
- 相对定位
- 绝对定位
- 固定定位
- 浮动定位
静态定位
- 默认的定位方式,也称为文档流定位
- 格式: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解决
-
应用场景: 当需要将纵向排列的元素改成横向排列时使用
显示层级z-index
- 当元素修改定位方式时,会出现元素层叠的问题, 通过z-index可以控制层叠的元素谁显示在上面 谁显示在下面
- 必须改了定位方式之后z-index样式才会生效
- z-index值越大显示层级越靠前
溢出设置Overflow
- visible(默认): 超出部分显示
- hidden: 超出部分隐藏
- scroll: 超出部分滚动显示