居中相关
- text-align:center; 让元素的文本内容居中, 让元素里面的行内元素自身和行内块元素自身居中
- margin:0 auto; 让块级元素自身居中
元素定位
- 静态定位
- 相对定位
- 绝对定位
- 固定定位
- 浮动定位
静态定位
- 默认的定位方式, 也称为文档流定位
- 格式: position:static
- 特点: 元素以左上为基准,块级元素从上往下依次排列, 行内元素从左向右依次排列 ,无法实现层叠效果
- 如何控制元素的位置? 通过外边距
相对定位
- 格式: position:relative
- 特点: 可以实现层叠效果, 元素不脱离文档流(不管元素显示到什么位置 仍然占着原来的位置)
- 如何控制元素的位置? 通过left/right/top/bottom让元素相对于初始位置做偏移
- 应用场景: 当需要移动某个元素而其它元素不受影响时使用(元素位置微调)
绝对定位
- 格式: position:absolute
- 特点: 可以实现层叠效果, 元素脱离文档流(不占原来的位置)
- 如何控制元素的位置? 通过left/right/top/bottom让元素相对于窗口或某一个上级元素做位置偏移,如果需要相对于某个上级元素,必须给上级元素设置为相对定位
- 应用场景: 当需要网页面中添加一个元素, 这个元素不影响其他元素的显示位置时使用绝对定位
固定定位
- 格式: position:fixed;
- 特点: 元素固定在窗口的某个位置, 元素脱离文档流