當前位置:吉日网官网 - 紀念幣收藏 - 我在移動終端工作時遇到的Css問題。

我在移動終端工作時遇到的Css問題。

關於css的常見問題大多是移動的。

簡單的排版規則:條目之間有兩行空行,每個內容節有壹行空行。標點符號都是漢字。css的標點符號是英文的。

如果條目編號後跟英文字母,則應為空白,如4。css,並且在“4”之間有壹個空格以及“css”。

1.做手機輪播的時候,橫幅的寬度就是手機屏幕的寬度,輪播上加了左右切換按鈕。位置:絕對;紐扣是絕對的;當定位的元素超過父容器(超過100%)時,會出現滾動條。

第二,移動端有三種布局可供選擇。

1.定位布局

註意:頭部和尾部是固定定位的。中間內容部分的絕對定位,overflow-y:auto;

2.靈活布局(我強烈推薦)

註意:這裏的寫法簡潔,沒有太多兼容性。移動端兼容性更好,可以使用Android 5.1。使用更新的flex聲明。(這個布局是抄襲團隊的。)

3.普通流布局

註意:頭部和尾部仍然是固定的,但是#content部分使用padding-top和padding-bottom來支持頁面。這樣的布局相當垃圾,會給各種頁面帶來莫名其妙的上下留白。

第三,css屬性

1.自動換行:斷字;斷字:全斷;讓壹行連續的數字或英文字母在遇到邊界時自動換行。

2.-WebKit-用戶選擇:無|正常|文本;該屬性禁止用戶選擇和復制文本,同時會使輸入框和選擇框無法獲得焦點,導致無法輸入或選擇。所以在使用該屬性時,註意防止汙染輸入和選擇。

3.css3屬性選擇器。Li[class*='act'],可以選擇類中所有帶有' act '的Li元素。

$('李')。attr('class ')。index of(' act ');先把李的課弄壹下,再判斷是否有‘行為’;

可以通過for循環執行進壹步的操作,

for(var I = 0;我& lt$(“李[class*='act']”)。長度;i++){

$("李[class * = ' act ']")[我]。。。

}

4.去除浮動,解決高度坍塌。

A.偽類(復制bootstrap的實踐)

。clearfix{}

。clear fix:after { display:table;內容:“”;明確:兩者都有;}

B.望妳的實踐

。方框{清除:兩者;溢出:隱藏;}

C.為子元素寫margin-top並向下拖動父元素。

(百度說是W3C標準,只要破壞父母和孩子依附的結構就行。)

為父級編寫border-top,或為父級編寫padding-top。也可以采用方法B,但方法A無效。

5.css高度單位和顏色單位

高度:calc(100 VH-200 px);目前兼容性還不錯。註意,減號兩邊都有空格。

背景:rgba(255,255,255,0.5);Rgb顏色值和顏色透明度。

6.關於padding-top:100%;左填充:100%;

您可以使用這兩個屬性來制作壹個絕對正方形。比如微信朋友圈的照片是9格,qq空間的照片是9格,新浪微博的照片是9格。屏幕寬度未知,壹排三個,每個寬度是33.33333%,但是高度不能寫成百分比。在每個元素中再寫壹個div,寬度為33.3333%。這個div的默認寬度是父div的33.33333%,然後使用padding-top:100%;展開高度,填充頂部:%;即按照現有寬度,padding-top:100%;padding-top的px值與寬度相同,因此形成壹個正方形。在方塊中,位置:絕對;壹個div,寬度:100%;身高:100%;然後把它放在這個格子裏。

每個方塊的間距可以用qq空間的2px透明邊框來做,也可以用左右填充和邊距-底部來做,就像新浪微博壹樣。當有壹張圖和四張圖時,新浪寫另外兩個類來做這件事。

Qq空間是js插件寫的,最大寬度290px,高度按最大寬度計算。

7.0.5px線

A.在qq空間找細線,兼容2倍屏和3倍屏。

