前端知识点总结三

61. 对单向数据流的理解

1. v-bind实现数据model到视图view的单向数据流，当model中数据改变时，视图view展示新数据，但当在view中改变数据，并不能实现model中的数据的改变，当再次刷新页面，页面view显示的依旧是原来model中数据

2. 组件间单向数据流的理解：

   当使用porps进行父子组件通信时，数据总是从父组件传到子组件，子组件原则上不能修改该数据

   • 当传的数据为数值时，在子组件中修改了该数据时，控制器会发出警告，多个子组件使用的数据互不影响
   • 当传的数据为数组或对象时，在子组件中修改了该引用数据时，此时该修改影响着其他子组件对父组件数据的使用

   解决方案：

   • 当传的数据为数值时，接收数据后声明新变量进行赋值

   • 当传的数据为数据或对象时，接收数据后声明新变量进行解构赋值

62. Vue中如何做样式穿透

1. :scoped属性的作用-----加上scoped后，样式只对当前的组件有用，实质是给当前子组件的结构中都添加上一个data-v-xxxx自定义属性，Vue是通过属性选择器，给需要添加的元素添加上样式，例如h3[data-v-7ba5bd90]

2. 子组件的根标签（拥有父组件当中自定义属性：一样的），如果子组件的根节点，和父组件中书写的样式相同，也会添加上相应的样式。

3. 如果父组件的样式(scoped),而且还想影响到子组件的样式，像这种情况我们可以使用深度选择器。

4. 深度选择器可以实现样式穿透

   • 原生css：>>>
   • less：/deep/
   • scss：::v-deep

63. src和href的区别

1. 作用结果不同

   • href用于在当前文档和引用资源之间确立联系

   • src用于替换当前内容

2. 浏览器解析方式不同

   • 浏览器会识别带有href属性的文档为css文件，然后并行下载资源，不会停止对当前文档的处理。这也是为什么建议使用link方式加载css，而不是使用@import方式
   • 浏览器解析src时，会暂停其他资源的下载和处理，直到该资源加载、编译、执行完成。这也是为什么建议把js脚本放在底部而不是头部的原因

3. 请求资源不同

   • href表示超文本引用，用来建立当前元素和文档之间的链接，常在标签：link、a中使用
   • 请求src资源时会将其指向的资源下载并应用到文档中，常在标签：script、img、iframe中使用

64. 行内(内联)元素和块元素的区别

1. 块元素会占据整行，块与块之间垂直方向排列；行内元素不会占据整行，行内元素之间水平方向排列

2. 块级元素里面可以放块元素和行内元素；行内元素里面不能放块元素

3. 块元素可以设置width、height、padding、margin；行内元素不能设置width、height、padding-top、padding-bottom、margin-top、margin-bottom都不可改变

4. 行内块元素有哪些

   input、img、button、textarea、label

5. 行内元素和块元素的相互转换

   行内→块：display：block

   块→行内：display：inline

65. 对position的理解

1. 为了某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子，或滚动窗口时，盒子是固定在屏幕某个位置的，出现了position定位

2. 分类

   static：

   • 静态定位
   • 默认定位方式，不脱标

   relative：

   • 相对定位
   • 相对于原来的位置进行定位，不脱标

   absolute：

   • 绝对定位
   • 相对于最近一级的祖先元素来定位，都无则以浏览器的文档为准，脱标

   fixed：

   • 固定定位
   • 相对于浏览器可视窗口为参照来定位，脱标

   inherit：

   • 继承父元素的position属性值

   sticky：

   • 相当于相对定位和固定定位的结合，ie不支持
   • 以浏览器的可视窗口为参照点移动，不脱标

   定位的特殊性：

   1. 绝对定位和固定定位也和浮动类似
      • 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
      • 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小
      • 脱标的盒子不会触发外边距塌陷：浮动元素、绝对定位、固定定位元素的都不会触发外边距合并的问题
      • 绝对定位、固定定位会完全压住盒子：浮动元素不同，只会压住它下面的标准流的盒子，但是不会压住下面的标准流的盒子里面的文字（图片），但是绝对定位、固定定位会压住下面标准流所有的内容，浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕的效果的。文字会围绕浮动元素

66. 边界塌陷

1. 兄弟/父子设置上下边距，理论上是两者之和，结果只显示一者的值，这种现象就是边界塌陷

   浮动和定位的元素不会产生边界塌陷，只有块级元素在垂直方向上才会产生margin合并

   兄弟出现合并值：

   • margin同为整数，或同为负数，取的是绝对值大的数
   • margin一正一负，求两者的和

   父子塌陷解决方案：

   • 父元素：调整内边距、overflow：hidden
   • 子元素：display：inline-block、浮动、定位

67. 兼容性问题

1. 示例：

   1. 浮动后IE6解释外边距为实际边距的双倍
      • 解决方法：+display：inline
   2. IE6下图片下方会有空隙
      • 解决方法：img元素上+display：block，或者img元素上+vertical-align：top|bottom|middle|text-bottom
   3. IE6下两个层中间有空隙
      • 设置右侧idv也同样浮动float：left，或者相对IE6定义margin-right：-3px

69. link和@import的区别

1. 原理不同

   link是html中的标签，要写在html文件中

   @import是css中的语法规则，需要写在css区域里

2. 加载顺序不同

   link引入的css文件会按照顺序正常被加载

   @import引用的css文件，等整个页面加载完成后才会加载

3. 兼容性不同

   link标签没有兼容性，任何浏览器都可以识别

   @import是css2.1提出，IE5+才能识别

4. 权重不同

   @import的权重高于link

5. DOM操作不同

   使用javascript控制DOM改变样式时，只能使用link标签，DOM不可控制@import

70. JS原生事件如何绑定

1. 在DOM元素中直接绑定

2. 在JavaScript代码块中获取元素直接绑定

   特点：注册事件的唯一性

   同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数

3. 在JavaScript代码块中获取元素绑定事件监听函数

   特点：同一个元素同一个事件可以注册多个监听器

   按注册顺序依次执行监听函数

   存在兼容性问题，IE9之前不支持