目录
1、Bug：子绝父相与overflow:hidden 与 z-index失效
1、如果儿子盒子设置了position:absolute，父亲盒子设置了position:relative; overflow:hidden;，那么儿子盒子移出父亲盒子边界后，就会被爷爷盒子吃掉一样。所以无论儿子盒子的z-index设置得再大，也不能覆盖爷爷盒子的内容。
2、解决办法是：取消掉父盒子的position:relative;，给爷爷盒子加上position:relative，使得儿子盒子的直接父盒子变成爷爷盒子，就可以绕过父盒子的overflow:hidden
3、第二个解决办法是，保留父盒子的position:relative;，取消父盒子的overflow:hidden即可
4、z-index失效反思：
-
网上:
（1）z-index只对开启了定位的元素生效
（2）同一级父元素下的层叠效果会受父元素的z-index影响，如果父元素的z-index值很小，那么子元素的z-index值设置很大也不起作用
-
z-index一般对兄弟盒子(这两个盒子开启了定位)之间起作用，对于有父子关系的盒子(这两个盒子开启了定位)，那么z-index可能也是失效的。
- 如果父亲盒子开启了定位
- 如果父盒子设置了z-index值，那么儿子的z-index无论设置多小，都不能隐藏在父盒子的下方（z-index失效）
- 如果父盒子没有设置z-index值，那么儿子的z-index设置为负值，可以隐藏在父盒子下方（生效）
- 如果父亲盒子没有开启定位，爷爷盒子开启了定位(relative或者absolute或fixed)，儿子的z-index设置为负值，那么可以隐藏在父亲盒子的下方（生效）
- 如果父亲盒子开启了定位
5、 绝对定位元素相对的元素是它最近的一个祖先，该祖先满足：position的值必须是：relative、absolute、fixed，若没有这样的祖先则相对于body进行定位**。偏移值由其top、bottom、left、right值确定。（参考）
6、 通常，为了让DIV子元素超出部分隐藏，都是在父元素设置overflow:hidden，这样即可防止子元素撑开父元素，使子元素能够溢出隐藏！
7、测试代码
<!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>
<style>
.grandfather{
background-color: red;
width: 800px;
height: 800px;
position: relative;
z-index:10;
padding-top:50px;
}
.father{
top:50px;
margin: 0px auto;
background-color: yellow;
width: 400px;
height: 400px;
/*解决办法是把position:relative取消掉，让.son相对于.grandson定位，绕过overflow:hidden*/
position: relative;
overflow: hidden; /*罪魁祸首是overflow:hidden;*/
/* z-index: 10; */
}
.son{
background-color: blue;
width: 200px;
height: 200px;
position: absolute;
top:-100px;
z-index: 10;
}
.father2_brother,.father2{
width: 400px;
height: 400px;
position: relative;
}
.father2_brother{
background-color: aqua;
z-index: 10;
}
.father2{
background-color: blueviolet;
z-index: 10;
}
</style>
</head>
<body>
<div class="grandfather">
<div class="father">
<div class="son">
</div>
</div>
</div>
<br/>
<div class="grandfather">
<div class="father2_brother"></div>
<div class="father2">
<div class="son">
</div>
</div>
</div>
</body>
</html>
2、Bug：height:100%没生效
开启绝对定位的盒子的height:100%，相对于最近开启了定位(最常见relative)的祖先元素，而不是相对于之前的父元素
3、Bug：element-ui的表格高度与宽度调整
包一层样式就可以解决，样式可能被别人污染了。
el-table的高度由<el-table></el-table>的属性来决定
- height，接受一个string或者number，能被内联style中写的高度覆盖
- max-height，表格最大高度，若表格的实际高度大于它，那么就会出现滚动条
el-table的宽度取决于<el-table-column>标签的属性 以及 <el-table>的style中设置width
- 在
<el-table>中设置的width是设置了表格的宽度上限(相当于装表格容器的width)，不能直接明显增大宽度，要直接明显增大宽度，需要用el-table-column中的width属性
4、Bug：element-ui表格无法换行
(1) 因为表格高度固定、行高固定，其实是换行的。只不过换行的文字被隐藏了(.el-table .cell{overflow:hidden})。
(2) 最好用 show-overflow-tooltip来处理
- 失效的话，可能写错了，比如之前写成
show-overflow-tip
5、Bug：样式污染，包一层的理解
1、关于继承性
-
不会继承的CSS属性：盒子相关属性
比如说：border: solid 1px；因为border是盒子的边
-
会继承的CSS属性：字体相关属性
比如说
font-color-text-line-
2、关于层叠性
因为CSS具有层级叠加性，包一层，里面写的样式的权重就更高了。
#header #left ul li.first a的权重就是100+100+1+1+10+1=213
假如这个a标签有一个选择器叫做id=“aa”，那么 (#header #left ul li.first a)的样式就可以覆盖(#aa)的样式
所谓就近原则是，如果权重相同时，那么在css区域，排在后面的css样式，优先级更高。(因为从上到下解析)
3、如果别人设置了!import怎么办？
发消息给那个人，让他取消!import或者问他有什么办法在我这边修改样式
4、良好的习惯
自己的页面，在最外面，包一层盒子(比如class=“container”)，然后写样式区域，都在 .container{…}中写，比如：
.container{
.span_hover:{
}
}
6、Bug：flex:1的理解
1、陈哥笔记文档（Word中有颜色标注）
flex:1，其实是flex-grow,，flex-shrink，flex-basis的合并，其中flex-grow值为1，flex-shrink的值为1，flex-basis的值为0%(不是auto)。
flex-grow为1是指，当弹性盒子总宽度大于items的总宽度后，剩余空间该如何分配的问题。如果只有两个item，那么一个item宽度固定后(不设置flex:1)，另一个item设置flex:1，那么该盒子会被拉长，占据所有的空间。
flex-shrink为1是指，当items的总宽度大于弹性盒子的宽度时，每个盒子该如何压缩的问题。如果有两个item，一个item的宽度固定，另外一个item的宽度不固定(随着盒子内容的增加而增加)，那么固定宽度的item宽度仍然固定，不固定宽度的item的width不断地减小(随着盒子内容的增加)。如果不设置flex:1，那么每个item的width都要相应的减少。如果设置了flex:1，那么该item的width相当于为0，然后所有item的总width就小于容器的width，那么起作用的就是flex-grow，那么设置了flex:1的盒子的width就会被拉伸到占满剩余空间。
flex-basis为auto，表示默认以每个item的width为计算，如果明确设置了flex-basis的值，那么每一个item的width都被覆盖为设置的flex-basis的值。(已验证)
使用flex:1，那么就不用设置该item的宽度，该item的宽度就被设置为了0%(因为flex-basis被设置了成0%)，但要设置其他的item的宽度，这样才能使设置了flex:1的item宽度自适应。
什么是flex:1
- 它表示
flex-grow:1 flex-shrink:1 flex-basis:0% - 使用场景：弹性盒子的所有子项目中，一个子项目设置为flex:1，其他子项目的宽度固定，那么当这些子盒子的总宽度大于弹性父盒子的总宽度时，那么设置为flex:1的那个子盒子宽度就会自动缩小；如果这些子盒子的总宽度小于父盒子的总宽度时，那么设置为flex: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>Document</title>
<style>
.father{
display: flex;
border: solid 1px black;
width: 900px;
height: 800px;
}
.son1, .son2, .son3{
width: 200px;
}
.son1{
background-color: aqua;
width: 200px;
}
.son2{
background-color: red;
width:200px;
}
.son3{
background-color: yellowgreen;
width:500px;
/* flex: 1; */
}
</style>
</head>
<body>
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
</div>
</body>
</html>
7、知识点学习
1、让某坨东西居于右侧的方法：
-
弹性布局，space-between，来个空盒子
<div style="display:flex; justify-content:space-betweent"> <div></div> <!--为了满足space-between> <div> content... </div> </div> -
定位布局
<div style="position:relative"> <!--下面的div盒子脱标，导致上面的父盒子没有高度；下面的div盒子的高度和宽度是content实际的高度和宽度而上面的父盒子没有脱离标准流，父盒子的宽度是浏览器的宽度而高度是父盒子内容的高度--> <div style="position:absolute; right:0px"> content... </div> </div>
2、JS
-
arr.Slice和arr.Splice的区别，Slice是数组截取，而Splice可以实现数组删除
-
arr.Slice
slice()方法以新的数组对象，返回数组中被选中的元素。slice()方法选择从给定的 start 参数开始的元素，并在给定的 end 参数处结束，但不包括。注释：
slice()方法不会改变原始数组。 -
arr.Splice
<!-- 在位置 2，添加新项目，并删除 1 个项目： --> var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2, 1, "Lemon", "Kiwi"); <!-- 在位置 2，删除 2 个项目： --> var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi"]; fruits.splice(2, 2);
-
-
num.toFix(num)方法，实现Number对象的 “四舍五入”与“指定小数位数”
3、vue中的内置组件<transition></transition>组件
- 主要用于
v-show、v-if或者router-view的过渡动画，分为进场和出场。 <transition>组件name属性比较重要，可以自定义动画效果- 参考
扫一扫
1281
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
