CSS、HTML、js一些问题总结

比眉伴天荒 2022-10-10 12:49 156阅读 0赞

### 1、写好的html元素li、img等之间出现间隙？ ###

<!DOCTYPE html>
    <html>
    
    <head></head>
    
    <body>
        <img src="./boyuanchong.jpg">
        <img src="./boyuanchong.jpg">
        <img src="./boyuanchong.jpg">
    </body>
    
    </html>

比如直接在页面上写3个img标签，什么样式也不设置，结果如下图，，每个img之间有间隙，没有紧挨着  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70]这是因为把li、img等设置成inline-block了，行内元素之间会出现一定的间隙、和font-size大小有关，font-size值越大，间隙越大

这个问题怎么解决呢？

> img元素的父标签设置 `font-size:0`即可

### 2、如何在页面上展示`<div></div>`这样的字符串 ###

> 将要展示的HTML字符包裹在`<script type="text/html" style="display:block"></script>`中就行了

### 3、禁止页面上进行右键、复制、文本选取等动作 ###

**让鼠标右键无效**

> `oncontextmenu`是用来设置或获取全局事件中 上下文菜单事件的处理函数

> 当在窗口上单击鼠标右键时，通常会触发`oncontextmenu`事件。除非阻止默认行为，否则浏览器上下将被激活

window.oncontextmenu = (e) => { 
      e.preventDefault();
    }
    window.onconextmenu=function(){ 
      return false;
    }

**禁止文本选取动作**

> `onselectstart`事件：用户在网页上开始选择任意文本内容时触发

window.onselectstart = function () { 
      return false
    }
    window.onselectstart = function (e) { 
      e.preventDefault();
    }

**禁用回车键**

> 对回车键对应的`keyCode`进行处理即可

window.onkeypress=function(e){ 
      if(e.keyCode===13){ 
        return false; // e.preventDefault()
      }
    }

### 4、隐藏滚动条 ###

> 设置元素的 css `scrollbar`属性

.test{ 
      scrollbar-width:none
    }
    /* 这个一定要写在.test的下面，写在上面试了下是不生效的 */
    .test::-webkit-scrollbar{ width:0;}
    /*或者*/
    .test::-webkit-scrollbar{ display:none;}

### 5、border:0和border:none的不同 ###

两者可以取消元素边框，使之看不见，，在效果上是一样的。  
不同点：  
**渲染方面**

