前端樣式實踐出真知系列(二)

2022-01-30 17:40:38 字數 1901 閱讀 7557

1、overflow 屬性規定當內容溢位元素框時發生的事情。

當屬性值為hidden時,元素內容會被修剪,並且其餘內容是不可見的。

哪些元素會被修剪:

超出元素邊框的部分(不管它是內容本身過多導致的 還是通過定位(相對或絕對)導致的  )都將隱藏。

2、maring外邊距祥解:

乙個元素的margin影響了父元素中的內容,則會影響父元素的大小,如果不影響父元素中的內容 而是影響父元素外的內容(比如當父元素沒有padding和border時,可能的情況),不影響父元素的大小,當元素通過margin移動到父元素之外,並且父元素設了overflow等於hidden那麼,子元素的寬高度則不算在父元素中。

maring-bottom為負值時,只會使受影響的元素向上移動,不會使自身向下移動,依次類推(因為本身還是遵循文件流的)

3、margin/padding值為%(百分比)時,是基於父元素的寬高度的百分比

4、css幾種型別樣式的優先順序:

!important>行內樣式|js改變樣式屬性(這兩個優先順序相同,看先後順序,一般js後執行)>id選擇器》類,屬性,偽類 選擇器 >元素標籤,偽元素 選擇器

備註:優先順序相同的後出現的覆蓋掉之前的。優先順序不同的,優先順序高的覆蓋低的

注意覆蓋的緊緊是相同的樣式屬性值,如 :同一優先順序中 background-color和background後出現的會覆蓋掉前面的背景顏色(其它背景屬性不會被覆蓋)。

5、字型屬性

font:16px/22px "microsoft yahei";     縮寫形式  字型大小/行高  字型

6、margin常見問題:

兩個相鄰的塊元素之間,margin-top和margin-bottom之間會重疊,大的涵蓋小的,水平方向不會。解決辦法,兩個元素的margin-top和margin-bottom只使用乙個。

7.擴充套件幾個選擇器:

:first-child   選取其父元素中的第乙個子元素,並且是選擇器特定元素,如 p:first-child   表示選取p元素父元素中的第乙個p元素,如果它(p)不是父元素中的第乙個子元素則選不中。

:last-child   選取其父元素中的最後乙個子元素,並且是選擇器特定元素,如 p:first-child   表示選取p元素父元素中的第乙個p元素,如果它(p)不是父元素中的第乙個子元素則選不中。

:nth-child(n) 選擇器匹配屬於其父元素的第 n (從1開始的)個子元素,並且要是選擇器型別的。p:nth-child(n)表示  選擇p父元素的第n個元素 並且要是p元素

8、禁用瀏覽器預設事件:

//禁用瀏覽器預設事件

$("body").on('touchmove', function (event) );

9、zepto中幾個手機觸控事件:

「touch」模組新增以下事件,可以使用 on 和 off。

繫結事件常用on方法,$("..").on("事件名稱",function(){});

10、content+padding 都會有背景(如果夠大),背景可以通過 background-position屬性定位。

11、首行縮排,字與字直接的距離css樣式屬性設定:

text-indent:20px; /*設定首行縮排*/

letter-spacing:10px;/*字與字間的距離*/

12、:after偽類 選擇器:

:after 選擇器在被選元素的內容後面插入內容。

請使用 content 屬性來指定要插入的內容。

13、解決子級物件使用css float浮動 而父級div不能自適應高度的問題:

div.parent:after

即在父div內容的最後加乙個空的塊級標籤,並清除浮動。

最後乙個最重要,告訴手機該網頁  寬度等於裝置寬度  初始化大小1倍  最小縮放1 最大縮放1  即不可縮放(不設定的話會導致樣式問題)

前端樣式實踐出真知系列(二)

1 css 繼承是指我們設定上級 父級 的css樣式,上級 父級 及以下的子級 下級 都具有此屬性。一般只有文字文字一些樣式具有繼承特性,如文字大小 文字加粗 文字顏色 字型等。其它大多數樣式屬性不會被繼承下來 常見繼承css屬性 font color 2 很多html標籤有自己預設的屬性,這樣有時...

實踐出真知之Oracle篇

儲存過程跑批小迴圈 可根據自己的情況適度修改 declare o ret val number start days varchar2 8 end days varchar2 8 begin start days 20200101 重跑開始日期 日期不固定可根據自己需要的日期進行修改 end day...

實踐出真知 MVC和MVVM

理論來自於實踐,並指導於實踐 佚名 我相信在mvc等理論形成之前,就已經有人在付諸mvc的實踐。只是後來有人總結下來,並指導人們做軟體開發。這種設計典範並不是只有後台的 才有,前端也可以有很好的框架,像react和vue。為什麼這麼強調實踐。因為在我學習mvc理論的時候,我是蒙蔽的。雖然看了很多優秀...