前端学习笔记-3-定位的一些小问题

一、对子绝父相的理解：

1、子绝父相是什么：

子绝父相指子级采用绝对定位，父级采用相对定位。

2、为什么要子绝父相：

首先，子级要避免占有位置，可以放到父级中的任意位置，且不影响其他兄弟盒子。

其次，子级要实现绝对定位要求拥有特定定位属性的父级。

最后，父组件在定位时要求占有特定位置，需要使用相对定位

结论：相对定位经常用于作为绝对定位的父级。

代码实现：

<templete>

<div class="father">//父级盒子
    <button class="son"><button>//子级元素
</div>

</templete>

<style>

.father{
  position:relative;//父级相对定位
}

.son{
  position:absolute;//子级绝对定位
}

</style>

3、个人理解子绝父相：

当需要制作的组件中有元素会产生重合时，需要使用一个盒子包裹这些元素，这些元素使用绝对定位完成定位，而外部盒子需要为这些元素提供绝对定位的参照物，于是将外部盒子设置为相对定位，表示该组件所在位置，保证与其他组件不重合，达到原有预期。

二、元素居中的方法：

1、不为绝对定位的元素：

使用margin-left:auto实现水平方向居中。

使用margin-top:auto实现竖直方向居中。

参照物：相对拥有相对定位的父级或页面大小定位

2、拥有绝对定位的元素：

使用left：50%；margin-left：-xxpx（xx表示子级宽度的一般）

公式：相对左边界位移=父级元素宽度的一半-子级元素宽度的一半

竖直方向同理

参照物：相对拥有相对定位的父级或页面大小定位

三、定位的一些特性：

1、行内元素：

行内元素添加绝对或者固定定位，可以直接设定宽度和高度。

2、块级元素：

块级元素添加绝对或者固定定位，不设定宽度和高度，则块级元素的宽度和高度为内容的宽度和高度，即获得包裹性。

3、外边距塌陷问题：

1、什么是外边界塌陷：

外边界塌陷，是指两个并列的拥有padding的元素会使交界处的padding重叠，两个元素内容的间距变为较大者的padding值而非两者相加。

2、解决方案：

浮动元素、绝对定位或固定定位都不会引起外边界塌陷的问题。

4、浮动定位与绝对定位的一些小区别：

1、浮动定位：

浮动定位时，块级元素只会遮盖行级元素在标准流中的盒子，不会遮盖行级元素中的内容。

2、绝对定位（固定定位）：

绝对定位（固定定位）时，块级元素会遮盖下面标准流中的所有内容。

3、根本原理：

浮动定位使用时，默认含有文字环绕效果，而绝对定位（固定定位）不含。