首页 > 其他分享 >【React工作记录一百零九】前端小知识点扫盲笔记记录10

【React工作记录一百零九】前端小知识点扫盲笔记记录10

时间：2023-06-16 19:04:42浏览次数：46  
标签：BFC 知识点 arr geyao log 10 记录 height console

前言

我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣带你进入前端巅峰交流群 今天继续对前端知识的小结

对称数

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>对称数</title>
	</head>
	<body>
		<script>
            //判断是不是对称数
			for (var i = 1; i <= 10000; i++) {
				//将数字转换
				var str_i = i.toString(),
					l = str_i.length

				var arr_i = str_i.split('') //将字符串转化为数组
				var rev_arr = [] //命名一个空数组
				for (var j = 0; j < 1; j++) {
					//遍历1-10000之间的所有数字
					rev_arr.unshift(arr_i[j]) //实现数组反转
				}
				var rev_str = rev_arr.join('') //将数组转换为数字
				if (str_i == rev_str) {
					document.write(str_i + '<br>') //如果是相等的 就是对称数 并返回
				}
			}
		</script>
	</body>
</html>

对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>引用数据类型 和值数据类型</title>
</head>
<body>
  <script>
    function test(person) {
  person.age = 26
  person = {
    name: 'yyy',
    age: 30
  }

  return person
}
const p1 = {
  name: 'yck',
  age: 25
}
const p2 = test(p1)
console.log(p1) // -> {  name: 'yck',age: 26}
console.log(p2) // -> {  name: 'yyy',age: 30}
  </script>
</body>
</html>

左边固定 右边自适应

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>左边固定 右边自适应</title>
	</head>
	<body>
        <style>
            .main{
                float:right;
                width: 100%;
                margin-left:-200px;
                background-color: rgb(202, 158, 165);
            }
            .content{
                margin-left:200px;
                background-color: aquamarine;
            }
            .side{
                float:left;
                width: 200px;
                background-color: pink;
            }
        </style>
        <div class="main">
            <div class="content">
                geyao
            </div>
           
        </div>
        <div class="side">
            fangfang
        </div>
		<script>
		
		</script>
	</body>
</html>

实现两栏布局1

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>实现两栏布局</title>
</head>
<style>

/* 利用浮动，左边元素宽度固定 ，设置向左浮动。
将右边元素的 margin-left 设为固定宽度 。注意，因为右边元素的 width 默认为 auto ，所以会自动撑满父元素 */
  .outer {
    height: 100px;
  }

  .left {
    float: left;
    width: 200px;
    height: 100%;
    background: lightcoral;
  }

  .right {
    margin-left: 200px;
    height: 100%;
    background: lightseagreen;
  }
</style>

<body>
  <div class="outer">
    <div class="left">左侧</div>
    <div class="right">右侧</div>
  </div>
</body>

</html>

实现两栏布局2

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>实现两栏布局</title>
  <style>
    .outer {
      height: 100px;
    }

    .left {
      float: left;
      width: 200px;
      height: 100%;
      background: lightcoral;
    }

    .right {
      overflow: auto;
      height: 100%;
      background: lightseagreen;
    }
  </style>
</head>

<body>
  <div class="outer">
    <div class="left">左侧</div>
    <div class="right">右侧</div>
  </div>
  <script>
    //同样利用浮动，左边元素宽度固定 ，设置向左浮动。右侧元素设置 overflow: hidden; 这样右边就触发了 BFC ，BFC 的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。
  </script>
</body>

</html>

常见面试题实现两栏布局第三种

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>两栏布局</title>
</head>
<style>
  .outer {
    display: flex;
    height: 100px;
  }
  .left {
    width: 200px;
    height: 100%;
    background: lightcoral;
  }
  .right {
    flex: 1;
    height: 100%;
    background: lightseagreen;
  }
</style>
<body>
  <!-- 利用 flex 布局，左边元素固定宽度，右边的元素设置 flex: 1 -->
  <div class="outer">
    <div class="left">左侧</div>
    <div class="right">右侧</div>
  </div>
</body>
</html>

