面试遇到的问题

目录

一.什么是外边距重叠？重叠的结果是什么？

二.rgba(）和opacity的区别 

三. css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？

四.如何垂直居中一个浮动元素

五.如何垂直居中一个img ？

---

一.什么是外边距重叠？重叠的结果是什么？

外边距重叠就是 margin-collapse。

折叠外边距 :在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。

折叠结果遵循下列计算规则：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。

两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。

两个外边距一正一负时，折叠结果是两者的相加的和。

二.rgba(）和opacity的区别 

opacity作用于元素，以及元素内的所有内容的透明度(元素会继承其属性)

而rgba()只作用于元素的颜色或其背景色(设置rgba透明的元素的子元素不会继承透明效果

三. css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？

垂直方向：line-height

水平方向：letter-spacing 增加或减少字符间距。

可用于消除 inline-block 元素间的换行符空格间隙问题。

四.如何垂直居中一个浮动元素

方法一：.child{

  height: 100px;

position: absolute;//父元素相对定位

top:50%;

left:50%;

transform: translate(-50%,-50%);

}

方法二：.child{

width: 100px;

height: 100px;

position: absolute;

top:50%;

left:50%;

margin-top: -50px;

margin-left: -50px;

}

方法三：child {

width: 100px;

height: 100px;

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto

}

五.如何垂直居中一个img ？

方法一：<img>的容器

.img-container{

display: table-cell;

vertical-align: middle;

text-align: center;

}

方法二：方法二

.img-container{

display: flex;

justify-content: center;

align-items: center;}