居中定位
- text-align:center; 让元素的文本内容和行内子元素居中 ,不能让块级子元素居中
- margin:0 auto; 让块级元素自身居中
静态定位
元素默认的定位方式
特点: 元素以左上为基准,行内元素从左向右依次排列, 块级元素从上往下依次排列,一般情况下不能实现元素层叠效果. 通过外边距控制元素的位置
格式: position:static;
相对定位
特点: 元素不脱离文档流(不管元素显示到什么位置都占着原来的位置),通过left/right/top/bottom控制元素的位置, 让元素相对于初始位置做偏移.
应用场景: 当需要对某个元素位置进行调整,并且不影响其它元素时使用
格式:
position: relative; //当将块的position属性设置为relative时，与设置为absolute完全不同，这时子块是相对于他原本的位置定位，无论是否进行移动，其所占的位置仍然留有空位，后面的无定位块元素不会移动上来，因此，移动元素会导致覆盖其它框。若相对本身向上或向左的话要设置top，left为负值。绝对定位
特点: 元素脱离文档流(不占原来的位置) ,通过left/right/top/bottom控制元素的位置,让元素相对于窗口(默认)或某一个上级元素做偏移,如果需要相对于某一个上级元素则必须把上级元素改成相对定位作为参照物.
应用场景: 当需要实现层叠效果,让元素以页面中某一个上级元素为参照物时使用绝对定位
格式: position:absolute
- /*设置为绝对定位, 元素脱离文档流,后面的元素会顶上来*/
- position: absolute;
固定定位
特点: 元素脱离文档流, 通过left/right/top/bottom控制元素的位置,让元素相对于窗口做位置偏移.
应用场景: 当需要让某个元素固定在窗口某个位置时使用.
格式: position:fixed;
right: 20px;浮动定位
特点: 元素脱离文档流, 从当前所在行向左或向右浮动, 当撞到上级元素边缘或其它元素时停止
浮动元素一行装不下时会自动折行, 折行时有可能被卡住.
当某个元素的所有子元素全部浮动时, 元素自动识别的高度为0,后面的元素会顶上来并且会把文本内容挤到旁边位置显示, 通过给元素添加overflow:hidden解决此问题
应用场景: 当需要将纵向排列的元素改成横向排列时使用.
格式: float:left/right;