簡單的排版規則:條目之間有兩行空行，每個內容節有壹行空行。標點符號都是漢字。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的說明: