css优先级、元素隐藏、居中浮动、清除浮动、画三角形、页面渲染过程、继承

1、CSS优先规则

1：最近的祖先样式比其他祖先样式优先级高。"直接样式"比"祖先样式"优先级高。
2：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
3：权重大的优先级高，标签的权重为1，class的权重为10，id的权重为100，如果权重相同，则最后定义的样式会起作用。
4：属性后插有!important的属性拥有最高优先级。

2、隐藏元素

opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件；
visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件；display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。

3、如何居中一个浮动元素？

对于浮动元素，设置其左右外边距为 auto 是无效的。
1、向右推移50%，然后在平移自身宽度的一半
{float:left ;margin-left: 50%;transform: translateX(-50%)}
2、在浮动元素外面再嵌套一层div（浮动元素有宽度）
#out{width:200px;宽度和浮动元素一样height:200px;margin:0 auto;}
#ins{float:left ;width:200px;height:100px;}
3、在浮动元素外面再嵌套一层div（浮动元素无宽度）
#out{float:left;position:relative;left:50%;}
#ins{float:left ;position:relative;right:50%;}

4、如何清除浮动？

因为对子盒子使用了float浮动，所以子盒子产生了浮动，导致父盒子不能撑开或margin padding设置值不能正确显示。
1、对父级设置适合的CSS高度；
2、在父盒子最后加一个div，设置样式{clear:both;}
3、父盒子设置样式overflow:hidden;

5、画一个三角形？

.a{  width: 0;
     height: 0;
     border-width: 100px;
     border-style: solid;
     border-color: transparent #0099CC transparent transparent;
     transform: rotate(90deg); /*顺时针旋转90°*/}
<div class="a"></div>

6、页面渲染html的过程？

1.浏览器解析html源码，然后创建一个 DOM树。并行请求 css/image/js在DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是 documentElement，对应的是html标签。
2.浏览器解析CSS代码，构建CSSOM树。对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < html中的style。
3.DOM Tree + CSSOM --> 渲染树（rendering tree）。DOM树完全和html标签一一对应，但是渲染树会忽略掉不需要渲染的元素，比如head、display:none的元素等。渲染树中的每一个节点都存储有对应的css属性。
4.一旦渲染树创建好了，浏览器就可以根据渲染树直接把页面绘制到屏幕上。

7、继承的几种方式及优缺点？

1）原型链继承：
主要利用sub.prototype=new super，这样连通了子类-子类原型-父类。
核心：将父类的实例作为子类的原型。
特点：非常纯粹的继承关系，实例是子类的实例，也是父类的实例；父类新增原型方法/原型属性，子类都能访问到。
缺点：来自原型对象的引用属性是所有实例共享的，即属性没有私有化，原型上属性的改变会作用到所有的实例上。
2）构造函数继承：
在构造子类构造函数时内部使用call或apply来调用父类的构造函数
核心：使用父类的的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）。
优缺点：实现了属性的私有化，但是子类无法访问父类原型上的属性。
特点：解决了子类实例共享父类引用属性的问题；创建子类实例时，可以向父类传递参数；可以实现多继承（call多个父类对象）。
缺点：实例并不是父类的实例，只是子类的实例；只能继承父类的实例属性和方法，不能继承原型属性/方法；无法实现函数复用，每个子类都有父类实例函数的副本，影响性能。
3）组合继承：
利用构造函数和原型链的方法，可以比较完美的实现继承。
特点：可以继承实例属性/方法，也可以继承原型属性/方法；既是子类的实例，也是父类的实例；不存在引用属性共享问题；可传参；函数可复用。
缺点：调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）。
4）寄生继承：
核心：通过寄生方式，砍掉父类的实例属性，这样在调用两次父类的构造时，不会初始化两次实例方法/属性。
特点：使用到了Object.create(Fu.prototype)实现原型链的浅拷贝。
优点：解决了原型链继承和构造函数继承的缺点。