前端开发笔记
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