*  `border:none`，没有边框，浏览器不做渲染动作
 *  `border:0`，有边框，边框宽度为0，浏览器依然会进行渲染处理，因为border是简写，还有border-style 和border-color(默认border-color是\#000)

**兼容性**  
兼容性差异只是在IE6/7 上的 button和input标签而言的。

*  `border:none`无效，border仍然存在
 *  `border:0`有效，所有浏览器效果一致

### 6、js方法链式调用 ###

对象bai有两个方法`bai.goo()`和`bai.hoo()`，，，怎么实现这两个方法的链式调用，像这样`bai.goo().hoo()`

> 解决方法：每个方法的返回值是对象bai即可

### 7、填空题的效果怎么实现呢，比如`千山___ 飞绝`，需要在横线处填上`鸟`简单一点的，使用一个`input`标签，只设置`border-bottom` ###

简单一点，使用一个input，只保留border-bottom

input{
      border:none;
      outline:none;
      border-bottom:1px solid #000;
    }
    <span>千山<input type="text">飞绝<span>

![在这里插入图片描述][2020101300341890.png_pic_center]  
基本功能已经实现了，但是这样子还是有一些问题的，如果横线处的内容是不确定的，input的宽度不能随着内容的多少动态的改变。。。。

> 当然了，横线处的内容的多少是不固定的。很多时候希望随着内容的增加横线的长度变成

**解决方法**：使用一个标签，添加`contenteditable="true"`然后在添加`border-bottom`即可

.space-in{
        min-width: 20px;
        border-bottom: 1px solid #000;
        margin: 0 5px;
        display: inline-block;
        outline: none;
    }
    <span>千山<span contenteditable="true" class="space-in"></span>飞绝</span>

![在这里插入图片描述][20201013004658205.gif_pic_center]

### 8、如何让一个元素看不到 ###

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th>效果</th> 
   <th>是否占空间</th> 
   <th>border/padding/margin是否生效</th> 
   <th>此元素绑定的事件是否生效(比如点击事件)</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>height:0</code></td> 
   <td>看不到该元素</td> 
   <td>仍然生成元素，只不过高度为0</td> 
   <td>生效(宽/高改变了，margin也起作用了)</td> 
   <td>如果设置了border/padding，那么生效</td> 
  </tr> 
  <tr> 
   <td><code>display:none</code></td> 
   <td>看不到该元素</td> 
   <td>不占</td> 
   <td>不生效</td> 
   <td>不生效</td> 
  </tr> 
  <tr> 
   <td><code>opacity:0</code></td> 
   <td>看不到该元素</td> 
   <td>占</td> 
   <td>生效（宽/高改变了，margin也起作用了）</td> 
   <td>生效</td> 
  </tr> 
  <tr> 
   <td><code>visibility:hidden</code></td> 
   <td>看不到该元素</td> 
   <td>占</td> 
   <td>生效(宽/高改变了，margin也起作用了)</td> 
   <td>不生效</td> 
  </tr> 
  <tr> 
   <td><code>给元素添加属性hidden</code></td> 
   <td>看不到该元素</td> 
   <td>不占</td> 
   <td>不生效</td> 
   <td>不生效</td> 
  </tr> 
 </tbody> 
</table>

### 9、如何让IE7、IE8等支持CSS3属性 ###

> 使用 `ie-css3.htc`

> `ie-csc3.htc`是一个脚本文件。只有IE浏览器才能识别。使用了它之后可以让低版本IE/8/7支持 border-radius、text-shadow、box-shadow等等部分CSS3的效果

### 10、字符集和编码方式的理解 ###

计算机中存储的信息都是用二进制数表示的，而在屏幕上看到的英文、数字、中文字符等等是二进制数转换之后的结果。  
总之，按照某种规则将字符存储在计算机中，比如`a`用什么表示，称为`编码`；反之，将存储在计算机中的二进制数解析显示出来，称为`解码`

常见字符集：ASCII字符集、GB2312字符集、BIG5字符集、Unicode字符集等。计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。

常见编码方式：ASCII编码、UTF-8/UTF-16/UTF-32编码、GB2312编码等

### 11、encodeURI和encodeURIComponent ###

这两个方法都可以对URL进行编码，有效的URL中是不包含空格等字符的

**1、encodeURI**

> 返回一个新字符串，表示提供的字符串编码为统一的资源标识符

![在这里插入图片描述][20210629162927619.png]  
`encodeURI`会体会替换所有字符，但不包括一下字符，即使他们具有适当的utf-8转义序列

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>保留字符</td> 
   <td>; , / ? : @ &amp; = + $</td> 
  </tr> 
  <tr> 
   <td>非转义字符</td> 
   <td>字母 数字 - _ . ! ~ * ’ ( )</td> 
  </tr> 
  <tr> 
   <td>数字符号</td> 
   <td>#</td> 
  </tr> 
 </tbody> 
</table>

**2、encodeURIComponent**

> 返回 原字串作为URI组成部分被被编码后的新字符串。

![在这里插入图片描述][20210629170222882.png]`encodeURIComponent`不转义的字符有

![在这里插入图片描述][2021062917033971.png]

### 12、阻止浏览器自动填充密码 ###

**1、autocomplete="off"**

> 可以为整个表单或者某个表单元素单独设置

现代浏览器实现了内置的密码管理功能：当用户在一个网站上输入了用户名和密码，浏览器会为用户提供记忆功能。当用户再次访问这个网站时，浏览器使用保存的值自动填写登录字段。

另外，浏览器可让用户指定一个主密码用来加密存储的登录信息。

即使没有主密码，浏览器内置的密码管理对安全也有益无害。由于用户不需要记住已被浏览器存储的密码，因此他们可以放心选择更强的密码。

由于这个原因，许多现代浏览器都不支持在登录字段中设置 autocomplete=“off”

**2、autocomplete="new-password"**

**3、默认设置input类型为text，输入时/获取焦点时 设置为password**

<input type="text" id="password-input"/>
    
    <script> var ele=document.getElementById("password-input"); ele.onfocus=function(){ this.setAttribute("type","password"); } ele.oninput=function(){ this.setAttribute("type","password"); } </script>

### 13、对象的 `.属性`和`[属性]`有何不同 ###

*  可以使用 `.属性`和`[属性]`来访问对象的属性
 *  只能使用`.方法`来访问对象的方法

> 一般来说，`.属性`用于在静态对象时存取属性；而`[属性]`在动态对象存取属性就很有用了

**不同点**

1.  对象属性名为number类型时，`.属性`无法获取，而`[属性]`可以正常获取
2.  对象属性名包含`.`等字符时，`.属性`无法获取，而`[属性]`可以正常获取

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70 2]

