前端开发笔记2021-04-23

前端开发笔记

margin参数数量

margin: 20px;（上、下、左、右各20px。）

margin: 20px 40px;（上、下20px；左、右40px。）

margin: 20px 40px 60px;（上20px；左、右40px；下60px。）

margin: 20px 40px 60px 80px;（上20px；右40px；下60px；左80px。）

单独设置角度

border-bottom-left-radius:2px

设置单元格内文字不溢出还有padding

.right_menu_inner .module_unit{
width: 40%;
left: 60%;
border: 1px solid #ccc;

position: absolute;

​ padding: 6px 12px;

​ font-size: 14px;

​ line-height: 1.42857143;

​ height: 100%;

​ border-radius: 5px;

​ background-color: white;

​ overflow: scroll;

​ border-top-left-radius: 0;

​ border-bottom-left-radius: 0;

}

.right_menu_inner .module_unit::-webkit-scrollbar{

​ display: none;

}

效果：

添加输入框后自动编辑

div.contentEditable=true

div.focus()

css定义变量

:root{ --bianliangming:xxxxx; }

需要前边两个横线

使用：

div{ color:div(--bianliangming,morenzhi)
}

使用vh进行响应式开发

vh就是viewed Height,同理还有vw就是width，他是相对目前打开的页面大小进行更改

使用方法：
1vh就是1%

使用calc进行css计算

表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；

表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

如height:(100vh - 20px);

下方浮动的div实现

只需

position:fixed
buttom:0px

就可以

array 操作

• Array.replace(a,b)

  把a用b替换，a可以使用正则表达式匹配多个内容

  例如：

  array.replace(/\t/g,' ')
  

  选择所有的tab换成空格

  再如：

  array.replace(/# |\n/g,'')
  

  选择形如# 和\n消除

• Array.split(a,b)

  接收两个传入参数，第一个是用什么把array分离开，第二个是可选项 分离的最大项数

  例如:

  <script type="text/javascript">
  
  var str="How are you doing today?"
  
  document.write(str.split(" ") + "<br />")
  document.write(str.split("") + "<br />")
  document.write(str.split(" ",3))
  
  </script>
  

  输出

  

• Array.join(a)

返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入 separator 字符串而生成的。

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George