常见问题

px, em, rem 的区别

• px : 固定单位，像素。在缩放页面时无法调整那些使用它作为单位的字体、按钮等的大小；
• em : 相对单位， 值不固定的，会继承父级元素的字体大小，代表倍数；
• rem : 相对单位， 值不固定的，始终是基于根元素(html)的，也代表倍数

盒模型

W3C 标准中padding、border所占的空间不在width、height范围内；
IE盒模型中width包括“content尺寸+padding+border”。

• IE盒模型

D889D700-0A44-4602-82E4-53CC5FA36FDE.png

• W3C盒模型

  
  C638EE88-4111-4837-9821-D68E88CCCFDD.png

*{ box-sizing: border-box;}

*{ box-sizing: border-box;} 作用是告诉浏览器当前使用的是IE盒模型，设置的边框（border）和内边距（padding）值是包含在width和height内的。

line-height: 2和line-height: 200% 的区别

这两个都表示行高是字体大小的 2 倍， 他们的区别主要体现在子元素继承时， 如下所示：

• line-height: 2 行高是2倍的文字大小，均以相应的字体为基准。也就是说父元素设置line-height: 2 会直接继承给子元素， 子元素会根据自己的 font-size 再去计算子元素自己的行高（继承倍数）；
• line-height: 200% 行高是2倍的文字大小，文字大小是指父元素中设定的字体大小。父元素设置line-height: 200%是计算好了line-height 值（多少px）， 然后再把这个值继承给子元素，不随子元素的font-size改变（继承具体像素的行高值） 。

CSS sprite

原理：把多个小icon合成一个大的图片，使用的时候，元素以这张合成后的大图为背景，通过设置background-position的属性来获取指定icon。

优点：合并原来图片的请求，减少http的性能消耗。
缺点：CSS sprite不能太大，不然下载图片的时间会过长。

应用：

1. 制作一张网页的图标。
2. 制作动画。

让一个元素"看不见"有几种方式？有什么区别?

常规：
display:none;
visibility:hidden;
opacity:0;

其他(以下消失都是有前提条件的)：
height:0;width:0;padding:0;margin:0;border:0; ... etc
position:absolute; left:1000000px; top:100000px; ...etc;
z-index:-1000;...etc
background-color:rgba(0,0,0,0);
总结： 元素"看不见"的方式主要方式让元素用户在当前页面展示的视口里看不见。

区别

• opacity: 0; 透明度为0， 整体，仍旧会占据空间， 只是看不到，绑定的事件还是会触发
• visibility: hidden;和opacity: 0类似，只是看不见， 但是实际依旧存在，利于SEO优化。如果父元素应用了 visibility: hidden ，则它的所有子元素也都会不可见，但是可以通过给子元素设置 visibility:visible 来让子元素可见。visibility:hidden;的元素绑定的事件不会触发
• display：none;从文档流消失， 不占位置，对浏览器来说不存在， 还存在DOM树中,它但是不利于SEO。如果父元素应用了display：none;， 则它的所有子元素也都会不可见。display：none 绑定的事件不会触发
• background-color: transparent;只是背景色透明

CSS 继承

什么是CSS继承

每个 CSS 属性定义的概述都指出了这个属性是默认继承的 ("Inherited: Yes") 还是默认不继承的 ("Inherited: no")。这决定了当你没有为元素的属性指定值时该如何计算值。
当元素的一个继承属性 （inherited property）没有指定值时，则取父元素的同属性的计算值 。只有文档根元素取该属性的概述中给定的初始值。
通俗的讲就是当 Inherited: Yes 时 ， 子元素可以继承父元素的属性，即被包在内部的标签可以继承外部标签的样式。

• 所有元素可继承： visibility和cursor
• 内联元素可继承：
  letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
• 块状元素可继承：text-indent和text-align
• 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image
• 表格元素可继承：border-collapse
• 不可继承的：
  display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi

---

常见样式写法

inline-block 特性及如何去除缝隙

inline-block特性

• 默认不占据一行
• 设置的上下padding、margin、border占据文档空间
• 水平排列按照base-line对齐，且元素之间会存在一个'空'元素的缝隙
• 可以用vertical-align设置垂直对齐，比如 设置vertical-align: top； 可以让 inline-block 元素顶端对齐
• 可以设置text-align属性有效
• 会形成一个BFC(块级格式化上下文)。

总结：一个拥有正常盒模型的行内元素，既拥有inline的特点，也有block的特性

去除缝隙

产生缝隙的原因是：回车、换行或者多个空格都会被浏览器当作一个空白字符。因此， 我们只要把空白字符去掉就可以了。

1. 去除HTML中的空格

  <span class="box">
  hello</span><span class="box">
  hello</span>

或者是：

 <span class="box">hello</span
    ><span class="box">hello</span>

又或者是：

  <span class="box">hello</span><!--消除缝隙
  --><span class="box">hello</span>

2. 父元素设置font-size:0。将父容器的font-size 设为0，这样空白字符大小为0 了， 自然就没有缝隙了。

.wrap{
  text-align: center;
  font-size: 0;
}
.box{
  border: 1px solid;
  width: 100px;
  display: inline-block;
  font-size: 16px
}

• 标签不闭合，但是此时不能为inline-block元素设置width属性（设置了会换行）

<span class="box">hello
<span class="box">hello</span>

或者：

<span class="box">hello
<span class="box">hello

3.元素设置浮动

文本溢出

单行文本溢出加 ...

{ white-space: nowrap;  /* 禁止文字自动转行   */
  over-flow: hidden;  /*   溢出后隐藏 */
 text-overflow: ellipsis;  /* 文本溢出之后加 ···*/

多行文本溢出加 ...

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;  // 这里的 3 是可以根据需要改变的，这里代表只显示3行。超出就会溢出
  overflow: hidden;

用 CSS 实现一个三角形

思路：

• 将div的宽高设置为0 ；
• 然后分别设置上右下左边框（粗一些）；
• 最后将不需要的颜色改为transparent（透明）或跟背景色一样的颜色

CSS代码如下：

.triangle{
  width: 0;
  height: 0;
  border-top: solid 30px transparent;
  border-right: solid 30px blue;
  border-bottom: solid 30px transparent;
  border-left: solid 30px transparent;  
}

或者这样写：

.triangle {
  border-color: transparent blue transparent  transparent;
  border-style: solid;
  border-width: 30px 30px 30px 0;
  height: 0px;
  width: 0px;
}

效果如下：

970FF355-062B-4D5F-8897-77F8C74C1E1B.png

变换字母大小写 ： text-transform && font-variant

text-transform: uppercase
text-transform: lowercase
text-transform: capitalize
font-variant: small-caps 
/* font Variant用于将字体变成小型的大写字母（即与小写字母等高的大写字母 */

image.png

禁止自动换行

 white-space: nowrap; 

用图片替换文字

有时我们需要在标题栏中使用图片，但是又必须保证搜索引擎能够读到标题，CSS语句可以这样写：

　h1 { 
　　　　text-indent:-9999px; 
　　　　background:url("h1-image.jpg") no-repeat; 
　　　　width:200px; 
　　　　height:50px; 
　　}

CSS提示框

当鼠标移动到链接上方，会自动出现一个提示框

<a class="tooltip" href="#">
    链接文字 
   <span>提示文字</span>
</a>

a.tooltip {
  position: relative
}
a.tooltip span {
  display: none;
  padding: 5px;
  width: 200px;
}
a:hover {
  background: #fff;
}
a.tooltip:hover span {
  display: inline;
  position: absolute;
}

参考：

• 去除inline-block元素间间距的N种方法

• CSS元素隐藏“失效”以其妙用