前端面试题之CSS(二)

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;
}

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

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);
}

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

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

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

  box
    child

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

image.png

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

使用不同的选择器设置的样式
浏览器默认样式 (user agent stylesheet)
继承的样式 (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.盒模型有哪些属性？

基础属性

width
height
padding
border
margin

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

box-sizing: content-box 默认值

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

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

box-sizing: border-box

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

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

其他相关属性
1. outline
  如果你看到被选中的
- 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 的几个值

此元素将显示为块级元素，此元素前后会带有换行符。

inline

默认。此元素会被显示为内联元素，元素前后没有换行符。

此元素会根据上下文作为块级元素或内联元素显示。

table

此元素会作为块级表格来显示（类似），表格前后带有换行符。

inline-table

此元素会作为内联表格来显示（类似），表格前后没有换行符。）。）。）。）。）。）

）
table-row-group	此元素会作为一个或多个行的分组来显示（类似
table-header-group	此元素会作为一个或多个行的分组来显示（类似
table-footer-group	此元素会作为一个或多个行的分组来显示（类似
table-row	此元素会作为一个表格行显示（类似
table-column-group	此元素会作为一个或多个列的分组来显示（类似
table-column	此元素会作为一个单元格列显示（类似
table-cell	此元素会作为一个表格单元格显示（类似	和	）
table-caption	此元素会作为一个表格标题显示（类似
inherit	m规定应该从父元素继承 display 属性的值。

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

块级元素列表


	定义地址

定义表格标题
	定义列表中定义条目
	定义文档中的分区或节
	定义列表
	定义列表中的项目
	定义一个框架集
	创建 HTML 表单
	定义最大的标题
	定义副标题
	定义标题
	定义标题
	定义标题
	定义最小的标题
< hr >	创建一条水平线
	元素为 fieldset 元素定义标题
	标签定义列表项目