@media only屏幕和(-WebKit-min-device-pixel-ratio:1.5),(最小分辨率:120dpi),(-ms-high-contrast:active),(-ms-high-contrast:none) {

action.flex下拉菜單。btn:after,. action.flex:after,.. action.flex:before,.餵。來源:後,。最小評論。hr,。min-comments:n-child(1):after {

-WebKit-transform:scaleY(. 5);

-moz-transform:scaleY(. 5);

-ms-transform:scaleY(. 5);

-o-transform:scaleY(. 5);

變換:scaleY(.5)

}

action.flex下拉菜單。btn:after,。min-comments:n-child(1):after {

-WebKit-transform-origin:100% 0;

-moz-transform-origin:100% 0;

-ms-transform-origin:100% 0;

-o-transform-origin:100% 0;

轉換原點:100% 0

}

. action.flex:after,. action.flex & gt。btn:之後,。餵。來源:after {

-WebKit-transform-origin:0 100%;

-moz-transform-origin:0 100%;

-ms-transform-origin:0 100%;

-o-transform-origin:0 100%;

轉換原點:0 100%

}

}

@僅媒體屏幕和(-WebKit-device-pixel-ratio:1.5){

action.flex下拉菜單。btn:after,. action.flex:after,.. action.flex:before,.餵。來源:後,。最小評論。hr,。min-comments:n-child(1):after {

-WebKit-transform:scaleY(. 6666);

-moz-transform:scaleY(. 6666);

-ms-transform:scaleY(. 6666);

-o變換:scaleY(. 6666);

變換:scaleY(.6666)

}

}

@僅媒體屏幕和(-webkit-device-pixel-ratio: 3) {

action.flex下拉菜單。btn:after,. action.flex:after,.. action.flex:before,.餵。來源:後,。最小評論。hr,。min-comments:n-child(1):after {

-WebKit-transform:scaleY(. 33);

-moz-transform:scaleY(. 33);

-ms-transform:scaleY(. 33);

-o-transform:scaleY(. 33);

變換:scaleY(.33)

}

}

B.weui的方法是

。weui-單元格:在{

內容:“”;

位置:絕對;

左:0;

底部:0;

右:0;

身高:1px;

border-bottom:1px solid # e5e5e 5;

顏色:# e5e5e5

-WebKit-transform-origin:0 100%;

轉換原點:0 100%;

-WebKit-transform:scaleY(0.5);

變換:scaleY(0.5);

z指數:2;

}

8.背景圖片大小背景大小,img標簽對象適合,對象位置。

背景尺寸:包含|封面|自動90% |自動50%;

這是為了以背景圖像的形式顯示圖片。如果使用img元素,

對象適合:填充|包含|覆蓋|無|縮小;(類似於背景尺寸效應)

對象-位置:中心;該值與背景位置的值相同。

如果這兩個屬性壹起使用,img元素src的圖片效果會和背景圖片壹樣,不會因為圖片大小不成比例而失真。不過兼容性不是很好,目前只適合移動使用。

9.防止手機彈出默認菜單。長按img標簽或者A標簽會彈出系統默認菜單(ios上,安卓上沒有)。

-webkit-touch-callout:無;

10.寫文字的行高時,讓文字垂直居中,高度壹起寫,line-height:35px;高度:35px

用appcan做混合app時發現,在華為meta8上,當ul li作為九宮格,li壹行浮動時,每個li都有字符,高度以li所在行的高度展開。無字的李和有字的李的高度是不壹樣的。有的格子有字,有的沒有字,導致九個格子沒有排成三排,有的格子倒了,排成四排。因此,當使用行高使文本居中時,高度和行高都要寫。

11.文本對齊:對齊;

當P標簽中的壹大段文字是左對齊的,除了最後壹行,這就導致段落文字與右側的距離明顯大於左側。

您可以使用此屬性來制作此布局,而無需處理最後壹行的特征:

上面的布局有個bug。最後壹行是空白的,這使得父代更高。原因是父節點認為包括空文本節點在內的所有子節點都占用了空間,即使它們是空格。可以為父ul寫font-size:0;可以去掉底部的空格,然後為後代寫上font-size:14px;去做吧。但是,text-align:justify;畢竟是處理空格(拉伸空格使內部元素橫向分散),所以在html中,如果李連續寫和分段寫,表現結果是不壹樣的,所以這個精彩的布局還是有點不完善,甚至不能用。

12.移除-webkit-的滾動條

# content::-WebKit-滾動條{ display:none;}

設置滾動條樣式

/*滾動條寬度*/

# content::-WebKit-scroll bar { width:5px;}

/*滾動條滑塊*/

# content::-WebKit-scroll bar-thumb { background:rgba(0,0,0,0.25);邊框半徑:3px}

