CSS实用笔记（二）
em、rem、vm、vw分别如何计算尺寸的？
em：相对长度单位，通常是所继承字体大小的倍数，如果未设置字体大小，则为浏览器默认字体大小的倍数。
rem：相对长度单位，根元素(html节点)字体大小的倍数，不设置时为浏览器默认字体大小倍数。
vm：相对于视口的宽度或高度中较小的那个。
vw：窗口宽度的百分比，1vw默认为视窗宽度的1%。类似的有vh,窗口高度的百分比。
颜色有几种写法？透明色如何表示？透明效果如何实现？currentColor如何来用？
- 颜色关键字：
color: blue; - 十六进制值：
color: #ffffff - RGB：
color: rgb(224,176,77);（三个字母分别表示色相、饱和度、亮度，基于rgb值得来） - HSL：
color: hsl(276,100%,85%); - RGBA&HSLA：A是阿尔法通道，代表颜色的透明度
- 透明色可以设置阿尔法值为0或者使用transparent关键字（透明色只能设置背景色为透明，元素本身不是透明的，透明色和元素透明度是不同的）
- currentColor关键字：如果你想设置当前元素颜色和所继承的父元素颜色一样时，使用currentColor。
- Opacity属性：设置整个元素为透明
CSS 中calc是什么？
通常用于计算，例如实现一个footer 固定底部的效果：
注：cslc(100% - 90px)中空格不能省
为什么不能轻易的使用height: 100%;
如果元素要使用height: 100%，其父元素必须显示去指明一个高度，若父容器的height也为100%，那么其父父容器必须指明高度，否则元素高度不会被撑开。
CSS样式的来源
- 使用不同选择器设置的样式
- 浏览器默认样式（user agent stylesheet）
- 继承的样式（inherited form xxx）
权重：用户设置样式 > 浏览器默认样式 > 继承的样式
什么是CSS继承？哪些属性能继承，哪些不能？
通过 CSS 继承，子元素将继承最高级元素所拥有的属性如设置body{font-family:Verdana;}，不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。而比如p不想继承高级元素body的字体属性，只需要针对自身的特殊规则，如p{font-family:Times}，即可摆脱父元素的规则,这就是CSS继承。
继承属性：color、font-size、font-family、font-style、letter-spacing、white-spacing、text-decoration、text-align、text-indent等。
非继承属性：display、height、width、padding、border、margin、min-width、max-width、min-height、max-height、background、overflow、position、float、clear、top、right、bottom、left、vertical-align等。
注：inherit关键字可用于继承性/非继承性属性。
CSS的权重如何计算
- 最高权重为添加
!important - Specificity 特异性
| 分数 | 条件 |
|---|---|
| 1000 | +1/在style属性内或在<style>标签内 |
| 100 | +1/每个出现的ID选择器 |
| 10 | +1/每个出现的类，伪类或属性选择器 |
| 1 | +1/每个元素选择器或伪元素 |
注：通用选择器(*), 组合选择器 (+, >, ~, ' ') 和 (:not) 对特异性没有影响。
如果特异性形同或都是!important，那后声明的规则会被应用。
我们来看个例子：如下代码中大家好3个字的样式是，原因？
结果：粉色，14px
权值计算：
1、#msg：0,1,0,0=100;
2、#content p: 0,1,0,0+0,0,0,1=101;
3、.container .box p: (0,0,1,0)*2+0,0,0,1=21;
4、p#msg: 0,0,0,1+0,1,0,0=101;
2和4权值相同，即取得{color: blue; font-size: 14px;}和{color: pink; }这两个属性，未冲突的样式都会生效，冲突的样式采取后来居上原则。
所以上例最终结果为{color:pink;font-size:14px;}
盒模型有哪些属性？
内容区：
width,height,min-width,max-width,min-height,max-height边框：
border,border-top,border-right,border-bottom,border-left内边距：
padding,padding-top,padding-right,padding-bottom,padding-left外边距：
margin,margin-top,margin-right,margin-bottom,margin-left
下图中问题如何解决？
可见代码中并没有给任何元素设置外边距margin，所以图中缝隙都为浏览器默认外边距（问题二中的缝隙涉及到外边距合并）。
解决：在<style>标签中使用* {margin: 0;} 清除浏览器默认外边距。
合并外边距
- 父子关系合并：
图中<main>和<h1>是父子关系，<main>如果没有border没有padding就会产生外边距合并。可以理解为如果没有一条线拦在<main>和<h1>中间那么这两个元素就会发生外边距合并，如何解决：
方案一
方案二
-
相邻元素的合并
相邻元素外边距合并，外边距最终取两者margin的最大值。
相邻元素外边距合并
-
元素自身外边距合并
当元素本身没有内容，padding，border，height时，自身的上下外边距产生合并。
元素自身外边距合并
什么是标签的默认样式？列举几个带默认样式的标签，并写出默认样式的属性-值
为了没有样式表也能正常显示，浏览器都有自己的一套默认样式，不同的浏览器和不同版本的浏览器的默认样式都不相同。
部分带默认样式的标签：
a{color:-webkit-link;text-decoration:underline;}- h1-h6：
font-size依次为2em,1.5em,1.17em,1.12em,0.83em,0.75em，且默认font-weight为bolder。 - p与h4默认字号相同。
-
:link,:visited,:focus{text-decoration:underline;} body{ margin: 8px; }html, body, div,form,h1, h2, h3, h4, h5, h6, ol, p, ul { display: block; unicode-bidi: embed ;}li{ display: list-item; }
box-sizing: border-box； 是什么意思？
box-sizing 用于更改用于计算元素宽度和高度的默认的 CSS 盒模型。
box-sizing: border-box；使元素的宽度等于元素的内容区宽度加左右内边距宽度和左右边框的宽度，元素的高度等于内容区高度加上下内边距宽度和上下边框的宽度。
维度计算：
width = 左右border + 左右padding + content width
height = 上下border + 上下padding + content height
inline-block有什么作用？inline-block的缝隙是怎么回事？如何解决
inline-block表现为行内元素但是拥有块元素设置宽高的特性,又保留了行内元素不换行的特点。
有缝隙的原因：inline-block水平呈现的元素间，标签之间会有换行，Tab或字符之间的空格，最后导致呈现的元素之间产生了缝隙。
解决方案：
- 给父元素设置 font-size: 0，在 inline-block 元素上重新设置 font-size。
- 设置margin值为负
- 设置inline-block元素letter-space值为0，其父元素letter-space值为负值
- 去掉HTML中标签段之间的空格或用注释代替空格
通用解决办法：不要设置 inline-block，使用 float 或 flex。
用垂直方向的PADDING来实现等比缩放的盒子
固定图片百分比是一个针对响应式布局很有效的方案，尤其是在移动端，可以说是一个刚性需求。简单来说，就是根据容器的宽度，按照宽高比例自动计算出容器的大小，并且让容器内的如img等子元素自适应宽高。
解决方案
图片父容器宽度100%，父容器的高度百分比为：100*3 / 4 = 75% ; 图片absolute并且完全铺满父容器。
