关于HTML+css的面试题及答案（2）

21. 行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？

(1):块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

(2):内联元素(inline)特性：

宽度(width)、高度(height)、内外边距的上下都不可设置，内外边距的左右可设置，其大小就是里面文字或图片的大小。

(3):inline-block 元素

拥有内在尺寸，可设置高宽,但不会自动换行

<input> 、<img> 、<button> 、<texterea> 、<label>。

22:什么是外边距重叠？重叠的结果是什么？

外边距重叠就是 margin-collapse。

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

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

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

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

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

23:rgba()和opacity的区别

opacity作用于元素，以及元素内的所有内容的透明度(元素会继承其属性)
而rgba()只作用于元素的颜色或其背景色(设置rgba透明的元素的子元素不会继承透明效果)

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

垂直方向：line-height

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

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

25:如何垂直居中一个浮动元素

方法一：.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;

         l