1.  `[属性]`可以使用变量的值作为属性名，而`.属性`不可以  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70 3]可以看到，如果想要动态设置对象的属性名，`[属性]`非常有用

### 14、文件的下载 ###

时常会遇见这样的动作，点击下载按钮 把数据什么的下载到 .json .log .txt 等之类的文件中

> `a`标签加上`downlaod`属性后，就可完成对href属性链接文件的下载，但仅仅是限于同源文件，如果是非同源，`download`属性会失效。

> `download`属性可以设置为下载的文件名  
> `href`可设置为下载的内容或者链接地址

const datastr =
                'data:text/json;charset=utf-8,fdfdffdfdfdfd';
            let elementA = document.createElement('a');
            elementA.setAttribute('href', datastr);
            elementA.setAttribute('download', 'aaa.json');
            elementA.click();
            elementA.remove();

### 15、下载数据到excel文件中 ###

这个操作常见于下载表格数据，，，

1.  安装插件， `npm install js-export-excel`
2.  import 插件，`import ExportJsonExcel from 'js-export-excel'`
3.  准备下载的数据

### 16、全屏效果 ###

尤其是在观看视频时很多都需要全屏以达到更好的观影效果。。。。怎么实现呢

> `Element.requestFullscreen()`  
> 该方法用于发出异步请求，使元素进入全屏模式

> 调用此API并不能保证元素一定能够进入全屏模式。  
> 如果元素被允许进入全屏模式，返回的`Promise`会resolve，并且该元素会收到一个`fullscreenchange`事件  
> 如果元素被拒绝进入全屏模式，返回的`Promise`会reject，并且该元素会收到一个`fullscreenerror`事件

> 早期的fullscreen API实现总是会把这些事件发送给document，，而不是调用的元素，，因此，，可能实际情况中需要注意一下这些情况

执行后，可以成功进入全屏模式。。。。。但是发现，整屏一片漆黑。。。。。。

原因：未给元素设置背景色，，，非全屏模式下是因为他继承了父元素的背景色所以才显示正常，，，进入全屏模式时因未设置背景色，，也不能继承到父元素的，，所以 一片漆黑

解决方式：给元素单独设置背景色即可。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70]: /images/20221005/5976752f3b4441da8cd3f5c36a14e049.png
[2020101300341890.png_pic_center]: /images/20221005/3e7c4d41032e48f9b8eed7a4f3f05148.png
[20201013004658205.gif_pic_center]: /images/20221005/f8d9b680892d48aba3c438cc992cd016.png
[20210629162927619.png]: /images/20221005/944ed825777440f1abd92768d41e38d7.png
[20210629170222882.png]: /images/20221005/771c666dda9542d2a22d577542d5ec78.png
[2021062917033971.png]: /images/20221005/345dc12a04f14fa78af25d81fcb0c3d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70 1]: /images/20221005/b6b10b35e1bc418e8674263fe5d92efb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70 2]: /images/20221005/3db10d85c44c4e4194fb0b45a293dbe7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210629200620450.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp,size_16,color_FFFFFF,t_70