/*滾動條的整個背景*/

# content::-WebKit-scroll bar-track-piece { background:# eee;}

TGuide

/*滾動條*/

::-WebKit-scroll bar { width:10px;身高:10px}

::-WebKit-滾動條-按鈕{display:none}

::-WebKit-scroll bar-track { background-color:black }

::-WebKit-scroll bar-track-piece {背景:#FFF}

::-WebKit-scroll bar-thumb { background-color:# 8e8e 8 e;邊框半徑:5px}

::-WebKit-scroll bar-thumb:hover { background-color:# 3b3b 3b }

::-WebKit-scroll bar-corner { background-color:# 535353 }

/*::-WebKit-scroll bar-resizer { background-color:# ff6e 00 } */

如果前面沒有選擇器,所有帶滾動條的元素都會出現。

設置占位符的樣式。

input::-WebKit-input-placeholder { color:# 999;}

input::-moz-input-placeholder { color:# 999;}

input:-ms-input-placeholder { color:# 999;}

註意-ms-前面有壹個“:”。

14.當移動終端點擊壹行:active時,添加背景色,如Li:active { background:# eee;},應該在body標簽上寫ontouchstart,否則沒有效果。

另壹方面,加入正文可以防止圖片被默認拖動。百度logo可以拖。

15.pageshow()和pagehide()方法。

問題描述:A頁跳轉到B頁,B頁操作結束後返回A頁,A頁的ajax方法無法再次觸發。在appcan中,從B頁返回A頁直接關閉B頁,在微信中,從緩存中檢索。它們都不能再次觸發頁面的ajax。比如改名字,改性別。點擊A頁輸入,跳轉到B頁修改,修改後返回A頁。如果信息沒有刷新,需要主動觸發。

解決方案:您可以監視pageshow方法並使用addEventListener方法。pageshow()方法的觸發條件是只要顯示頁面就會觸發。比如appcan中的B頁疊加在A頁上,關閉B頁,自然顯示A頁,那麽就會觸發A頁的pageshow方法。在微信中,點擊返回會觸發pageshow方法,雖然頁面是從緩存中取出的。Pagehide()顧名思義。

16.

華為meta7,安卓版本4.4.2,位置:相對;位置的元素比率:絕對;的元素級別更高。百度新聞的導航效果也是利用了這壹點。很奇怪。

在這個結構中,i.line是絕對的,每個div都是相對的。在Android 4.4.2上,i.line會被父母的兄弟div屏蔽。

解決辦法是把i.line拿出來,和div是壹個級別的。

17.背景:url()無重復中心,url()無重復中心;妳可以壹次放兩張圖片,用逗號隔開。

18.關於手機軟鍵盤彈出覆蓋頁面的問題。

核心解決方案是使用文檔。active element . scrollintoview(false);參數false表示activeElement的元素與頁面底部對齊,true表示activeElement的元素與頁面頂部對齊。該方法具有良好的兼容性。

另壹種方法類似於文檔。active element . scrollintoviewifneeded();這個方法不是很有效,不如上面那個。

19.小說和報紙排版中常用的分欄版式。

五個常用屬性中的四個知道效果:

列寬:;每列的寬度。

列間距:;列之間的間距。

列填充:;不知道有什麽用。

列規則:;列之間的直接分隔線與border屬性具有相同的效果。

列計數:;總共有幾列* * *?(該屬性受列寬的限制。當column-width和column-count同時寫入時,column-width優先,例如總寬度為800px,高度為200px列寬:400像素;列數:4;很明顯,800px最多只能分成兩列,所以計算時優先選擇column-width。)

兼容性小:在ios上,滾動溢出-x:自動水平;的容器不適合直接作為列布局的容器,應該在overflow-x的元素內部嵌套壹個div作為列布局的容器。否則會出現列線和列規不跟隨容器滾動的奇怪現象。另外,column-gap不適合賦值,所以column-gap應該寫成0,列間距可以通過在列布局中填充子元素的左右來完成。

大段文字

。box { width:300 px;身高:14em;溢出-x:auto;}/*滾動容器*/

。col { height:11.9 em;文本對齊:對齊;列數:2;列間距:0;}/*列容器*/

。col & gtp { padding:0 . 5 em;行高:1.2;}/*文本內容的容器,添加左右填充以增加列間距。*/

第四,好像很多webapp都會寫兩個meta標簽。

不確定是否支持16的顏色值。(好像測試過了,16顏色沒有影響。在appcan裏也不行。)

五、壹般不能上傳同壹張圖片。

可以使用$ ('input [type = "file"]')。換行(“”)。最接近的(' form ')。獲取(0)。reset();重置就好了。

第六,Android上的touchmove有壹個神奇的bug。百度表示,Android上touchmove的瞬間會觸發touchcancel,所有的觸摸事件都會被取消。IOS上不存在這個問題。

解決方法是:在touchmove中編寫e . prevent default();去做吧。但在這種情況下,妳不能用手指滑動頁面來滾動。頁面將不可滾動。

七。靈活布局

1之後的版本。2012

將顯示:-webkit-flex添加到父級;顯示器:flex

柔框中子元素的排列方向稱為主軸,與主軸垂直的方向稱為橫軸。

伸縮盒中的子元素可以用作項目。

註意:當設置為flex時,其子元素的float、clear和vertical-align屬性將無效。

A.作用於父對象的六個屬性:伸縮方向、伸縮環繞、伸縮流動、內容對齊、項目對齊和內容對齊。

//子元素的排列方向

Flex-direction:row(默認,從左到右)| row-reverse(從右到左)| column(從上到下)| column-reverse(從下到上);

//子元素是否換行?

Flex-wrap:nowrap(默認,不換行)| wrap | wrap-reverse(換行,但第壹行在下面);

//子元素排列方向和子元素是否換行的簡寫。

flex-flow:row nowrap;(默認值,從左到右,不換行。)

//項目(子元素)在主軸上對齊

Just-content: flex-start(默認值,從起點開始)| flex-end(從終點開始)| center | space-between(第壹個和第二個元素靠近邊界,其他元素等距)| space-around(每項兩邊等距,相當於每項加壹個邊距,左右邊距相等。因此,前導和尾隨元素與邊界隔開。);

//橫軸上項目(子元素)的對齊方式

align-items:flex-start | flex-end | center | baseline | stretch(默認值,橫軸方向全父項);

//多軸對齊。如果只有壹個軸,該屬性將不起作用。

align-content:flex-start | flex-end | center | space-between | space-around | space-around | space-around |每個軸兩側的間距相等。軸間距是軸與邊框間距的兩倍,首行和末行不會緊貼邊框)| stretch(默認值,覆蓋整個交叉軸);

(align-content:拉伸;第壹個軸與邊框對齊,其他軸平均劃分為父間隙。)

B.作用於項目(子元素)的六個屬性:order、flex-grow、flex-shrink、flex-basis、flex、align-self。

//子元素的排列順序

訂單:0(默認)| 1 | 2 | 3...

//項目(子元素)的放大比例

Flex-grow:0(默認值,默認情況下不放大,盡管還有空間)| 1 | 2 | 3...

//項目的縮減比例

Flex-shrink:1(默認值,空間不夠時項目會收縮)| 0(反正不收縮);

//項目占用的主軸空間

彈性基礎:自動(默認值,項目的原始大小)|固定值(200px,50%,100%...);

//flex-grow、flex-shrink和flex-basis flex的簡稱:0 1 auto;;

Flex:0 1 auto(默認值,有多余空間就不放大,空間不足就縮小,默認占用的空間是自己的大小);

flex:自動;= & gtflex:1 1 auto;根據空間的大小,可以放大或縮小。(有兼容性問題,chrome可以正常解析flex:auto;-flex:1 1 auto;但是IE很搞笑。IE10解析Flex:auto-Flex:10 auto;只放大,不縮小。Flex:自動;由IE11解決;和chrome壹樣,可以放大縮小。所以在使用這個屬性的時候,應該寫完整的值,而不是簡寫。)

flex:無;- flex:0 0自動;不放大,不縮小。

//單個項的對齊方式不同於其他項,會覆蓋父項的align-items;

Align-self:auto(默認值,繼承父align-items的值)| flex-start | flex-end | center | baseline | stretch;除了auto,其他都與父align-items屬性壹致。

小心使用align-self:stretch;和align-items:拉伸;

2.2009版

目前新版本支持的很好,所以老版本直接寫了個前綴。

顯示:-WebKit-box;顯示器:-ms-flexbox;

如果子元素有display:inline,應該寫成display:block;不需要版本2012。

A.父母的五種屬性。-webkit-box-pack,-webkit-box-align,-webkit-box-direction,-webkit-box-orient,-webkit-box-lines .

//主軸上項目的對齊

-webkit-box-pack:start(默認值,從起點開始)| end | center | justify

//橫軸上項目的對齊方式

-webkit-box-align:stretch(默認值,橫軸方向充滿雙親)| start | end | center | baseline

//項目的順序

-webkit-box-direction:normal(默認值,從起點開始)| reverse(從終點開始);

//主軸方向

-webkit-box-orient:horizontal(默認,水平)| vertical | inline-axis(內嵌模式,映射到水平)| block-axis(以塊模式排列,映射到垂直);

//Item(子元素是否換行)

框線:單個(默認值,不允許)|多個(允許);

經過測試,如果沒有瀏覽器支持,該屬性將無法使用。

B.子元素的三個屬性。框形伸縮線,框形伸縮線組,框形序數組.

//是否縮放?

-webkit-box-flex:0(默認值,既不放大也不縮小)| 1 | 2 | 3...;

//子元素排列順序

-Webkit-box-ordinal-group:1 | 2 | 3...從小到大排列。

3.1和2匯總。

2012版本主要比2009版本多了兩個屬性,1是子元素是否換行,flex-wrap,2009的box-lines不起作用。再壹個是主軸上的子元素對齊,就是just-content: space-around在2012;2009年沒有這種效果,但是可以通過添加左右填充值來實現。

如果想兼容2009版的框布局,想換行,只能用浮動布局。

八、html結構嵌套問題

不要在P標簽中嵌套block元素,以及其他block元素,如H、P、dl...將有解析錯誤。您可以在行之間嵌套元素。

同樣,A標簽中沒有A標簽,也不管嵌套多少層。

Html標簽嵌套要按照塊元素包含行間元素的規則來寫。

九。標簽

讓瀏覽器用最新的內核渲染。

X.表單標簽的壹些特征

在移動端,當輸入框獲得焦點時,瀏覽器會彈出壹個軟鍵盤。如果您希望軟鍵盤的回車鍵是壹個搜索詞,您需要根據以下結構編寫此輸入:

描述:onsubmit = ' return false防止表單默認提交,方便自己操作。

輸入類型必須是搜索。

style = ' position:relative;'被添加到輸入中。,防止在ios上點擊搜索按鈕時屏幕閃爍(白屏)。

XI。瀏覽器兼容性

1.關於設置表格寬度。

Firefox和chrome的解析方式不同,chrome會把妳的表格寬度全部轉換成px。Firefox不會,所以在td中寫線條樣式的寬度時,不能混用百分比和px。要統壹,要麽每個td寫百分比的寬度,要麽px;不要寫這些td百分比,那些TD寫px。

2.有的安卓不識別身高:calc();可以使用彈性布局。

十二、KTV字幕效果

實現方式1:

將文本寫兩次,兩個行間元素跨越,並換行相同的文本。

主頁

主頁

或者

主頁

主頁

實現原理是:使兩個內跨寬度相等,其中壹個設置寬度:0%;溢出:隱藏;然後用js動態控制寬度從0%-100%。

實現二:(張新旭說只適用於chrome,但是我測試了壹下,火狐好像也可以。)

實現原理:background-image疊加在background-color上,chrome有壹個私有屬性——WebKit-background-clip:text;意思是切背景,以文字開頭,以文字結尾。效果是背景圖片只顯示文字的書寫路徑,文字以外的空間不顯示背景圖片。重組-Webkit-text-fill-color:透明;將文本渲染的顏色寫為透明,這樣文本路徑會顯示背景圖像。通過改變背景圖片的水平位置,可以顯露出文字和背景圖片下的背景顏色,達到KTV字母效果。

核心css屬性:

背景-圖像:URL();/*純色背景圖像,用於呈現文本顏色,因為文本是透明的。*/

背景-重復:不重復;

-WebKit-背景-剪輯:文本;

-webkit-text-fill-color:透明;

背景-位置:0 0;

改變他就好了。

實施例2的說明:

  • 上一篇:字帖收集俱樂部在哪裏?
  • 下一篇:方苞學者,清代桐城古文派創始人
  • copyright 2024吉日网官网