2023年3月11日CSS知識小記

2021-09-12 08:53:54 字數 2250 閱讀 5083

1、對於scss的巢狀寫法,其實可以極大程度的縮減**,比如你可以定義5個相同模組的卻有不同背景色的布局,那麼你可以統一寫乙個

然後在熱定的第幾號偽類元素中,修改特定樣式。

2、樣式的繼承與選擇,只要層級不亂,祖先級可以直接跳轉至孫輩級。

如圖,我跳了一層el-carousel__contianer,但是樣式依舊生效。說明樣式繼承可以跳躍。

3、如果在乙個盒子中,定義多個標籤,那麼標籤之間會相互擠壓,導致溢位或者變形。

可以看到因為p標籤的占用文件導致高度被擠壓。此時應當使用定位去解決。

然後還是發生了img被擠壓的問題,但是經過20分鐘的元素審查,才發現是 element-ui自帶的元素樣式問題。

果然框架雖然省時,但是還是有一點小bug的。

4、對比左側(官方),右側(個人仿製)

雖然說整體相似度99%但是仍有乙個問題,就是最下方官方的有一層蒙版,使用者體感較適。

經審查元素

果然,官方多了一層蒙版,這一層蒙版是使

區域變半透明黑色。

5、還是元素層級優先順序的問題,在修改element-ui走馬燈效果的底部輪播按鈕顏色時,

我找到好多層級都發現不能覆蓋。要麼就是直接兩個

會變成相同的顏色,。後來發現直

其實很簡單,只要最外層類名覆蓋就可以。

6、當我故作聰明用padding撐開內容區域時,發現,原來background-image那一層蒙版就擴大了,導致極不良好的體驗,所以,item之間要三思而用,padding或者margin。

padding易於分塊且精準。而margin分塊需計算但互不干擾。

7、當我瀏覽美團網的時候,發現調整視窗大小,布局會呈現4-5張的效果。如下

我思考了下,大致思路應該是這樣的。

首先判斷瀏覽器的document.body.clientwitdh。或者@media css

在800px-1000px 改變大盒子寬度比如固定850px

在1000px以上 改變大盒子寬度比如固定1200px

那麼問題來了,裡面的電影數量怎麼改變呢。

思路也如上,就是更具父盒子寬度改變每頁幻燈片個數。

我嘗試了下。

**的核心就是v-for巢狀v-if語句,通過修改乙個pagemovienum值,進而使整個走馬燈改變。

底下是有走馬燈效果的,pagemovienum:2,就是每頁2個film-item。共8/2=4頁

8、然後是關於以前喜歡用連寫的格式寫**,今天才發現**的每個屬性都很重要尤其是在用框架的時候,得清楚知道我到底需要改哪乙個屬性。

9、vue,v-for遍歷陣列的問題。如圖

為何要指定0,menumovie有很多分類,你要指定第幾類的child這個陣列遍歷,如果少了0(指定下標)那麼就會返回undefined。

注vue的三大類,object物件,string字串,array陣列.

10、頁面基礎布局,尤為重要,如:

綠線以下的部分很簡單,就是乙個然後margin: 0 auto即可,

綠線以上的部分看似簡單,實則需要2層div。最外邊一層是為了平鋪綠線(使用者體感),而內層則是margin:0 auto則起到居中內容

2023年11月3日學習總結

這個月還是在搞資料結構,沒有去看其他專題,但是感覺資料結構還是沒有達到融匯貫通的地步,現在做題是很容易把 寫混,理解的不透徹,現在又開了一門新課,還有別的課要考試了,時間比較緊張,雖然還是能擠出時間保證每天兩個小時的訓練時間但是沒有上個月用到時間多了,沒有那麼長的時間來複習了,就有一些不那麼重要記得...

2023年11月6日總結

今天做著題結果codeblocks突然出故障,然後剛寫完的 沒法編譯,我就鼓起勇氣直接交,結果果然就wa了,後來後面的題就想了思路沒寫,很失敗的一次比賽,下次要多安裝幾個編譯軟體。這幾天在做數論的題,但是做的很慢,基本上都是卡在細節處理上,今天下午也是一開始一直不對,除了樣例能過,後來他們說你重敲一...

2023年11月25日總結

這兩天參加了乙個數學系老師舉辦的乙個計算數學學術討論會,聽的有點疲憊。怎麼來形容那,詳細內容肯定是聽不懂的,他們涉及到的東西太過於專業化,但是處理方法,解決問題的思路其實講解的每個人所用到的都是差不多的。即使是我們這樣從未接觸過的都可以聽出這些東西,那為何他們研究了這麼多年,我想其實和acm競賽有許...