[无名弟子]粟帅斌|2019年12月03日的日报-技能树.IT修真院

发表于： 2019-12-03 15:46:16

1 1022

今天完成的事：算是彻底把angular任务写完了，开始进行复盘了

明天要完成的事：学习之前忘了的一些写法比如input和lable的绑定，开始js的复习和深入

难题：

lable和input绑定之后在使input消失：display：none的情况下 input是如何获取到焦点的？？？

后面发现虽然不能主动冒泡但是可以通过其他的绑定或者子元素冒泡到

收获：

文档流的概念

文档流是文档中可显示对象在排列时所占用的位置。

将窗体自上而下分成一行行显示，并在每行中按从左到右的顺序排放元素的效果，就是文档流直观的表现。

浮动，脱离文档流

通过使用浮动属性，可以使元素脱离文档流，上浮到文档流之上，随后可以改变其位置的现象。

清除浮动的原理：一共是2类一类是使用clear属性clear：both。另一类是触发BFC块级格式化上下文：

BFC的特性

.内部的Box会在垂直方向上一个接一个的放置。
2.垂直方向上的距离由margin决定
3.bfc的区域不会与float的元素区域重叠。
4.计算bfc的高度时，浮动元素也参与计算
5.bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

块级格式化上下文会阻止外边距叠加
块级格式化上下文不会重叠浮动元素
块级格式化上下文通常可以包含浮动

我用BFC用的多些

float 除了none以外的值 overflow

除了visible 以外的值（hidden，auto，scroll ）

display (table-cell，table-caption，inline-block)

position（absolute，fixed）

fieldset元素

margin重叠的解决办法：

触发bfc是一种：设置定位和浮动，设置overflow：visible；或者display：inline-block

或者是使用padding和border使渲染时2个margin都生效;

margin重叠后出现的margin大小为：

2个之间大的那个

如果有一个为负数则相加后剩下那个值；

如果两个margin值都为负数，则取这两个负margin值中绝对值最大的那个负margin值为准；

居中：

行内元素居中

水平的话：text-align：center；

垂直：line-height等于高度

vertical-align这个要和line-height一起用

块级元素：

display：flex；

或者position：absolute；然后margin设为auto，其他设为0

高度已知的情况下，也可以用父元素的padding来做

相对定位也行不过我用的很少

4种浏览器内核：

(1)Trident内核

(2)Gecko内核

(3)WebKit内核

(4)Blink内核

浏览器的渲染机制：

浏览器的渲染原理：浏览器会解析HTML标签生成DOM Tree，解析CSS生成CSSOM，然后将DOM Tree和CSSOM合成生成Render Tree，元素在Render Tree中对应0或多个盒子，然后浏览器以盒子模型的信息布局和渲染界面。而设置为display:none的元素则在Render Tree中没有生成对应的盒子模型，因此后续的布局、渲染工作自然没它什么事了，至于DOM操作还是可以的。

如果前端需要seo优化的的话可以考虑微格式：

https://blog.csdn.net/tianxintiandisheng/article/details/102528648

盒模型：

通过box-sizing:border-box;来切换到之前的ie盒模型

和标准盒子的区别：

content是否包括padding和margin准确的说是内容的长度和宽度是否包括padding和margin的长宽；

另外盒模型中的padding和margin的各自特点要记牢

元素的显示和隐藏以及颜色的透明度

1.rgba是什么：

RGB（Red（红色） Green（绿色） Blue（蓝色））的基础上增加了一个通道Alpha。

Alpha参数为透明值，在0~1之间。RGBa 扩展了 RGB的颜色

rgba（）是css中设置背景颜色中的一个属性。