1. em、rem、vh、vw 分别如何计算尺寸的？

• em 1em = 默认字体大小的倍数(比如不设置时是字体是20px，那2em 就是40px)
• rem 1rem = 根元素(html 节点)字体大小的倍数。IE8 及以下不支持 rem， Tips:caniuse.com查询兼容性。
• 1vw = 1% 视口宽度,
• 1vh = 1% 视口高度

2.css 中calc是什么？

是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

3. 颜色有几种写法?透明色如何表示?透明效果如何实现？currentColor如何来用?

• 颜色关键字

a {
  color: white;
  background-color: blue;
}

• 十六进制值

p {
  background-color: #e0b0ff;
}

• RGB

p {
  background-color: rgb(224, 176, 255);
}

• HSL

p {
  background-color: hsl(276, 100%, 85%);
}

• RGBA & HSLA

p {
  background-color: rgb(224, 176, 255, .5);
}

p {
  background-color: hsla(240, 100%, 50%, 0.5);
}

2. 透明色: rgba(255 ,255,255, .5) a表示透明度,取值范围0-1。
3. Opacity 注意 （设置在父元素上 opacity 会影响到其后代元素。）

p {
  opacity: .5;
  background-color: rgb(224, 176, 255);
}

4. currentColor如何来用?
   表示和当前元素的color一样的颜色

  <div class="box">box
    <span class="child">child</span>
  </div>

  <style>
    .box {
      color: red;
    }
    .child {
      border: 4px solid currentColor;
    }

  </style>

4.下图所示的代码和效果中，为什么 h1 的字体大小没变化? 为什么 a 的颜色没变化?

image.png

对于Web开发者来说，样式来源分为三种，优先级从上到下：

1. 使用不同的选择器设置的样式
2. 浏览器默认样式 (user agent stylesheet)
3. 继承的样式 (Inherited from xxx)

我们先用Chrome浏览器检查一下元素h1

image.png

image.png

• 通过这两张图，我们发现h1其实字体变小了，而不是没变，第一张图，我们根据上面所说的原则，h1的字体应该是浏览器默认样式，h1=32px。到了第二张图，按照上面的原则，我原本以为字体应该是不变，因为浏览器还是按照默认样式，但是大家注意了，浏览器默认样式中，h1=2em,虽然h1不会继承div的字体12px,但是默认字体改变了，由原来的16px(浏览器默认字体大小，记住就好。)变为12px,所以h1就变为24px。
• a标签就好说了，根据上面原则，a标签采用第二种为浏览器默认样式，所以颜色不变。

5.盒模型有哪些属性？

• 基础属性

1. width
2. height
3. padding
4. border
5. margin

• display
• box-sizing
  box-sizing 用于更改用于计算元素宽度和高度的默认的 CSS 盒模型。

1. box-sizing: content-box 默认值

.box {
  width: 300px;
  border: 10px;
}

渲染出来的盒子宽度为 320px

2. box-sizing: border-box

.box {
  width: 300px;
  border: 10px;
  padding: 10px;
  box-sizing: border-box;
}

渲染出来的盒子宽度为 300px

• 其他相关属性

  1. outline
     如果你看到被选中的 <a> <input><button>
     周围有一圈黄或蓝色的外框，就是 outline 了，可以通过设置 outline: 0
     或 outline: none
     去除。
  2. overflow
     overflow 用于控制内容溢出包含它的块状元素时的显示方式。overflow-x 和 overflow-y 分别用于控制水平溢出和垂直溢出。
  • visible默认值显示溢出的内容
  • hidden 内容被裁剪且不会出现滚动条
  • scroll 内容被裁剪但出现滚动条
  • auto 由浏览器决定

6. 什么是标签的默认样式？列举几个带默认样式的标签，并写出默认样式的属性-值

每种浏览器都有一套默认的样式表，即user agent stylesheet，在写网页时，没有指定的样式，按浏览器内置的样式表来渲染。

body{ 
  display:block;
  margin:8px;
}

h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

h2 {
    display: block;
    font-size: 1.5em;
    -webkit-margin-before: 0.83em;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

h3 {
    display: block;
    font-size: 1.17em;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

a:-webkit-any-link {
    color: -webkit-link;
    cursor: auto;
    text-decoration: underline;
}

p {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

ol {
    display: block;
    list-style-type: decimal;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

dl {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

li {
    display: list-item;
    text-align: -webkit-match-parent;
}

dd {
    display: block;
    -webkit-margin-start: 40px;
}

7. 列举display 的几个值

8. 块级元素和行内元素分别有什么特点？分别列举二者对应的标签

块级元素列表

行内元素列表

可变元素素列表--可变元素为根据上下文语境决定该元素为块元素或者内联元素

二、行内元素与块级函数的三个区别
1.行内元素与块级元素直观上的区别
行内元素会在一条直线上排列，都是同一行的，水平方向排列
块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

3.行内元素与块级元素属性的不同，主要是盒模型属性上

行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

9.box-sizing: border-box； 是什么意思

.box {
  width: 300px;
  border: 10px;
  padding: 10px;
  box-sizing: border-box;
}

渲染出来的盒子宽度为 300px

10.inline-block有什么作用？inline-block的缝隙是怎么回事？如何解决

• 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
• inline-block 之间有空格、Tab、换行符。
  给父元素设置 font-size: 0，在 inline-block 元素上重新设置 font-size。

11.回答如下截图中的两个问题

image.png

• 浏览器的默认样式造成的

image.png

image.png

*{
margin:0;
padding:0;
}

参考资料：
calc()
块级和行内元素
inline-block
inline-block常见问题