第一次前端实习所学内容
目錄
- 1、Bug：子絕父相與overflow:hidden 與 z-index失效
- 2、Bug：height:100%沒生效
- 3、Bug：element-ui的表格高度與寬度調(diào)整
- 4、Bug：element-ui表格無法換行
- 5、Bug：樣式污染，包一層的理解
- 6、Bug：flex:1的理解
- 7、知識點學習
1、Bug：子絕父相與overflow:hidden 與 z-index失效
1、如果兒子盒子設(shè)置了position:absolute，父親盒子設(shè)置了position:relative; overflow:hidden;，那么兒子盒子移出父親盒子邊界后，就會被爺爺盒子吃掉一樣。所以無論兒子盒子的z-index設(shè)置得再大，也不能覆蓋爺爺盒子的內(nèi)容。
2、解決辦法是：取消掉父盒子的position:relative;，給爺爺盒子加上position:relative，使得兒子盒子的直接父盒子變成爺爺盒子，就可以繞過父盒子的overflow:hidden
3、第二個解決辦法是，保留父盒子的position:relative;，取消父盒子的overflow:hidden即可
4、z-index失效反思：
-
網(wǎng)上:
（1）z-index只對開啟了定位的元素生效
（2）同一級父元素下的層疊效果會受父元素的z-index影響，如果父元素的z-index值很小，那么子元素的z-index值設(shè)置很大也不起作用
-
z-index一般對兄弟盒子(這兩個盒子開啟了定位)之間起作用，對于有父子關(guān)系的盒子(這兩個盒子開啟了定位)，那么z-index可能也是失效的。
- 如果父親盒子開啟了定位
- 如果父盒子設(shè)置了z-index值，那么兒子的z-index無論設(shè)置多小，都不能隱藏在父盒子的下方（z-index失效）
- 如果父盒子沒有設(shè)置z-index值，那么兒子的z-index設(shè)置為負值，可以隱藏在父盒子下方（生效）
- 如果父親盒子沒有開啟定位，爺爺盒子開啟了定位(relative或者absolute或fixed)，兒子的z-index設(shè)置為負值，那么可以隱藏在父親盒子的下方（生效）
- 如果父親盒子開啟了定位
5、 絕對定位元素相對的元素是它最近的一個祖先，該祖先滿足：position的值必須是：relative、absolute、fixed，若沒有這樣的祖先則相對于body進行定位**。偏移值由其top、bottom、left、right值確定。（參考）
6、 通常，為了讓DIV子元素超出部分隱藏，都是在父元素設(shè)置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的表格高度與寬度調(diào)整
包一層樣式就可以解決，樣式可能被別人污染了。
el-table的高度由<el-table></el-table>的屬性來決定
- height，接受一個string或者number，能被內(nèi)聯(lián)style中寫的高度覆蓋
- max-height，表格最大高度，若表格的實際高度大于它，那么就會出現(xiàn)滾動條
el-table的寬度取決于<el-table-column>標簽的屬性 以及 <el-table>的style中設(shè)置width
- 在<el-table>中設(shè)置的width是設(shè)置了表格的寬度上限(相當于裝表格容器的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、關(guān)于繼承性
-
不會繼承的CSS屬性：盒子相關(guān)屬性
比如說：border: solid 1px；因為border是盒子的邊
-
會繼承的CSS屬性：字體相關(guān)屬性
比如說font- color- text- line-
2、關(guān)于層疊性
因為CSS具有層級疊加性，包一層，里面寫的樣式的權(quán)重就更高了。
#header #left ul li.first a的權(quán)重就是100+100+1+1+10+1=213
假如這個a標簽有一個選擇器叫做id=“aa”，那么 (#header #left ul li.first a)的樣式就可以覆蓋(#aa)的樣式
所謂就近原則是，如果權(quán)重相同時，那么在css區(qū)域，排在后面的css樣式，優(yōu)先級更高。(因為從上到下解析)
3、如果別人設(shè)置了!import怎么辦？
發(fā)消息給那個人，讓他取消!import或者問他有什么辦法在我這邊修改樣式
4、良好的習慣
自己的頁面，在最外面，包一層盒子(比如class=“container”)，然后寫樣式區(qū)域，都在 .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寬度固定后(不設(shè)置flex:1)，另一個item設(shè)置flex:1，那么該盒子會被拉長，占據(jù)所有的空間。
flex-shrink為1是指，當items的總寬度大于彈性盒子的寬度時，每個盒子該如何壓縮的問題。如果有兩個item，一個item的寬度固定，另外一個item的寬度不固定(隨著盒子內(nèi)容的增加而增加)，那么固定寬度的item寬度仍然固定，不固定寬度的item的width不斷地減小(隨著盒子內(nèi)容的增加)。如果不設(shè)置flex:1，那么每個item的width都要相應的減少。如果設(shè)置了flex:1，那么該item的width相當于為0，然后所有item的總width就小于容器的width，那么起作用的就是flex-grow，那么設(shè)置了flex:1的盒子的width就會被拉伸到占滿剩余空間。
flex-basis為auto，表示默認以每個item的width為計算，如果明確設(shè)置了flex-basis的值，那么每一個item的width都被覆蓋為設(shè)置的flex-basis的值。(已驗證)
使用flex:1，那么就不用設(shè)置該item的寬度，該item的寬度就被設(shè)置為了0%(因為flex-basis被設(shè)置了成0%)，但要設(shè)置其他的item的寬度，這樣才能使設(shè)置了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、讓某坨東西居于右側(cè)的方法：
彈性布局，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實際的高度和寬度而上面的父盒子沒有脫離標準流，父盒子的寬度是瀏覽器的寬度而高度是父盒子內(nèi)容的高度--> <div style="position:absolute; right:0px">content...</div> </div>2、JS
arr.Slice和arr.Splice的區(qū)別，Slice是數(shù)組截取，而Splice可以實現(xiàn)數(shù)組刪除
-
arr.Slice
slice() 方法以新的數(shù)組對象，返回數(shù)組中被選中的元素。
slice() 方法選擇從給定的 start 參數(shù)開始的元素，并在給定的 end 參數(shù)處結(jié)束，但不包括。
注釋：slice() 方法不會改變原始數(shù)組。
-
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)方法，實現(xiàn)Number對象的 “四舍五入”與“指定小數(shù)位數(shù)”
3、vue中的內(nèi)置組件<transition></transition>組件
- 主要用于v-show、v-if或者router-view的過渡動畫，分為進場和出場。
- <transition>組件name屬性比較重要，可以自定義動畫效果
- 參考
總結(jié)
以上是生活随笔為你收集整理的第一次前端实习所学内容的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 华为服务器怎么修改启动项,服务器启动项设
- 下一篇： CEF | CEF浏览器客户端能扩展：实