12.2蓝桥杯笔记

一、“===”

表示恒等，即绝对等于（值和类型均相等）。该运算符首先比较两边的变量数据类型是否相等，其次比较两边的变量的数值是否相等；只有数据类型和数值都相等了，两个变量才相等
1.如果完全相等的时候尽量用===，不然易出错误
2.如果是纯js代码，要检验运行情况，则可以在终端运行 node 文件名.js这一指令
或者命令行中直接输入JavaScript代码并回车 执行代码：

node
> console.log('Hello, World!');
Hello, World!

二、行元素变为块级元素

要实现 span 标签中的文字单行显示，多余溢出显示省略号的功能，因为span元素是单行元素，所以首先要将其变为块级元素。

我们可以通过 display 属性将行元素（inline element）变成块元素（block element）。具体来说就是将元素的 display 属性设置为 block 或 inline-block

span {
  display: block;
  //或者   display: inline-block;
}

需要注意的是，将行元素变成块元素可能会对布局产生影响，因此需要谨慎使用。如果需要将元素变成块元素并且不影响布局，可以在元素外面包裹一个 <div> 或 <section> 等块元素，然后再将这个块元素设置为 display: inline-block 或 display: block。

隐藏子元素溢出的部分：

overflow: hidden; 

语法:text-overflow:clip|ellipsis
默认值:clip;
clip:当前对象内文本溢出时不显示省略标记(…),而是将溢出部分裁剪。
ellipsis:当对象内文本一处时显示省略标记(…)。（要结合overflow: hidden; 使用）

bolck和inline-block区别
display:block 对于2个div:一个block只占一行，不可设置宽高
block元素会独自占一行，多个block元素各自新起一行，默认情况下 ，block元素宽度自动填充其父元素宽度
inline-block 对于2个div：两个block不分行，可设置宽高
该元素不会独占一行，而是根据其内容的宽度来决定自身的宽度，可以在一行内与其他元素并排显示。

三、white-space 属性

如果希望空格原样输出，可以使用<pre>标签。
white-space属性为nowrap时，不会因为超出容器宽度而发生换行。
具体可参考笔记链接 https://www.ruanyifeng.com/blog/2018/07/white-space.html

四、display:-webkit-box布局

排列方式： -webkit-box-orient: horizontal（横向排序） | vertical（纵向排序） | inherit（继承父元素的排列布局）
跟flex布局里面的flex-direction属性差不多
子元素水平对齐方式： -webkit-box-pack：start | end | center | justify
跟flex布局中的justify-content属性差不多
子元素垂直对齐方式： -webkit-box-align：start | end | center | baseline | stretch
跟flex中的align-items差不多
-webkit-box-flex：数字（将要显示的段落文字分成几行显示，其余用省略号表示 ）