一些前端的坑

一、绝对定位盒子的居中

通常对于盒子进行水平居中，在默认标准流或者相对定位情况下，采取margin：auto。进行定位。

在设置绝对定位后这样情况会失效，需要采取新的方法去设置：

第一种：利用自身宽度进行居中，即margin值和定位进行计算。利用left或right移动父级的50%，再利用margin的left或right移动自身宽度的一半即可（或者可以利用css3动画移动实现）。

div {
            position: absolute;
            width: 100px;
            height: 100px;
            left: 50%;
            margin-left: -50px;
            transform: translateX(-50%); 
            /* 和margin的设置同理 */
}

 

第二种：设置margin为auto，left与right值相等，top和bottom值相等。

 

div {
            position: absolute;
            width: 100px;
            height: 100px;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
}

注意：left和right的值不能超过其相对元素width减去它自身width的一半，否则绝对定位元素会优先取left值进行定位(前提是文档流是从左向右)，但是top和bottom的值却没有这个限制。

 

css中的空元素有：1、br；2、hr；3、img；4、input；5、link；6、meta；7、area；8、command。css规定每个元素都有display属性，且每个元素都有默认的display值。