第一次前端实习所学内容
目錄
- 1、Bug：子絕父相與overflow:hidden 與 z-index失效
- 2、Bug：height:100%沒生效
- 3、Bug：element-ui的表格高度與寬度調整
- 4、Bug：element-ui表格無法換行
- 5、Bug：樣式污染，包一層的理解
- 6、Bug：flex:1的理解
- 7、知識點學習
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
測試代碼：
<!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屬性比較重要，可以自定義動畫效果
- 參考
總結
以上是生活随笔為你收集整理的第一次前端实习所学内容的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 华为服务器怎么修改启动项,服务器启动项设
- 下一篇： CEF | CEF浏览器客户端能扩展：实