常见面试题两栏布局第四种

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>两栏布局第四种</title>
  <style>
    .outer {
      position: relative;
      height: 100px;
    }
    .left {
      width: 200px;
      height: 100%;
      background: lightcoral;
    }
    .right {
      position: absolute;
      left: 200px;
      top: 0;
      right: 0;
      bottom: 0;
      height: 100%;
      background: lightseagreen;
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="left">左侧</div>
    <div class="right">右侧</div>
  </div>
  <!-- 利用绝对定位，父级元素设为相对定位。左边元素宽度固定，右边元素 absolute  定位， left  为宽度大小，其余方向定位为 0  -->
</body>
</html>

数组去重方式第五种

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var geyao = [1, 2, 3, 4, 6, 7, 1, 2, 3, 8, 9]
    function ArrayCommon(arr) {
      //判断是不是数组  不是数组就返回一个false
      if (!Array.isArray(arr)) {
        console.log('这不是一个数组哦')
        return
      }
      let res = [],
        obj = {}
        //如果对象的属性值不存在 就放进去 不然就赋值+1
    for (let i = 0; i < arr.length; i++) {
        if (!obj[arr[i]]) {
       
            res.push(arr[i])
            obj[arr[i]] = 1
            console.log( obj[arr[i]],"obj[arr[i]]")
        } else {
            obj[arr[i]]++
            console.log( obj[arr[i]],"obj[arr[j]]")
        }
    }
    return res
    }
    console.log(ArrayCommon(geyao, 'geyao'))
  </script>
</body>
</html>

数组方法slice

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数组方法slice</title>
</head>
<body>
  <script>
     var geyao=["1","2","3","4"]
    var geyaotest=["1","2","3","4"]
    var geyaofangfang=["1","2","3","4"]
    var fangfang=["1","2","3","4"]
    var fangfangTest=["1","2","3","4"]
  

    //arr.slice([begin[, end]]) slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝
    //从第一个位置开始截取到最后一个位置
    console.log( geyao.slice(1),"geyao") // [ "2", "3", "4" ]
    //从第一个位置截止到第二个位置
    console.log( geyaotest.slice(1,2),"geyaotest") // [ "2" ]
    //从第一个位置截取到最后一个位置
    console.log( geyaofangfang.slice(1,5),"geyaofangfang") // [ "2", "3", "4" ]
    //从最后一个位置开始截取
    console.log( fangfang.slice(-1),"fangfang") // [  "4" ]
    //从最后一个位置开始截取 截取当前倒数第二个
    console.log( fangfangTest.slice(-2,-1),"fangfangTest") // [ "3" ]
  </script>
</body>
</html>

常见面试题对BFC的一些理解

// BFC 即块级格式上下文， 根据盒模型可知， 每个元素都被定义为一个矩形盒子， 然而盒子的布局会受到尺寸， 定位， 盒子的子元素或兄弟元素， 视口的尺寸等因素决定， 所以这里有一个浏览器计算的过程， 计算的规则就是由一个叫做视觉格式化模型的东西所定义的， BFC 就是来自这个概念， 它是 CSS 视觉渲染的一部分， 用于决定块级盒的布局及浮动相互影响范围的一个区域。
    // BFC 具有一些特性：
    // 块级元素会在垂直方向一个接一个的排列， 和文档流的排列方式一致。
    // 在 BFC 中上下相邻的两个容器的 margin 会重叠， 创建新的 BFC 可以避免外边距重叠。
    // 计算 BFC 的高度时， 需要计算浮动元素的高度。
    // BFC 区域不会与浮动的容器发生重叠。
    // BFC 是独立的容器， 容器内部元素不会影响外部元素。
    // 每个元素的左 margin 值和容器的左 border 相接触。
    // 利用这些特性， 我们可以解决以下问题：
    // 利用 4 和 6， 我们可以实现三栏（ 或两栏） 自适应布局。
    // 利用 2， 我们可以避免 margin 重叠问题。
    // 利用 3， 我们可以避免高度塌陷。
    // 创建 BFC 的方式：
    // 绝对定位元素（ position 为 absolute 或 fixed）。
    // 行内块元素， 即 display 为 inline - block。
    // overflow 的值不为 visible。

异步和同步转换

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>异步和同步转换</title>
</head>
<body>
  <script>
    // 假设场景两个函数
    // function fangfang() {
    //   setTimeout(() => {
    //     console.log("我给你钱")
    //   },1000)
    // }
    // function geyao() {
    //   setTimeout(() => {
    //     console.log("我去买东西")
    //   },500)
    // }
    // fangfang();
    // geyao();
    //我必须拿到钱 才去买东西 然后买好了
    function fangfang(geyao) {
      setTimeout(() => {
        console.log("我给你钱")
        geyao(kangkang)
      },1000)
    }
    function geyao(kangkang) {
      setTimeout(() => {
        console.log("我去买东西")
        kangkang()
      },500)
    }
      function kangkang() {
      setTimeout(() => {
        console.log("我买好了")
      },500)
    }
    fangfang(geyao)
  </script>
</body>

</html>

总结

我是歌谣 最好的种树是十年前 其次是现在 加油 歌谣

标签：BFC,知识点,arr,geyao,log,10,记录,height,console
From： https://blog.51cto.com/u_14476028/6501612

相关文章

  • Python设计模式-10-享元模式
    享元模式是一种结构型设计模式，它通过共享对象来减少内存使用和对象创建的数量。享元模式通常包括以下几个角色：享元工厂（FlyweightFactory）：负责创建和管理享元对象。享元（Flyweight）：表示共享的对象，包含内部状态和外部状态。内部状态（IntrinsicState）：存储在享元对象内部的状态，不会随......
  • 101 显示数组中的大写字母 小写字母 数字
    packagecom.fqs.demo001;importjava.util.Scanner;publicclassCompare{publicstaticvoidmain(String[]args){//键盘录入一个字符串，统计该字符串大写字母字符，小写字母字符，数字字符出现的次数//比如ABCabc123Scannersc=newScanner(......
  • 银河麒麟操作系统 v10 中离线安装 docker 环境
    #查看系统版本cat/etc/os-release#查看Linux内核版本（3.10以上）uname-r#查看iptabls版本（1.4以上）iptables--version#判断处理器架构uname-p#在此下载https://download.docker.com/linux/static/stable/#解压文件tar-zxvfdocker-23.0.1.tgz#移动到安装目录mv......
  • 记录--设计一个可选择不连续的时间范围的日期选择器
    这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助npm包：sta-datepicker效果图 需求普通的时间选择器要么只能单选，要么只能选范围，不可以随意选择若干个时间，同时大多数现成的时间选择器选择结束会收起来，很不方便。现在需求如下1、可以自己控制展开收起2、可......
  • QGIS3.22.0+VS2019 window10编译
    首先感谢博客 济南友泉软件有限公司提供的顺序教程。博客地址：https://blog.csdn.net/qq_26221775/article/details/122792445这篇博客主要是表示编译时遇到的坑。1.一定使用vs2019进行编译。我刚开始想使用vs2017编译。因此遇到了两个坑。（1）vs2017编译qgis_cor......
  • Q：Win10关闭内存压缩功能
    微软在Win10中就已经启用了内存压缩机制，在Win11当中继续了这一设定。通过任务管理器查看。taskmgr·通过命令行查看。使用系统管理员权限，打开PowerShell，然后输入以下命令：Get-MMAgent关闭压缩命令：Disable-MMAgent-mc启动压缩命令：Enable-MMAgent-mc......
  • 10.静态路由
    静态路由，无需消耗网络设备的CPU的资源来计算分析，但是静态路由需要网络管理员手动配置和维护，同时静态路由不能动态根据网络拓扑的改变而改变。静态路由格式：[***]iproute-static目标网段目标网段掩码下一跳ip地址根据直连路由的情况可知，数据不能全网互通，是因为路由表中缺少路......
  • 过滤实现条件查询记录：
    publicList<TbRemouldAirVO>airQueryByMap(List<TbRemouldAirVO>airVO,Map<String,String>map){//1.改造时间if(!StringUtils.isEmpty(map.get("remouldTimeAir"))){airVO=airVO.stream().filter(x->Objects.equals......
  • CKS 考试题整理 （10）-Dockerfile检测
    Task分析和编辑给定的Dockerfile/cks/docker/Dockerfile（基于ubuntu:16.04镜像），并修复在文件中拥有的突出的安全/最佳实践问题的两个指令。 分析和编辑给定的清单文件/cks/docker/deployment.yaml，并修复在文件中拥有突出的安全/最佳实践问题的两个字段。 注意：请勿添加......
  • Win10安装Oracle-21C
    1、前期工作下载安装包：OracleXE213_Win64.zip解压安装包2、开始安装注意：以管理员身份运行++++++++++++++++++++++分割线++++++++++++++++++++++此处点击“运行”++++++++++++++++++++++分割线++++++++++++++++++++++++++++++++++++++++++++分割线+++++++++++......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99