2019/10/9 前端积累

1.用css创建一个三角形。

{
     width: 0;
     height: 0;
     margin: 100px auto;
     border-top: 50px solid transparent;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid red;
}

四个三角形组成的正方形，哪个有颜色就是哪个朝向。

---

2.使用link和@import有什么区别

1.   从属关系的区别：link属于XHTML标签，而@import是CSS提供的语法规则，link除了加载CSS，还可以定义RSS，定义rel连接属性等，@import就只能加载CSS。

2.   加载顺序的区别：页面加载时，link会同时被加载，而@import引用的CSS会等页面被加载完后再加载。

3.   兼容性的区别：@import只有IE5以上才能被识别，而link是XHTML标签，无兼容问题。

4.   DOM可控性区别：通过js操作DOM,可以插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import方式插入样式

---

3.在页面上隐藏元素的方法

占位:

• visibility: hidden;
• margin-left: -100%;
• opacity: 0;
• transform: scale(0);

不占位:

• display: none;
• width: 0; height: 0; overflow: hidden;

仅对块内文本元素:

• text-indent: -9999px;
• font-size: 0;

---