1.一個(gè)合格的前段,第一步就是頁(yè)面畫的好,在實(shí)現(xiàn)項(xiàng)目時(shí)，大家都喜歡用插件,列element+ ui （實(shí)現(xiàn)后臺(tái)管理的）,寫移動(dòng)端H5頁(yè)面也是喜歡MIN-UI等等諸多現(xiàn)成的網(wǎng)頁(yè)。還是一句話有時(shí)候用人家的還不如自己去寫,前提條件，自己熟練掌握技術(shù)。
<div class="dakuang_style">
<div class="content_l">我在左邊</div>
<div class="content_z">我在中間</div>
<div class="content_r">我在右邊</div>
</div>
<style>
.dakuang_style {
display: flex; //開啟彈性盒
justify-content: space-between; // 父元素排列方式
align-items: center; // 子元素排列方式
flex-direction: colum; //豎向的時(shí)候?qū)憴M向不需要
}
.content_l {
width: 20%;
height: 100px;
background: blue;
}
.content_z {
flex: 1; //所有子元素剩下的寬度
height: 100px;
background: red;
}
.content_r {
width: 40%;
height: 100px;
background: yellow;
}
<style>
/** 上方就是H5通用布局方式 俗稱三欄布局，橫向豎向都可以使用。并且配合百分比可達(dá)成頁(yè)面自適應(yīng),如果UI設(shè)計(jì)稿給出比例更好 **/
2.定位
使用場(chǎng)景里層小盒子: 給大盒子posion: releative;小盒子posion: absolute;。left,top,bottom,right 上下左右給長(zhǎng)度單位即可。（不建議多次使用）一個(gè)頁(yè)面全是定位豈不是很亂頁(yè)面初始話一進(jìn)來就亂七八糟,過一兩秒才顯示正常。讓人感覺頁(yè)面是湊出來的,應(yīng)用場(chǎng)景最好是遮罩彈框，或者你要寫動(dòng)畫配合anmation-css使用。這幾種情況使用定位是極好的。利用margin 上下左右撐開豈不是美滋滋。單位百分比呢豈不是自適應(yīng)了。列:margin-left: 10%; 這一眼看去不就是父元素總寬度百分之10.隨著你縮放屏幕間距也會(huì)動(dòng)態(tài)改變。一切都是瀏覽器幫你計(jì)算，豈不是大盒子彈性盒自適應(yīng)，小盒子間距自適應(yīng)。是不是可以代替rem了嗎（答案是當(dāng)然不可能,除非UI和前段開發(fā)是一個(gè)人。但是要求他給出比例可以嗎-->誒，這就可以嗎，比如左邊是圖片右邊是列表且是左右布局自適應(yīng)?？梢詥朥I獲取比例哦什么16:13.17:14,再搭配calc函數(shù)豈不是美滋滋寫法如下<width: calc(100vw * 16/29);> 很簡(jiǎn)單吧另一個(gè)盒子就是<width: calc(100vw * 13/29)）。
3. VUE框架中你使用其他插件改別人的css怎么改。
vue組件中每一個(gè)樣式都帶有一個(gè)私有空間scope。自己擁有，如何穿透到另一個(gè)組件使用它呢。
/deep/ 深度穿透。你組件牛皮哦歹scope，呢我就deep你。/deep/ .box{background: red} 。方法很暴力但是我喜歡。原里都一樣，你在更改他人插件樣式就給他deep。
綜上所述:自己開發(fā)樣式選擇彈性盒即可，如果遇到動(dòng)畫，你就用anmition-css 。在css標(biāo)簽上使用動(dòng)態(tài)添加class類名
<div :class="[active ? 'box1': 'box2']"></div>
寫樣式是我建議使用scss里層的嵌套關(guān)系層就更對(duì)象嵌套一樣。我拿上面的三欄布局距離:
.dakuang_style {
.content_l {}
.content_z {}
.content_r {}
}
當(dāng)大家遇到列表中有個(gè)div不一樣時(shí)不妨使用屬性選擇器:divnth-child(1){}
<div name='123' ></div>
div['123'] {}
這種是屬于添加自定義屬性你可以通過這個(gè)屬性選到這個(gè)css從而添加樣式。
