HTML和CSS的面试题（3）

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

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

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

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

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

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

(3):inline-block 元素

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

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

2、什么是外边距重叠？重叠的结果是什么？

外边距重叠就是 margin-collapse。

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

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

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

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

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

3、rgba()和opacity的区别。

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

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

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

垂直方向：line-height

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

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

5、如何垂直居中一个浮动元素。

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

}

6、如何垂直居中一个img ？

方法一：<img>的容器

.img-container{

display: table-cell;

vertical-align: middle;

text-align: center;

}

方法二：方法二

.img-container{

display: flex;

justify-content: center;

align-items: center;}

7、px 和 em 的区别。

px 和 em 都是长度单位，区别是，px 的值是固定的，指定是多少就是多少，计算比较容易。em 得值不是固定的，并且 em 相对于当前字体大小改变，若自身没有字体大小，则继承祖先元素的字体大小。

浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: 1em=16px。

8、Sass、LESS 是什么？大家为什么要使用他们？

是 CSS 预处理器。他是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成

CSS。

优势：

结构清晰，便于扩展。

减少了重复代码的编写，增加了变量等的功能

可以方便的屏蔽浏览器私有语法差异。

可以轻松实现多重继承。

完全兼容CSS代码，可以方便地应用到老项目中。less只是在CSS语法上做了扩展，所以老的CSS代码也可以与less代码一同编译。

9、CSS 中 link 和@import 的区别是？

Link 属于 html 标签，而@import 是 CSS 中提供的

在页面加载的时候，link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS ,@import 只有在 ie5 以上才可以被识别，

 link 是 html 标签，不存在浏览器兼容性问题

Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）

10、简介盒子模型。

CSS 的盒子模型有两种：IE 盒子模型、标准的 W3C 盒子模型模型

盒模型：内容、内边距、外边距（一般不计入盒子实际宽度）、边框