居中元素不定宽高: - absolute + transform - lineheight - writing-mode - css-table - flex
https://yangsirgo.github.io/good-good-study/transform.html
https://yangsirgo.github.io/good-good-study/lineheight.html
水平垂直居中,这是一道面试必考题,^_^
居中元素不定宽高: - absolute + transform - lineheight - writing-mode - css-table - flex
https://yangsirgo.github.io/good-good-study/transform.html
https://yangsirgo.github.io/good-good-study/lineheight.html
1.代码的执行是严格按照html中script标签的位置执行的。
不废话,先看代码执行情况:
<script src="./js/1.js"></script>
<script src="./js/2.js"></script>
<script>
document.write('<!--');
</script>
<script src="./js/3.js"></script>
<script src="./js/4.js"></script>
当页面出现多个script 时;浏览器会同时加载,但是执行这些js 是根据自上而下执行的,上面这个例子中虽然 4 个 js 文件都同时加载,但是由于中间被 script 插入了一行 html 注释,后面的 3、4 即便加载了也没有被执行。
那么如果插入的不是注释而是别的 js 文件呢?再看另一段代码
<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
<script>
document.write('<script src="4.js"><\/script>');
</script>
<script src="5.js"></script>
<script src="6.js"></script>
js 文件 4 是最后加载的,因为代码执行是严格遵循顺序的,需要按顺序加载,加载完1,2,3之后加载4,虽然5,6文件已经加载完成,但是需要等到4加载执行完毕后才能执行5,6,所以4文件阻断的后续js的加载。
2.一波 谷歌浏览器的优化。
从 55 版本以后,google浏览器对document.write 进行了优化,引用跨域脚本浏览器会提示警告。
在 2G 网络环境下,document.write 的这种使用姿势会被 Chrome 智能「优化」掉。
所以需要找替代方案。
3.替代方案
目前document.write 的使用 是带条件的文件加载,比如:
<script>
if (!window.Promise) {
document.write('<script src="polyfill/promise.js"><\/script>');
}
if (!window.fetch) {
document.write('<script src="polyfill/fetch.js"><\/script>');
}
</script>
还有一些平台考虑按需引入js,比如:
<script>
if(/MicroMessenger/i.test(navigator.userAgent)) {
document.write('<script src="jweixin-1.2.0.js"><\/script>');
}
if(/AlipayClient/i.test(navigator.userAgent)) {
document.write('<script src="alipayjsapi.min.js"><\/script>');
}
</script>
对于以上场景,替代方案是:
1.服务器端按客户端的版本,动态生成script标签。通过userAgent 判断。
2.用多入口解决多平台问题。前端根据UA判断使用哪个版本。
新电脑上使用git 报错:
Permission denied (publickey).
fatal: Could not read from remote repository.
主要是因为未添加电脑公钥(publickey)到github上;
在本地输入用户名和邮箱:
git config --global user.name "yourname"
git config --global user.email "youremail"
查看是否已经有了ssh密钥:cd ~/.ssh;
生成新的密钥:
ssh-keygen -t rsa -C “youremail”
cd ~/.ssh
vim id_rsa.pub
text-align:justify 针对 文本在容器的两边对齐,
具体应用是在:form 表单的label 对齐。
text-align:justify 都无法让中文两端对齐
html { font-family: 'Microsoft YaHei'; }
这样设置,页面在所有的操作系统下显示微软雅黑,如果苹果本 更漂亮的默认字体就用不了了。
有个新的需求是:在非window系统不要使用微软雅黑,而是使用其系统字体。
一种使用非标准属性-apple-system,使用如下:
html { font-family: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei'; } // 苹果使用系统默认字体,非苹果是 微软雅黑。
这个是非标准属性,后面可能会被取消。
使用font的 关键字,这个是标准属性。
html { font: menu; } body { font-size: 16px; }
这个关键字 是让网页的字体跟着系统走。ui 可能会不太开心。
段代码并非那么“正统”,而且圣杯布局因兼容性考虑需要给body设置最小宽度min-width
三列布局
圣杯布局的解释
如果加 left,right,middle 加上间距的话,需要调整margin:left 的值,父容器调整margin:20px的值。
vue版三列布局(中间有20的间隔):
<template>
<div class="three-column" ref="page">
<div id="center" class="column">
<div class="box">
<div class="top">
中间top
</div>
<div class="bottom">
中间bottom
</div>
</div>
</div>
<div id="left" class="column" ref="left">
<div class="box">
我是left
</div>
</div>
<div id="right" class="column" ref="right">
<div class="box">
我是right
</div>
</div>
</div>
</template>
<style lang="scss">
$leftWidth:287px;
$rightWidth:305px;
.three-column{
min-width: 1024px;
margin: 20px;
padding-left: $leftWidth;
padding-right: $rightWidth;
.column{
float: left;
height: 100%;
padding: 0 10px;
.box{
height: 100%;
box-sizing: border-box;
border-radius: 4px;
text-align: center;
border: 1px solid blue;
.top{
padding: 10px;
border-bottom: 1px solid blue;
}
.bottom{
padding: 10px;
}
}
}
#left{
width: $leftWidth;
margin-left: -100%;
position: relative;
right: $leftWidth;
padding-left: 0;
}
#center{
width: 100%;
}
#right{
margin-right:-$rightWidth;
width: $rightWidth;
padding-right: 0;
}
}
</style>
设置relative的元素可以使用位移属性(top right bottom left以前也知道但是没怎么用不熟练);margin和位移属性可以同时/叠加使用;通过容器设置float以及子元素设置absolute使得容器高度为0(未设置固定高度,默认为auto),可以让容器后面的元素“上移”到子元素同行而不会被“往下推”。
以下布局不建议在项目里使用,如果内容超出左侧列,右侧列的高度,出现滚动条,样式就会乱掉。
三列布局
右侧定宽左侧自适应布局
缺点是 html 中的 dom 结构与在页面中呈现正好相反,会有些疑惑。
右侧顶框左侧自适应(dom结构一致布局)
比较简单的做法是设置如下 CSS:
html { overflow-y: scroll; }
如果是 404 页面的话也会有 滚动条,用户的体验并不好,所以有了下面的方案:
html { overflow-y: scroll; /* for IE8 */ } :root { overflow-y: auto; overflow-x: hidden; } :root body { position: absolute; } body { width: 100vw; overflow: hidden; }
基本上药到病除,而且后遗症非常少,大家不妨试试!
text-indent 仅对第一行内联盒子内容有效。
隐藏SEO 关键字
vertical-align起作用是display计算值为inline,inline-block,inline-table或者table-cell的元素上,td 单元格都是支持的,但是其他块级元素不支持此属性。
对于table-cell 元素而言,vertical-align起作用的是 table-cell 元素自身,请看 demo地址
就效果而言,table-cell元素设置 vertical-align 垂直对齐的是子元素,但是其作用的并不是子元素,而是自身.
webstorm 的缩进有两块,js 和 html
ctrl + alt +s 调出设置模块,找到codeStyle 下的 javascript 和 html 部分设置 成 2 或者 4.
visibility:hidden 有继承性,父元素设置隐藏,子元素也可以显示的,display:none没有这个特性的。
html结构:
<span axplugins='combiele'>
<span class='ctrl-value'>
组合元素的文本
<span axplugins='text'>
<span class='ctrl-value'>内部的ctrl-value 节点不做提取</span>
</span>
<span class='_textnode_'>自由文本节点</span>
</span>
</span>
最终需求结果是 axplugins 元素和 自由文本的树形结构。
js代码:
/**
* 遍历dom 节点 汇总成树形结构
* @param el el Dom节点元素
*/
function walkDom(el){
var c = el.firstChild;
var retObj = {};
var array = [];
while(c !== null){//这里只是返回了元素节点,没有节点就是个空数组
if(c.nodeType == 1){
var walkObj = walkDom(c);
array.push(walkObj);
}
c = c.nextSibling;
}
if (el.getAttribute("attrs")) {
var attrsObj = JSON.parse(el.getAttribute("attrs"));
var options = attrsObj.options || JSON.stringify([]);
retObj.options = JSON.parse(options);
}
retObj.text = el.getAttribute("title");
retObj.eleType = el.getAttribute('axplugins');//元素类型
if (el.className === '_textnode_') {
retObj.eleType = 'textnode';
retObj.text = $(el).text();
}
retObj.name = retObj.text + "(" + getEleTypeText(retObj.eleType) + ")";
retObj.id = el.id;
retObj.pId = null;
retObj.children = array;
return retObj;
}
/**
* 获取元素的名称
* @param eleType
* @returns {string}
*/
function getEleTypeText(eleType) {
var text = '';
switch (eleType) {
case 'combiele':
text = '组合元素';
break;
case 'macro':
text = '宏元素';
break;
case 'text':
text = '文本元素';
break;
case 'select':
text = '单选下拉元素';
break;
case 'selectmult':
text = '多选下拉元素';
break;
case 'numberelement':
text = '数字元素';
break;
case 'radio':
text = '单选元素';
break;
case 'checkbox':
text = '多选元素';
break;
case 'tagelement':
text = '标签元素';
break;
case 'datedomain':
text = '日期元素';
break;
case 'textnode' :
text = '自由文本';
break;
default :
text = '文本元素';
break;
}
return text;
}
/**
* 对dom 树节点处理 获得axlugins 元素的树形节点
* @param ele Dom节点元素
* @returns {array} 返回节点数组
*/
function getDomTreeData (ele){
var obj = walkDom (ele);
// console.log(obj);
var clearedData = tranTreeData ([obj]);
return clearedData;
/**
* 清除 axplugins 是null的情况
* @param arr 节点数组
* @returns {*}
*/
function tranTreeData (arr) {
var arr = $.extend(true,[],arr);
var flatArr = [];
var keyCounter = 0;
$.each(arr,function (sonIndex,rootNode){
flattenChildren(rootNode);
});
clearNullAxplNode ();
/**
* 将树形数组 扁平化处理
* @param node
* @param parent
*/
function flattenChildren(node,parent){
node.nodeKey = keyCounter++;
flatArr[node.nodeKey] = { node: node, nodeKey: node.nodeKey };
if (typeof parent != 'undefined') {
flatArr[node.nodeKey].pKey = parent.nodeKey;
}
if (node['children'].length > 0) {
flatArr[node.nodeKey]['children'] = [];
$.each(node['children'],function (sonIndex,child){
flattenChildren(child, node);
});
}
}
/**
* 清除axplugins 为 null 的节点
*/
function clearNullAxplNode (){
var cloneArr = $.extend(true,[],flatArr);
$.each(cloneArr, function (index,item){
var nullParentId = null;
var nullNodeKey = null;
if (item.node.eleType === null) {
nullParentId = item.pKey;
nullNodeKey = item.nodeKey;
//对 flatArr 过滤 node.eleType 为 null
flatArr = $.grep(flatArr,function (grepitem){
grepitem.eleType = grepitem.node.eleType;
grepitem.name = grepitem.node.name;
grepitem.id = grepitem.node.id;
grepitem.open = true;
return grepitem.nodeKey != nullNodeKey;
});
//flatArr 中pId 更换
$.each(flatArr,function (sonIndex,sonItem){
if (sonItem.pKey === nullNodeKey){
sonItem.pKey = nullParentId;
}
});
//对其中的pKey 转换为实际节点的Id
$.each(flatArr,function (sonIndex,sonItem){
var pKey = sonItem.pKey;
//获取nodeKey 是 pKey 的节点
var pKeyNodeArr = $.grep(flatArr,function (grepitem){
return grepitem.nodeKey == pKey;
});
// 对pId 赋值
if (pKeyNodeArr.length > 0) {
sonItem.pId = pKeyNodeArr[0].node.id;
}
});
}
});
}
return flatArr;
}
}
word-break:break-all 所有的地都能换行,不管是不是一个word 单词。
word-wrap:break-word 如果一段文字中有换行的点儿,如空格或 CJK(中文/日文/韩文)之类的,英文字符不会折行。
demo
1.根元素(很多场景下都是html元素),被称为初始包含块。其尺寸等同于浏览
器可视窗口的大小
2.对于其他元素,如果该元素的 position 是 relative 或者 static,则“包含块”
由其最近的块容器祖先盒的 content box 边界形成。
3.如果元素 position:fixed,则“包含块”是“初始包含块”。
4.如果元素 position:absolute,则“包含块”由最近的 position 不为 static
的祖先元素建立,如果没有符合条件的祖先元素,则“包含块”是“初始包含块”。
使用background-clip制作“三道杠”和“圆圈效果”
兼容IE9+
border-box:
从border区域向外裁剪背景。
padding-box:
从padding区域向外裁剪背景。
content-box:
从content区域向外裁剪背景。
https://jingyan.baidu.com/article/6766299740c2dd54d41b844f.html
win10 的默认输入法太烦人,每次都得切换!!! 这下好了
轮廓宽度设置得再宽广,也不会影响任何元素的任何布局,并且 outline轮廓是可穿透的。两个用处:
1.头像剪裁的矩形镂空效果。
2.自动填满屏幕剩余空间的应用技巧
使用网易云信的会议系统,产生的新需求:
防止用户误操作,需要在关闭页签时提示,确定要离开会议吗?取消,确定,点击取消按钮页面无变化,点击确定按钮,执行关闭聊天室的接口,然后关闭当前页面。
使用beforeUnload 和 unload方法,beforeUnload 会 在unload 方法前执行。
规格讨论中提到了 beforeUnload 的两大用途:
.element {
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
margin-top: -200px; /* 高度的一半 */
margin-left: -300px; /* 宽度的一半 */
}
这个定位 有不足,需要提前知道被定位元素的尺寸,否则margin的负值不会很精确。此时需要借助js获取。
css3 语法实现
.element {
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}
不能兼容IE10以下。
.element {
width: 600px; height: 400px;
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
margin: auto; /* 有了这个就自动居中了 */
}
可以设置任意尺寸,也可以不设置尺寸(比如说图片自带尺寸)。
设置尺寸demo
图片自适应demo
element-ui的dialog 弹窗定位 使用了横向margin:atuo;纵向上 margin-top上使用了15vh的单位,使弹窗看起来2:3的比例。
在实际开发中,普通元素也有类似控件元素的outline效果,例如:基于原生的单复选框模拟单复选框,或者为了规避submit类型按钮UI很难完全保持一致的问题,我们会使用 移花接木,通过for 属性与这些原生表单控件相关联。代码如下:
<input id="t" type="submit">
<label class="btn" for="t">提交</label>
[type="submit"] {
position: absolute;
clip: rect(0 0 0 0);
}
.btn {
display: inline-block;
padding: 2px 12px;
background-color: #cd0000;
color: #fff;
font-size: 14px;
cursor: pointer;
}
:focus + label.btn {
outline: 1px dotted Highlight;
outline: 5px auto -webkit-focus-ring-color;
}
一个绝对定位元素,没有任何 left/top/right/bottom 属性设置,并且其祖先元素全部都是非定位元素,其位置在哪里?
很多人都认为是在浏览器窗口左上方。实际上,还是当前位置,不是在浏览器左上方。正是这种错误认知导致凡是使用absolute 绝对定位的地方,一定父容器 position:relative,同时 left/top 等属性定位,甚至必同时使用 z-index 属性设置层级。这是非常错误的,absolute 是非常独立的 CSS 属性值, 其样式和行为表现不依赖其他任何 CSS 属性就可以完成。
“无依赖绝对定位”本质上就是“相对定位”,仅仅是不占据 CSS 流的尺寸空间而已。
重点在
‘相对自身位置定位’ !!!
‘不占空间’!!!
父元素设置 overflow:hidden 也不会隐藏 此元素,因为不占空间!!!
三个用处:
1.form 表单的 错误提示
2.form 表单前面的 * 必填项。
3.自动完成的下拉框,菜单的下拉框。
4.自然定位到左上角的top 火 hot 之类的图片。
`
.box { position: absolute; left: 0; right: 0; } `因为 left 和 right 同时存在,自身宽度就不是 0,而是表现为“格式化宽度”,宽度大小自适应于.box 包含块的 padding box。
包含块的定义参照其他笔记
.box {
display: flex;
}
.box div {
flex: 1;
border: 1px solid red;
}
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
属性 flex 是缩写,是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。flex: 1; 意思是flex-grow 的值是1,属性grow 是扩展的意思,扩展的是flex子项所占据的宽度,扩展所侵占的空间实际是出去元素占用的间隙。 flex-grow详细说明
https://codepen.io/sdsdsdsd/pen/VNNgRe
text-decoration: underline;属性会给文本增加下划线,但是下划线与文本贴的比较紧,效果并不好。,可以用border 来处理,请看demo。对于内联元素,改变垂直方向上的border 属性和 padding属性,对原来的布局定位,没有任何影响(元素的默认over-flow属性是visible,如果padding足够大,over-flow的属性是scroll或者是auto,就会有滚动条出现,可以向下滚动,不占空间是假象,有条件的)。
@font-face { font-family: 'Microsoft Yahei'; src: url(example.ttf); }
font-family 可以看成字体变量,名称可以随意,但是如果设置成系统的字体名称,比如微软雅黑字体 更改为 example.ttf 对应字体了
src属性跟 img 的src 属性一致,引入本地或者外链字体,使用系统安装字体,使用local()功能符号(兼容IE9+),外链字体使用url()功能符。
业界使用自定义字体的格式:
eot,woff,ttf,svg是字体的格式,多个url 为了浏览器兼容做的处理。
自定义字体使用:
.iconfont {
font-family: "ICON" !important;
}
[class*=" el-icon-"], [class^=el-icon-] {
font-family: element-icons!important;
}
css属性选择器:
[attr^=value]
表示带有以 attr 命名的属性,且属性值是以"value"开头的元素。
[attr$=value]
表示带有以 attr 命名的属性,且属性值是以"value"结尾的元素。
[attr*=value]
表示带有以 attr 命名的属性,且属性值包含有"value"的元素。
再也不用写 iconfont iconshanchu 两个class 名称,写一个就好。
relative相对定位有两大特点:1.相对自身定位。2.无侵入(自身的位置不被周边侵入)。
与margin 定位的区别是,绝对定位元素相对自身偏移,对周边元素无影响,而margin 定位 使得周边元素偏移。demo
设置 相对定位元素的层叠顺序提高了,普通元素设置z-index 也是徒劳的,所以position:relative 设置的元素影响应该最小。
ex 是字符 x的高度,与font-size 关系密切,font-size 越大 ex的值越大。
em 是 字符M的 宽度决定,相对当前元素。
rem,即 root em,顾名思义,就是根元素 em 大小。
em 相对于当前元素, rem 相对于根元素,本质差别在于当前元素是多变的,根元素是固定的,也就是说,如果使用 rem,我们的计算值不会受当前元素 font-size 大小的影响。
区别demo
在github上有个新项目nvm-windows,可以帮助我们在windows 系统下 对node的版本进行管理。
nvm-windows的下载地址
根据官方说明:
It comes with an installer (and uninstaller), because getting it should be easy. Please note, you need to uninstall any existing versions of node.js before installing NVM for Windows. Also delete any existing nodejs installation directories (e.g., "C:\Program Files\nodejs") that might remain. NVM's generated symlink will not overwrite an existing (even empty) installation directory.
You should also delete the existing npm install location (e.g. "C:\Users<user>\AppData\Roaming\npm") so that the nvm install location will be correctly used instead. After install, reinstalling global utilities (e.g. gulp) will have to be done for each installed version of node:
再安装 nvm-windows 之前 需要卸载node,并清空目录。
在Windows下完全卸载已安装的node.js
从卸载程序卸载程序和功能,也可以直接右键node.js的安装包并选择卸载。
重新启动(或者重新启动任务管理器杀死所有与节点相关的进程)。
从下列的目录中找到相关的内容并删除掉:
C:\Program Files (x86)\nodejs
C:\Program Files\nodejs
C:\Users{User}\AppData\Roaming\npm(或%appdata%\npm)
C:\Users{User}\AppData\Roaming\npm-cache(或%appdata%\npm-cache)
检查%PATH%环境变量以确保没有引用Nodejs或npm存在。
重新启动电脑。
安装nvm-windows并使用
到GitHub的项目下载地址,选择下载nvm-setup.zip,解压后双击使用安装程序即可。
查看已安装的nodejs版本
nvm list
如果是第一次安装,使用该命令结果如下:
C:\Users\Lewis>nvm list
No installations recognized.
查看可安装的nodejs版本
nvm list available
nvm install 8.11.2 64-bit// 安装 node 版本
nvm use 8.11.2// 切换版本 切换后才可以使用node 和 npm的命令。
nvm uninstall 8.11.2// 卸载node包
切换node 版本之后 npm 包可能需要重装。
vue 相关:
1.v-if 与v-show的区别
答案:
v-show 给Dom元素增加display:none;
v-if 是动态删除添加Dom元素。
2.$nextTick的作用
答案: DOM 更新之后执行延迟回调。
ES6相关:
3.let 与var,const的区别
答案:
var允许在同一作用域中声明同名的变量,而let不可以
const 声明常量,不可更改。
flex布局 上机题
flex 如何实现垂直居中:
代码:
flex --- 左右布局,一侧定宽,一侧自适应撑满
代码:
html,
body {
height: 100%;
margin: 0
}
.main {
display: flex;
height: 100%;
}
.left,
.right {
height: 100%;
border: 1px solid red;
box-sizing: border-box;
}
.left {
width: 300px;
}
.right {
flex:1
}
flex 实现内容等分:
.box div {
flex: 1;
border: 1px solid red;
}
计算机基础:
http 状态码 401,404, 302, 200, 500 什么意思?
401 需要认证
404 找不到资源
500 服务端错误
302 重定向
HTTP 默认端口号是 80
HTTPS 默认端口号是 443
C/S架构与B/S架构
答案:
B/S架构,中文名:浏览器/服务器
C/S架构,中文名:客户端/服务器
聊天题:
有遇到过解决不了的问题吗? 讲下如何解决的。
如何做到代码好维护,如何处理的?
答案: 1. 使用设计模型: 面向对象程序设计。
2. 做好前后端的接口格式管理设计。
3. 组件化,模块化开发。
拔高题:
1、1、2、3、5、8、13、21、……
斐波那契数列,使用程序表现出来:
function fibonacci(n){
if(n < 0) throw new Error('输入的数字不能小于0');
if(n==1 || n==2){
return 1;
}else{
return fibonacci1(n-1) + fibonacci1(n-2);
}
}
start "" "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir
live-server --port=8888
exsit
写出以下规律:1、1、2、3、5、8、13、21、34、……
function fib(num) {
var arr = [];
if(num == 1){
return arr = [1];
}else if(num == 2){
return arr = [1,1];
}else{
arr = [1,1];
var a=1;
var b=1;
var c=2;
var arrlen =arr.length;
for(var i=2;i<num;i++){
arr.push(c);
a=b;
b=c;
c=a+b;
}
return arr;
}
}
alert( fib(1)); // 1
alert( fib(2)); // 1,1
alert( fib(3)); // 1,1,2
alert( fib(4)); // 1,1,2,3
alert( fib(5)); // 1,1,2,3,5
alert( fib(8)); // 1,1,2,3,5,8,13,21
2.给定两个数组,要求求出两个数组的交集,注意,交集中的元素应该是唯一的。
```
var firstArray = [2, 2, 4, 1];
var secondArray = [1, 2, 0, 2];
intersection(firstArray, secondArray); // [2, 1]
function intersection(firstArray, secondArray) {
var hashmap = {};
var intersectionArray = [];
firstArray.forEach(function(element) {
hashmap[element] = 1;
});
secondArray.forEach(function(element) {
if (hashmap[element] === 1) {
intersectionArray.push(element);
hashmap[element]++;
}
});
return intersectionArray;
}
```
1.请实现元素的垂直居中 (兼容IE9)。
<style>
.father {
width: 100%; height:100%;
position: relative;
background-color: green;
}
.son {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
width: 200px; height: 100px;
background-color: red;
margin: auto;
}
</style>
<div class="wp">
<div class="box">垂直居中 </div>
</div>
.wp {
width: 500px;
height: 500px;
background-color: green;
}
.wp {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box {
display: inline-block;
}
<div class="wp">
<div class="box">123123</div>
</div>
2.给以下结构中的P标签元素加上click 事件,弹出每个P标签内的内容请写出代码 原生js 实现;
<p>产品一</p>
<p>产品二</p>
<p>产品三</p>
<p>产品四</p>
<p>产品五</p>
答案:
var pNode = document.getElementsByTagName("p");
for(var i = 0;i<pNode.length;i++){
(function (i) {
pNode[i].onclick = function () {
alert(pNode[i].innerText);
}
})(i);
}
页面上就会出现.l { float: left; }的文本信息;如果再设置 contenteditable=
"true",在有些浏览器下(如 Chrome),甚至可以直接实时编辑预览页面的样式。
`
`
function addNum (num1, num2) {
var sq1, sq2, m;
try {
sq1 = num1.toString().split('.')[1].length;
}
catch (e) {
sq1 = 0;
}
try {
sq2 = num2.toString().split('.')[1].length;
}
catch (e) {
sq2 = 0;
}
m = Math.pow(10, Math.max(sq1, sq2));
console.log(sq1,sq2,m);
return (Math.round(num1 * m) + Math.round(num2 * m)) / m;
}
为什么浮点数的加法不准确,比如0.2 + 0.4 = 0.6000000000000001,思考一下
$emit 用于父子事件传递时使用,在组件嵌套组件的情况下并不适用。
iview里面的代码:
dispatch(componentName, eventName, params) {
let parent = this.$parent || this.$root;
let name = parent.$options.name;
//parent 组件有值 name 为空 或者name 的值 不等于 组件的名称,循环继续。
while (parent && (!name || name !== componentName)) {
parent = parent.$parent;
if (parent) {
name = parent.$options.name;
}
}
if (parent) {
parent.$emit.apply(parent, [eventName].concat(params));
}
}
这段代码试用于非父子组件数据传递。从子孙组件往上发送事件。
function broadcast(componentName, eventName, params) {
this.$children.forEach(child => {
const name = child.$options.name;
if (name === componentName) {
child.$emit.apply(child, [eventName].concat(params));
} else {
// todo 如果 params 是空数组,接收到的会是 undefined
broadcast.apply(child, [componentName, eventName].concat([params]));
}
});
}
这段代码试用于非父子组件数据传递。从父亲爷爷辈的组件往下发送事件。
原理:
margin-top:auto和margin-bottom:auto的计算值是0,所以margin:auto只是水平居中了。
只要把top/bottom/left/right都设置成0,然后再设置margin:auto就可以实现了。
注意 必须要有width 和 高度的值!!!
必须要有width 和 高度的值!!!
必须要有width 和 高度的值!!!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.