CSS入门(2)
em、rem、vm、vw 分别如何计算尺寸
- px：相对长度单位，像素，是相对与显示器分辨率而言的。
- em：相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
- rem：相对长度单位。r’是“root”的缩写，相对于根元素<html>的字体大小。
-
vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。
1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。 - vmin和vmax：关于视口高度和宽度两者的最小值或者最大值。
颜色有几种写法?透明色如何表示?透明效果如何实现？currentColor如何来用?
- 颜色的写法一般有四种。分别为：颜色关键字，如：bule。十六进制，如： #e0b0ff；RGB，如：rgb(224, 176, 255)；HSL值，三个字母分别表示色相、饱和度、亮度，基于rgb值，如：hsl(276,100%,50%)。
- 透明色用RGBA&HSLA表示，如 p {background-color: rgb(224, 176, 255, .5);}，
p { background-color: hsla(240, 100%, 50%, 0.5);}，A为Alpha,即透明度。 - currentcolor：表示和当前元素的color一样的颜色。
css 中calc是什么？实现一个footer 固定底部的效果，附上预览链接
calc,即calculate，是CSS里的运算，写为height/width:calc(),括号内为一个数学表达式，表达式可以与加减乘除这四个运算符组合,以此得出一个终值。
链接
如下代码中，饥人谷3个字的样式是
图中饥人谷应为粉色 14px
根据权值计算：1.#msg { color: red; font-size: 16px; } 100分；
2.#content p {color: blue; font-size: 14px;} 101分；
3..container .box p {color: yellow; font-size: 18px;} 21分
4.p#msg {color: pink; } 101分。
又根据就近原则，所以为粉色 14px。
下图所示的代码和效果中，为什么 h1 的字体大小没变化? 为什么 a 的颜色没变化?
h1的大小和a的颜色未发生变化，因为h1标签的大小和a标签的颜色有浏览器的默认属性，而.box规定的属性属于继承属性，其权值小于默认属性，h1的默认属性为2em，所以图中大小为24px，而a的颜色默认为蓝色。
盒模型有哪些属性？
- border：border-top, border-right, border-bottom, border-left
- margin：margin-top, margin-right, margin-bottom, margin-left
- padding：padding-top, padding-right, padding-bottom, padding-left
- width，height：min-width, max-width，min-height,max-height
什么是标签的默认样式？列举几个带默认样式的标签，并写出默认样式的属性-值
浏览器对某些元素设置有默认样式，为了没有样式表也有一个规范的样式。
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;
}
a:-webkit-any-link {
color: -webkit-link;
cursor: auto;
text-decoration: underline;
}
body {
display: block;
margin: 8px;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
按要求实现效果:元素class 为 box，宽度400px，高度500px，边框2px、实线、#ccc，背景色为红色
在浏览器居中展示，上边距为40px
效果图
回答问题。
出现图中两处的原因是body有默认的margin，为8px，h1标签也有默认的上下margin。解决方法是规定*{margin：0；} 或body,h1 {margin: 0;}
列举display 的几个值
- block： 元素生成块元素框。
- inline： 该元素生成一个或多个内联元素框。
- table：这些元素的行为像tableHTML元素。它定义了一个块级框。
- inline-block：该元素生成一个块元素框，它将与周围的内容一起流动，就像它是一个单行内框（表现得像被替换的元素一样）
- list-item：容纳内容和单独的列表行盒的块状盒
- flex：元素的行为类似于块元素，并根据flexbox模型布局其内容。
块级元素和行内元素分别有什么特点？分别列举二者对应的标签
块级元素默认占一行高度，宽度占满父元素宽度，可以对块级元素设置width、height、margin、padding，块级元素可以包含其他块级元素和行内元素；<p>比较特殊，只能包含行内元素。
行内元素不会换行，宽度由自身的内容决定，不能设置width和height，对于margin和padding只在设置水平方向有用，垂直方向没有用，行内元素可以包括其他行内元素和数据。
块级元素：<div>、<h1>~<h6>、<p>、<header>、<main>、<footer>、<table>等等
行内元素：<a>、<img>、<span>等等
box-sizing: border-box； 是什么意思
在CSS中，你设置一个元素的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。
box-sizing 可以被用来调整这些表现:
content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。
inline-block有什么作用？inline-block的缝隙是怎么回事？如何解决
inline-block是一个块状行盒，表现为一个行内元素，它既拥有了块状元素可以设置width和height的特性，又保留了行内元素不换行的特点。比如之前做横向菜单栏时可以用li和float实现，现在也可以用display:inline-block;实现。
有缝隙的原因：inline-block水平呈现的元素间，标签段之间换行显示或空格分隔的情况下会有间距，这是符合规范的应有表现。
解决方法：
1.去掉HTML中标签段之间的空格或用注释代替空格
2.设置margin值为负
3.去掉inline-block元素的闭合标签
4.设置inline-block元素letter-space值为0，其父元素letter-space值为负值
