css ico box-sizing 单行不换行省略

趁着周末空闲时期，下面给大家分享一下技术积累

1.overflow：

这个属性相信大家都不陌生，如果是对块级元素设置，那么他就会撑起父元素，尤其是大家写浮动的时候可以使用到

如果是对内联元素设置，那么超出部分就会隐藏，下面还有些属性可以与之搭配会有出其不意的效果，原谅我卖个关子。

2.ico

相比大家都会对自己设计的网页的顶部那个图标都有些想法，大家是否想要付诸于行动呢？

换图标方法：只需要加上下面的标签就可以了，注意：href：“”是你图片的路径，并且图片只能是ico格式的。

         <link rel="icon" type="image/x-icon" href="favicon.ico"/> 

3.不知道大家有没有遇见过这个诡异的情况，如果设置了margin-top，会导致父元素整体移动。

解决方案：①：给父容器设置边框

                          ②：改用padding

  ③：使用一个占位元素，将其位置挤下来。

4.background和background-size：

如果先设置了background-size，后设置background-，则会覆盖background-size

解决方案就是 两者位置互换   （……）

5.box-sizing：

border-box：如果设置了padding，内容往里面挤

内容的宽度：width - padding - padding-right

元素的宽度：width

content-box：如果设置了padding，内容往里面撑

内容的宽度：width + padding + padding-right

元素的宽度：width

6.注意项：对于页面上一些没有交互的小图片尽可能使用css解决

7：sass中 &

& 符号在 sass 中的意义用编程思维来理解就是 this 的意思，如果你不懂任何编程语言也没关系，你可以理解为 & 就代表它的父级元素，更通俗的说法就像是圣旨，

它下面 {} 里包起来的规则就和他它父级说的话起到同样的效果。

8.所有的元素都有一些系统默认的属性，这些属性包含属性名和属性值，我们可以对元素添加自定义的属性，属性名任意写，但不能和系统属性名相同属性不区分大小写，所有的属性值只能是字符串，无论是系统还是自定义。
<div id="box" class="huadian" userName="meng">华点软件学院</div>
<button id="btn">提交</button>
（4）html5规定给元素自定义设置数据属性时，属性名称以data开头，但是真正的属性名不包括data
Eg：data-student 属性名称：student
使用jquery设置数据：$(ele).data({student:”张三})
拿出数据：$(ele).data(“student”)

使用在存储数据效果很好

9.Replace：使用replace替换不会在原数组上进行，这时我们需要使用新变量进行接收

10.这个就是那个神秘的方法：单行不换行出现省略

使用方法如下：

white-space: nowrap;//不换行
overflow: hidden;//超出部分隐藏
text-overflow: ellipsis;

注意：这三者缺一不可！

如果是多行呢？

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;