我在做移動(dòng)端時(shí)遇見的css問題
關(guān)于css常見問題，大多是移動(dòng)端的。
簡單的排版規(guī)則：條目與條目之間空兩行，每條內(nèi)容部分分段空一行。標(biāo)點(diǎn)符號(hào)全部用中文字符。css的標(biāo)點(diǎn)用英文。
條目編號(hào)后面緊跟英文字母的，要空一格，比如 4. css，“4.”和“css”之間有一個(gè)空格。
一、在做手機(jī)輪播圖時(shí)，banner圖的寬度是手機(jī)屏幕的寬度，輪播圖加了左右切換按鈕，按鈕的position:absolute；定位的元素，定位的元素超出父容器時(shí)（超出了100%），會(huì)出現(xiàn)滾動(dòng)條。
二、在移動(dòng)端有3種布局可選。
1.定位布局
說明：頭部、尾部是fixed定位。中間內(nèi)容部分絕對(duì)定位，overflow-y:auto；
2. flex布局（朕極力推薦）
說明：這里寫的簡潔，沒有寫很多兼容，移動(dòng)端兼容性比較好，安卓5.1以上都可以用。用的是較新的flex聲明。（這個(gè)布局是抄襲手淘團(tuán)隊(duì)的。）
3.普通的流式布局
說明：頭部和尾部依然是fixed定位，但是#content內(nèi)容部分則是用padding-top和padding-bottom來支撐頁面，這種布局相當(dāng)垃圾，會(huì)帶來各種頁面上下莫名其妙的留白問題。
三、css屬性
1. word-wrap:break-word； word-break:break-all；讓一行連續(xù)的數(shù)字或英文字母遇到邊界自動(dòng)換行。
2. -webkit-user-select:none | normal | text；這個(gè)屬性是禁止用戶選擇、復(fù)制文字，同時(shí)還會(huì)使input框、select框不能獲取焦點(diǎn)，導(dǎo)致無法輸入或選擇。 所以在使用這個(gè)屬性時(shí)，注意防止對(duì)input和select的污染。
3. css3屬性選擇器。li[class*='act']，可以選中所有class中有‘a(chǎn)ct’的li元素。
$('li').attr('class').indexOf('act'); 只是獲取第一個(gè)li的class，然后判斷是否有‘a(chǎn)ct’;
通過for循環(huán)可以進(jìn)一步操作，
for(var i = 0; i < $("li[class*='act']").length; i++){
$("li[class*='act']")[i] . . .
}
4.清除浮動(dòng)，解決高度塌陷
a.偽類(抄襲bootstrap的做法)
.clearfix{}
.clearfix:after{ display:table; content:' '; clear:both; }
b.王妮的做法
.box{ clear:both; overflow:hidden; }
c.對(duì)于子元素寫margin-top把父級(jí)拖下來的情況
（百度說是W3C的標(biāo)準(zhǔn)，只要破壞了父級(jí)子級(jí)緊貼的結(jié)構(gòu)就可以了）
給父級(jí)寫border-top，或者給父級(jí)寫padding-top。采用b方法也可以，a方法無效。
5. css高度單位和顏色單位
height:calc（100vh - 200px）; 目前來看，兼容性還不錯(cuò)。注意，減號(hào)兩邊是有空格的。
background:rgba（255，255，255，0.5）; rgb顏色值 和 顏色透明度。
6.關(guān)于 padding-top:100%; padding-left:100%;
可以利用這兩個(gè)屬性做絕對(duì)正方形。比如微信朋友圈的照片9宮格，qq空間的照片9宮格，sina微博的照片9宮格。屏幕寬度未知，一行排3個(gè)，每個(gè)寬度都是33.33333%，但是高度不能寫百分比了。在每個(gè)寬度為33.3333%的元素里再寫一個(gè)div，這個(gè)div的默認(rèn)寬度就是父級(jí)的33.33333%，再用padding-top:100%;把高度撐開，padding-top:%;就是根據(jù)已有寬度計(jì)算，padding-top:100%;padding-top的px值就和寬度相同，這樣，正方形就做出來了，在正方形里面position:absolute;一個(gè)div，width:100%; height:100%;然后在這個(gè)div里面布局就好。
每個(gè)正方形的間距可以用qq空間的2px的透明邊框來做，也可以像sina微博一樣，用左右padding和margin-bottom來做。一張圖和四張圖的時(shí)候，sina是另外寫兩個(gè)class來做的。
qq空間是js插件寫進(jìn)去的，最大寬度是290px，高度是根據(jù)最大寬度計(jì)算出來的。
7. 0.5px的線
a.發(fā)現(xiàn)qq空間的細(xì)線，兼容2倍屏和3倍屏
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),(min-resolution:120dpi),(-ms-high-contrast:active),(-ms-high-contrast:none) {
.action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after {
-webkit-transform:scaleY(.5);
-moz-transform: scaleY(.5);
-ms-transform: scaleY(.5);
-o-transform: scaleY(.5);
transform: scaleY(.5)
}
.action.flex .dropdown-menu .btn:after,.action.flex:before,.min-comments:nth-child(1):after {
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
transform-origin: 100% 0
}
.action.flex:after,.action.flex>.btn:after,.feed .source:after {
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%
}
}
@media only screen and (-webkit-device-pixel-ratio: 1.5) {
.action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after {
-webkit-transform:scaleY(.6666);
-moz-transform: scaleY(.6666);
-ms-transform: scaleY(.6666);
-o-transform: scaleY(.6666);
transform: scaleY(.6666)
}
}
@media only screen and (-webkit-device-pixel-ratio: 3) {
.action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after {
-webkit-transform:scaleY(.33);
-moz-transform: scaleY(.33);
-ms-transform: scaleY(.33);
-o-transform: scaleY(.33);
transform: scaleY(.33)
}
}
b. weui的作法是
.weui-cells:after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid #e5e5e5;
color: #e5e5e5;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
z-index: 2;
}
8.背景圖片尺寸background-size，img標(biāo)簽object-fit，object-position。
background-size:contain | cover | auto 90% | 50% auto;
這是以背景圖的方式展示圖片的，如果用img元素的話，
object-fit:fill | contain | cover | none | scale-down;（和background-size效果類似）
object-position:center; 和background-position的取值一樣。
這兩個(gè)屬性一起用的話，就能讓img元素src的圖片效果像背景圖片的效果一樣，不會(huì)因?yàn)閳D片尺寸不成比例而走形。但是兼容性不太好，目前只適合在移動(dòng)端用。
9.阻止手機(jī)彈出默認(rèn)菜單，長按img標(biāo)簽或者長按a標(biāo)簽會(huì)彈出系統(tǒng)默認(rèn)菜單（ios上，安卓上沒測）。
-webkit-touch-callout:none;
10.給文字寫行高時(shí)，讓文字垂直居中時(shí)，要把高度也一起寫了，line-height:35px; height:35px;
在用appcan做hybrid app時(shí)，發(fā)現(xiàn)在華為meta8上，用 ul li 做九宮格，li 浮動(dòng)排在一行時(shí)，每個(gè) li 有文字，高度用li的行高撐開的，沒有文字的 li 和有文字的 li 的高度是不一樣的。有的格子有文字有的沒有文字，導(dǎo)致九個(gè)格子沒有排在3行，有格子掉下去了，排成了4行。所以，在用行高讓文字居中時(shí)，高度和行高要都寫上。
11. text-align:justify;
p標(biāo)簽內(nèi)大段文字時(shí)，除了最后一行，其余的文字都是左對(duì)齊，導(dǎo)致段落文字距離右邊間距明顯大于左邊。
可以利用這個(gè)屬性不處理最后一行的特性，做這種布局：
上面這個(gè)布局有一點(diǎn)bug，最后一行是留白，把父級(jí)撐高了，原因是父級(jí)認(rèn)為所有子代，包括空文本節(jié)點(diǎn)都是占據(jù)空間的，哪怕空格，也占據(jù)空間。可以給父級(jí) ul 寫 font-size:0；就能把底部留白去除了，然后給子代再寫font-size:14px;就可以了。 但是，text-align:justify;畢竟是處理空格（拉伸空格來使內(nèi)部元素水平分散），所以在html中，li 要是連著寫和分段寫，表現(xiàn)結(jié)果是不一樣的，所以這種奇妙的布局還是有些許不完美，甚至不能用。
12.去除-webkit-的滾動(dòng)條
#content::-webkit-scrollbar{ display：none; }
設(shè)置滾動(dòng)條樣式
/*滾動(dòng)條寬度*/
#content::-webkit-scrollbar{ width:5px; }
/*滾動(dòng)條滑塊*/
#content::-webkit-scrollbar-thumb{ background:rgba(0,0,0,0.25); border-radius:3px; }
/*滾動(dòng)條的整個(gè)背景*/
#content::-webkit-scrollbar-track-piece{ background:#eee; }
TGuide
/* scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-button{display:none}
::-webkit-scrollbar-track{background-color:black}
::-webkit-scrollbar-track-piece{background:#FFF}
::-webkit-scrollbar-thumb{background-color:#8E8E8E;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background-color:#3B3B3B}
::-webkit-scrollbar-corner{background-color:#535353}
/*::-webkit-scrollbar-resizer{background-color:#FF6E00}*/
前面不加選擇器表示，所有出現(xiàn)滾動(dòng)條的元素。
13.設(shè)置placeholder的樣式
input::-webkit-input-placeholder{ color:#999; }
input::-moz-input-placeholder{ color:#999; }
input:-ms-input-placeholder{ color:#999; }
注意 -ms- 前面是一個(gè) “ ：”。
14.移動(dòng)端點(diǎn)擊某一行 :active 時(shí)添加背景色，比如 li:active{ background:#eee; } 時(shí)，要給 body標(biāo)簽上寫ontouchstart，否則沒有效果。
另一方面，給body添加，可以阻止圖片被默認(rèn)拖拽。百度的logo就可以被拖拽。
15.pageshow（）和pagehide（）方法。
問題描述：A頁面跳轉(zhuǎn)到B頁面，在B頁面操作后，返回到A頁面，A頁面的ajax方法不能被再次觸發(fā)。appcan里面從B頁面返回A頁面是直接關(guān)閉了B頁面，微信里是從緩存里取。這兩者都不能再次觸發(fā)A頁面的ajax。比如，修改姓名，修改性別。從A頁面點(diǎn)擊input跳轉(zhuǎn)到B頁面進(jìn)行修改操作，修改完成之后返回A頁面，發(fā)現(xiàn)信息沒有刷新，此時(shí)需要主動(dòng)觸發(fā)。
解決方法：可以監(jiān)聽pageshow方法，用addEventListener方法進(jìn)行監(jiān)聽。pageshow（）方法的觸發(fā)條件是，只要頁面被顯示就觸發(fā)，比如appcan里的B頁面覆蓋在A頁面，把B頁面關(guān)閉，A頁面自然就展現(xiàn)出來了，那么A頁面的pageshow方法就會(huì)觸發(fā)；微信里，點(diǎn)擊返回，雖然是從緩存里取頁面，但也會(huì)觸發(fā)pageshow方法。pagehide（）顧名思義。
16.關(guān)于position。
華為meta7，安卓版本4.4.2，position:relative; 的元素比position:absolute; 的元素層級(jí)要高。百度新聞的導(dǎo)航效果，也是利用了這個(gè)。很奇怪。
這種結(jié)構(gòu)，i.line是absolute，每個(gè)div都是relative，安卓4.4.2上 i.line 會(huì)被父級(jí)的兄弟div遮擋住。
解決辦法是，把 i.line 拿出來，和div同級(jí)。
17. background:url() no-repeat center, url() no-repeat center; 可以一次性放兩個(gè)圖片，中間用逗號(hào)隔開。
18.關(guān)于移動(dòng)端軟鍵盤彈起，蓋住頁面的問題。
核心解決辦法是利用 document.activeElement.scrollIntoView(false); 參數(shù)false，表示activeElement的元素與頁面下邊對(duì)齊，true表示activeElement的元素與頁面上邊對(duì)齊。這個(gè)方法兼容性很好。
另一個(gè)方法與之類似 document.activeElement.scrollIntoViewIfNeeded(); 這個(gè)方法效果不是很好，沒有上面那個(gè)好用。
19.常見于小說、報(bào)紙排版的column布局。
常用的5個(gè)屬性有4個(gè)是知曉效果的：
column-width:; 每列的寬度。
column-gap:; 列與列之間的間距。
column-fill:; 不知有何軟用。
column-rule:; 列與列直接的分割線，與border屬性效果一樣。
column-count:; 總共分多少列。（這個(gè)屬性受column-width限制，當(dāng)同時(shí)寫上column-width和column-count時(shí)，以column-width優(yōu)先，比如總寬度800px，height:200px; column-width:400px; column-count:4; 顯然，800px最多只能分2列，所以優(yōu)先以column-width進(jìn)行計(jì)算。）
小兼容：ios上，橫向滾動(dòng) overflow-x:auto; 的容器不適合直接當(dāng)成分欄布局的容器，應(yīng)該在 overflow-x 的元素內(nèi)嵌套一個(gè)div當(dāng)做分欄布局的容器。否則會(huì)出現(xiàn)，分欄線，column-rule不跟隨容器滾動(dòng)的奇異現(xiàn)象。另外，column-gap不適合賦值，應(yīng)當(dāng)將column-gap寫成0，列與列之間的間距可以用分欄布局的子元素的左右padding來做。
大段文字
.box{ width:300px; height:14em; overflow-x:auto; } /*滾動(dòng)的容器*/
.col{ height:11.9em; text-align:justify; column-count:2; column-gap:0; } /*分欄的容器*/
.col > p{ padding:0 .5em; line-height:1.2; } /*文字內(nèi)容的容器，加左右padding以增加列與列之間的間距。*/
四、貌似很多webapp都會(huì)寫兩個(gè)meta標(biāo)簽
不確定是否支持16進(jìn)制的顏色值。（好像測試過，16進(jìn)制顏色沒有效果。在appcan里也沒有效果。）
五、 一般不能上傳相同圖片
可以用 $('input[type="file"]').wrap('').closest('form').get(0).reset(); 重置后就可以了。
六、在安卓上touchmove出現(xiàn)了神奇的bug，百度上說，安卓上touchmove的一瞬間就會(huì)觸發(fā)touchcancel，touch事件就全部被取消了。IOS上是沒有這個(gè)問題的。
解決方法是：在touchmove里寫e.preventDefault();即可。但是這樣的話，手指滑動(dòng)頁面就不能scroll了。頁面將無法滾動(dòng)了。
七、flex布局
1. 2012年以后的版本
給父級(jí)添加 display:-webkit-flex; display:flex;
flex盒子內(nèi)子元素的排列方向稱作主軸，與主軸垂直的稱作交叉軸。
flex盒子內(nèi)的子元素可以被作項(xiàng)目。
注意：設(shè)為flex后，其子元素的float、clear、vertical-align屬性就會(huì)失效。
a.作用于父級(jí)的6個(gè)屬性：flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content。
//子元素的排列方向
flex-direction:row（默認(rèn)值，從左到右） | row-reverse（從右到左） | column（從上到下） | column-reverse（從下到上）;
//子元素是否換行
flex-wrap:nowrap（默認(rèn)值，不換行） | wrap（換行） | wrap-reverse（換行，但第一行在下方）;
//子元素排列方向和子元素是否換行的簡寫
flex-flow:row nowrap;（默認(rèn)值，從左到右，不換行。）
//項(xiàng)目（子元素）在主軸上的對(duì)齊方式
justify-content:flex-start（默認(rèn)值，以起點(diǎn)為始） | flex-end（以終點(diǎn)為始） | center（居中） | space-between（首尾兩個(gè)元素緊貼邊界，其余元素之間間隔相等） | space-around（每個(gè)項(xiàng)目的兩側(cè)間隔相等，相當(dāng)于給每個(gè)項(xiàng)目加了margin，并且左右margin相等。所以首尾元素與邊界都是有間距的。）;
//項(xiàng)目（子元素）在交叉軸上的對(duì)齊方式
align-items:flex-start（以起點(diǎn)為始） | flex-end（以終點(diǎn)為始） | center（居中） | baseline（與項(xiàng)目的第一行文字的基線對(duì)齊） | stretch（默認(rèn)值，在交叉軸方向撐滿父級(jí)）;
//多根軸線的對(duì)齊方式，如果只有一根軸線，該屬性不起作用。
align-content:flex-start（與交叉軸的起點(diǎn)對(duì)齊） | flex-end（與交叉軸的終點(diǎn)對(duì)齊） | center（與交叉軸的中點(diǎn)對(duì)齊） | space-between（與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布） | space-around（每根軸線兩側(cè)的間隔都相等。軸線之間的間隔比軸線與邊框的間隔大一倍，第一行和最后一行不會(huì)緊貼邊框） | stretch（默認(rèn)值，鋪滿整個(gè)交叉軸）;
（ align-content：stretch; 第一根軸線與邊框?qū)R，其他軸線均分父級(jí)間隙。 ）
b.作用于項(xiàng)目（子元素）的6個(gè)屬性：order，flex-grow，flex-shrink，flex-basis，flex，align-self。
//子元素的排列順序
order:0（默認(rèn)值） | 1 | 2 | 3 . . .
//項(xiàng)目（子元素）的放大比例
flex-grow:0（默認(rèn)值，默認(rèn)不放大，盡管有剩余空間） | 1 | 2 | 3 . . .
//項(xiàng)目的縮小比例
flex-shrink:1（默認(rèn)值，當(dāng)空間不足時(shí)，該項(xiàng)目將縮小） | 0（不論如何，都不縮小）;
//項(xiàng)目占據(jù)的主軸空間
flex-basis:auto（默認(rèn)值，項(xiàng)目本來的大小） | 固定值（200px，50%，100% . . .）;
//flex-grow，flex-shrink，flex-basis的簡寫 flex ：0 1 auto；
flex:0 1 auto（默認(rèn)值，有多余空間也不放大，但空間不足會(huì)縮小，默認(rèn)占據(jù)空間就是自身大小）;
flex:auto; => flex：1 1 auto; 根據(jù)空間大小，可放大可縮小。（有兼容性問題，chrome可以正常解析 flex：auto; -- flex：1 1 auto; 但 IE 就搞笑了，IE10解析出來的flex：auto -- flex：1 0 auto；只放大，不縮小。IE11解析出來的flex：auto；和chrome一樣，可放大可縮小。所以在用這個(gè)屬性的時(shí)候，要寫完整值，不要簡寫。）
flex:none； -- flex：0 0 auto；不放大，也不縮小。
//單個(gè)項(xiàng)目與其他項(xiàng)目不一樣的對(duì)齊方式，會(huì)覆蓋父級(jí)的align-items;
align-self:auto（默認(rèn)值， 繼承父級(jí)的align-items的值） | flex-start | flex-end | center | baseline | stretch; 除了auto，其他的與父級(jí)align-items屬性一致。
注意要活用align-self：stretch;和align-items：stretch;
2. 2009年的版本
目前新版本被支持的很好，所以舊版的直接寫帶前綴的。
display:-webkit-box; display:-ms-flexbox;
子元素如果有display：inline的，要把子元素寫成display：block; 2012年的版本不需要。
a.父級(jí)的5個(gè)屬性。-webkit-box-pack，-webkit-box-align，-webkit-box-direction，-webkit-box-orient，-webkit-box-lines。
//項(xiàng)目在主軸上的對(duì)齊方式
-webkit-box-pack:start（默認(rèn)值，從起點(diǎn)開始） | end | center | justify;
//項(xiàng)目在交叉軸上的對(duì)齊方式
-webkit-box-align:stretch（默認(rèn)值，交叉軸方向撐滿父級(jí)） | start | end | center | baseline;
//項(xiàng)目的排列順序
-webkit-box-direction:normal（默認(rèn)值，以起點(diǎn)為始） | reverse（以終點(diǎn)為始）;
//主軸方向
-webkit-box-orient:horizontal（默認(rèn)值，水平方向） | vertical（垂直方向） | inline-axis（行內(nèi)方式，映射為horizontal） | block-axis（塊方式排列，映射為vertical）;
//項(xiàng)目（子元素是否換行）
box-lines:single（默認(rèn)值，不允許） | multiple（允許）;
經(jīng)測試，沒有瀏覽器支持，這個(gè)屬性不能用。
b.子元素的3個(gè)屬性。box-flex，box-flex-group，box-ordinal-group。
//是否縮放
-webkit-box-flex:0（默認(rèn)值，不放大也不縮小） | 1 | 2 | 3 . . .;
//子元素排列次序
-webkit-box-ordinal-group:1 | 2 | 3 . . . 從小到大排列。
3. 對(duì) 1、2 的小結(jié)。
2012年版本比2009年的版本主要多了兩個(gè)屬性，1個(gè)是子元素是否換行，flex-wrap，2009年的box-lines不起作用。還有一個(gè)是子元素在主軸的對(duì)齊方式，2012年的justify-content:space-around; 2009年的沒有這個(gè)效果，但是可以通過加左右padding值的方式做到。
如果要兼容2009年版本的盒子布局又想換行的，只能改用float布局。
八、html結(jié)構(gòu)嵌套問題
p標(biāo)簽內(nèi)不要嵌套塊元素，其他的像h、p、dl . . .的塊元素都會(huì)發(fā)生解析錯(cuò)誤。可以嵌套行間元素。
類似的，還有a標(biāo)簽里不能再出現(xiàn)a標(biāo)簽，嵌套多少層都不行。
html標(biāo)簽嵌套要按照塊元素包含行間元素的規(guī)則來寫。
九、標(biāo)簽
讓瀏覽器用最新內(nèi)核渲染。
十、form標(biāo)簽一點(diǎn)特性
在移動(dòng)端，input框獲取焦點(diǎn)時(shí)，瀏覽器會(huì)彈出軟鍵盤，想讓軟鍵盤的enter鍵變成搜索兩個(gè)字，需要讓這個(gè)input按照這種結(jié)構(gòu)寫：
說明：onsubmit='return false';阻止表單默認(rèn)提交，便于自己操作。
input 的 type 必須是 search。
input 的 加了style='position：relative;'，防止ios上點(diǎn)擊搜索按鈕會(huì)閃屏（白屏）。
十一、瀏覽器兼容
1.關(guān)于table表格的寬度設(shè)置問題。
Firefox和chrome的解析方式是不一樣的，chrome會(huì)把你寫的table寬度全部轉(zhuǎn)化成px。Firefox則不會(huì)，所以在td寫行間樣式寬度時(shí)，不能百分比和px混用，要統(tǒng)一，要么每個(gè)td都寫百分比的寬，要么都寫px的寬；不要這幾個(gè)td寫百分比，那幾個(gè)td寫px。
2.某些安卓不識(shí)別height:calc（）; 可以用flex布局代替。
十二、KTV字幕效果
實(shí)現(xiàn)方式1：
把文字寫兩遍，兩個(gè)行間元素span，包裹相同的文字。
首頁
首頁
或者
首頁
首頁
實(shí)現(xiàn)原理是：讓內(nèi)部兩個(gè)span寬度相等，其中一個(gè)設(shè)置width:0%；overflow:hidden; 然后用js動(dòng)態(tài)控制width從0% -- 100%。
實(shí)現(xiàn)方式2：（張鑫旭說只適用于chrome，但是我測了下，好像firefox也是可以的。）
實(shí)現(xiàn)原理：background-image是覆蓋在background-color上的，chrome有個(gè)私有屬性 -webkit-background-clip:text; 意為背景裁切，以文字為裁切起止。效果就是背景圖片只會(huì)展示文字的書寫路徑，除了文字的其他部分空間不展示背景圖。再結(jié)合-webkit-text-fill-color:transparent; 將文字渲染的顏色寫為透明，這樣，文字路徑就透出了背景圖。再改變背景圖片的水平位置，就能露出文字和背景圖片下的背景顏色，就做到KTV字母效果了。
核心的css屬性：
background-image:url(); /*純色的背景圖，用來渲染文字顏色，因?yàn)槲淖质峭该鞯摹?/
background-repeat:no-repeat;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-position:0 0;
↑改變他就可以了。
關(guān)于實(shí)現(xiàn)方式2的圖示：
資嫻15382416699： 我每次做好HTML給程序員套就會(huì)出現(xiàn)css問題 怎么一回事?是我的問題?
興安盟調(diào)速： ______ 很少遇到這種問題,一般你要想到的是,你的工作能給程序員帶來多大的便捷,例如很多內(nèi)容的適應(yīng),測試時(shí)會(huì)出現(xiàn)的問題,還有就是盡可能不讓程序員碰CSS,讓程序員更易懂你的結(jié)構(gòu),例如XHTML注釋,合理的注釋,加上內(nèi)容的提示.總之多溝通,同樣的,你的價(jià)值還是決定編輯人員和用戶的操作習(xí)慣.設(shè)計(jì)師是你上面要考慮你的,你要考慮程序員開發(fā),和編輯的操作,用戶的使用.
資嫻15382416699： 如何全面解決 CSS 在不同瀏覽器下的兼容問題 -
興安盟調(diào)速： ______ 常見的瀏覽器兼容性問題與解決方案大致有以下九種形式: 一、不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外邊界和內(nèi)填充不同 問題表現(xiàn):不加樣式控制下,margin和padding差異較大 解決方案:css里 *{margin:0; padding:0;} 備注:這是最常見也是最易...
資嫻15382416699： 求較新較全的css兼容性解決方案? -
興安盟調(diào)速： ______ 瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)丁和內(nèi)補(bǔ)丁不同 問題癥狀:隨便寫幾個(gè)標(biāo)簽,不加樣式控制的情況下,各自的margin 和padding差異較大. 碰到頻率:100% 解決方案:CSS里 *{margin:0;padding:0;} 備注:這個(gè)是最常見的...
資嫻15382416699： div+css怎么樣在移動(dòng)端才不顯示啊?? -
興安盟調(diào)速： ______ 把那個(gè)指定的div 給一個(gè)名字 id 或者 class 然后用urlfrom 判斷是移動(dòng)端還是電腦端,或者直接用屏幕寬度判斷.如果是手機(jī)端 就用jquery 把那個(gè)div層級(jí)隱藏掉或者直接remove掉
資嫻15382416699： 網(wǎng)頁制作,CSS排版遇到問題了!!!!!!!!!!!!!
興安盟調(diào)速： ______ 當(dāng)兩個(gè)容器嵌套時(shí),如果外層容器和內(nèi)層容器之間沒有別的元素,firefox會(huì)把內(nèi)層元素的margin-top作用與父元素. 也就是說因?yàn)樽訉邮歉笇拥牡谝粋€(gè)非空子元素,所以使用margin-top會(huì)發(fā)生這個(gè)錯(cuò)誤. 解決的辦法有兩個(gè): 1、使用浮動(dòng)來解決,即將子層代碼改為:<div style=＂margin-top:200px;float:left＂;>子層</div> 2、使用padding-top來解決,即: <div style=＂padding-top:200px;＂> <div>子層</div> </div>
資嫻15382416699： 制作網(wǎng)頁時(shí),外鏈CSS 更新問題 -
興安盟調(diào)速： ______ 1;肯定是你哪里定義的沖突了.2;你可以把你的文件打包傳上來讓我們看看.3;不然的話肯定是有改變的.4;你把font-size:2em;改成font-size:12px;然后把數(shù)字依次12改成18,24看下.記得保存文件,然后刷新頁面.
資嫻15382416699： 關(guān)于css網(wǎng)頁布局的問題 -
興安盟調(diào)速： ______ 再用一個(gè)div包含它們,,然后設(shè)置寬度為三個(gè)層的和或者稍大些..
資嫻15382416699： html每次寫導(dǎo)航總是會(huì)遇到這個(gè)問題.但是又不知道怎么改CSS -
興安盟調(diào)速： ______ 一句一句看,看看是不是有標(biāo)簽沒有回,然后就是看看浮動(dòng)清楚掉了沒有.或者把代碼刪掉(先備份),寫一點(diǎn)就預(yù)覽一下,那里出錯(cuò)了就改過來再接著寫
資嫻15382416699： div+css制作的網(wǎng)頁,在瀏覽器瀏覽時(shí)為何會(huì)出現(xiàn)顯示錯(cuò)誤的網(wǎng)頁或亂碼?
興安盟調(diào)速： ______ 1\顯示錯(cuò)誤的網(wǎng)頁 可能是你的DIV標(biāo)志忘了一半 2\顯示不全 可能你的CSS定位不好 3\亂碼 網(wǎng)頁亂碼,是定義網(wǎng)頁編碼問題,meta屬性里的charset管這個(gè) 同樣會(huì)出這些問題的一個(gè)重要原因是瀏覽器問題 不同的瀏覽器對(duì)網(wǎng)頁的解析過程不一樣,所以網(wǎng)頁也就各異 比如網(wǎng)上很多校內(nèi)網(wǎng)的代碼,在IE很正常,到FIREFOX里就亂七八糟!
資嫻15382416699： css的兼容問題 -
興安盟調(diào)速： ______ 你這個(gè)問題我感覺有點(diǎn)麻煩,似乎是碰到了某個(gè)IE6/7 BUG.由于要求左右兩列等高,在頁面代碼編寫過程中沒有經(jīng)過充分測試;另外一點(diǎn)就是IE對(duì):hover的偽類支持不完整.下面提出臨時(shí)解決辦法:1,將#footer a:hover 的背景屬性 ...
簡單的排版規(guī)則：條目與條目之間空兩行，每條內(nèi)容部分分段空一行。標(biāo)點(diǎn)符號(hào)全部用中文字符。css的標(biāo)點(diǎn)用英文。
條目編號(hào)后面緊跟英文字母的，要空一格，比如 4. css，“4.”和“css”之間有一個(gè)空格。
一、在做手機(jī)輪播圖時(shí)，banner圖的寬度是手機(jī)屏幕的寬度，輪播圖加了左右切換按鈕，按鈕的position:absolute；定位的元素，定位的元素超出父容器時(shí)（超出了100%），會(huì)出現(xiàn)滾動(dòng)條。
二、在移動(dòng)端有3種布局可選。
1.定位布局
說明：頭部、尾部是fixed定位。中間內(nèi)容部分絕對(duì)定位，overflow-y:auto；
2. flex布局（朕極力推薦）
說明：這里寫的簡潔，沒有寫很多兼容，移動(dòng)端兼容性比較好，安卓5.1以上都可以用。用的是較新的flex聲明。（這個(gè)布局是抄襲手淘團(tuán)隊(duì)的。）
3.普通的流式布局
說明：頭部和尾部依然是fixed定位，但是#content內(nèi)容部分則是用padding-top和padding-bottom來支撐頁面，這種布局相當(dāng)垃圾，會(huì)帶來各種頁面上下莫名其妙的留白問題。
三、css屬性
1. word-wrap:break-word； word-break:break-all；讓一行連續(xù)的數(shù)字或英文字母遇到邊界自動(dòng)換行。
2. -webkit-user-select:none | normal | text；這個(gè)屬性是禁止用戶選擇、復(fù)制文字，同時(shí)還會(huì)使input框、select框不能獲取焦點(diǎn)，導(dǎo)致無法輸入或選擇。 所以在使用這個(gè)屬性時(shí)，注意防止對(duì)input和select的污染。
3. css3屬性選擇器。li[class*='act']，可以選中所有class中有‘a(chǎn)ct’的li元素。
$('li').attr('class').indexOf('act'); 只是獲取第一個(gè)li的class，然后判斷是否有‘a(chǎn)ct’;
通過for循環(huán)可以進(jìn)一步操作，
for(var i = 0; i < $("li[class*='act']").length; i++){
$("li[class*='act']")[i] . . .
}
4.清除浮動(dòng)，解決高度塌陷
a.偽類(抄襲bootstrap的做法)
.clearfix{}
.clearfix:after{ display:table; content:' '; clear:both; }
b.王妮的做法
.box{ clear:both; overflow:hidden; }
c.對(duì)于子元素寫margin-top把父級(jí)拖下來的情況
（百度說是W3C的標(biāo)準(zhǔn)，只要破壞了父級(jí)子級(jí)緊貼的結(jié)構(gòu)就可以了）
給父級(jí)寫border-top，或者給父級(jí)寫padding-top。采用b方法也可以，a方法無效。
5. css高度單位和顏色單位
height:calc（100vh - 200px）; 目前來看，兼容性還不錯(cuò)。注意，減號(hào)兩邊是有空格的。
background:rgba（255，255，255，0.5）; rgb顏色值 和 顏色透明度。
6.關(guān)于 padding-top:100%; padding-left:100%;
可以利用這兩個(gè)屬性做絕對(duì)正方形。比如微信朋友圈的照片9宮格，qq空間的照片9宮格，sina微博的照片9宮格。屏幕寬度未知，一行排3個(gè)，每個(gè)寬度都是33.33333%，但是高度不能寫百分比了。在每個(gè)寬度為33.3333%的元素里再寫一個(gè)div，這個(gè)div的默認(rèn)寬度就是父級(jí)的33.33333%，再用padding-top:100%;把高度撐開，padding-top:%;就是根據(jù)已有寬度計(jì)算，padding-top:100%;padding-top的px值就和寬度相同，這樣，正方形就做出來了，在正方形里面position:absolute;一個(gè)div，width:100%; height:100%;然后在這個(gè)div里面布局就好。
每個(gè)正方形的間距可以用qq空間的2px的透明邊框來做，也可以像sina微博一樣，用左右padding和margin-bottom來做。一張圖和四張圖的時(shí)候，sina是另外寫兩個(gè)class來做的。
qq空間是js插件寫進(jìn)去的，最大寬度是290px，高度是根據(jù)最大寬度計(jì)算出來的。
7. 0.5px的線
a.發(fā)現(xiàn)qq空間的細(xì)線，兼容2倍屏和3倍屏
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),(min-resolution:120dpi),(-ms-high-contrast:active),(-ms-high-contrast:none) {
.action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after {
-webkit-transform:scaleY(.5);
-moz-transform: scaleY(.5);
-ms-transform: scaleY(.5);
-o-transform: scaleY(.5);
transform: scaleY(.5)
}
.action.flex .dropdown-menu .btn:after,.action.flex:before,.min-comments:nth-child(1):after {
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
transform-origin: 100% 0
}
.action.flex:after,.action.flex>.btn:after,.feed .source:after {
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%
}
}
@media only screen and (-webkit-device-pixel-ratio: 1.5) {
.action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after {
-webkit-transform:scaleY(.6666);
-moz-transform: scaleY(.6666);
-ms-transform: scaleY(.6666);
-o-transform: scaleY(.6666);
transform: scaleY(.6666)
}
}
@media only screen and (-webkit-device-pixel-ratio: 3) {
.action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after {
-webkit-transform:scaleY(.33);
-moz-transform: scaleY(.33);
-ms-transform: scaleY(.33);
-o-transform: scaleY(.33);
transform: scaleY(.33)
}
}
b. weui的作法是
.weui-cells:after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid #e5e5e5;
color: #e5e5e5;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
z-index: 2;
}
8.背景圖片尺寸background-size，img標(biāo)簽object-fit，object-position。
background-size:contain | cover | auto 90% | 50% auto;
這是以背景圖的方式展示圖片的，如果用img元素的話，
object-fit:fill | contain | cover | none | scale-down;（和background-size效果類似）
object-position:center; 和background-position的取值一樣。
這兩個(gè)屬性一起用的話，就能讓img元素src的圖片效果像背景圖片的效果一樣，不會(huì)因?yàn)閳D片尺寸不成比例而走形。但是兼容性不太好，目前只適合在移動(dòng)端用。
9.阻止手機(jī)彈出默認(rèn)菜單，長按img標(biāo)簽或者長按a標(biāo)簽會(huì)彈出系統(tǒng)默認(rèn)菜單（ios上，安卓上沒測）。
-webkit-touch-callout:none;
10.給文字寫行高時(shí)，讓文字垂直居中時(shí)，要把高度也一起寫了，line-height:35px; height:35px;
在用appcan做hybrid app時(shí)，發(fā)現(xiàn)在華為meta8上，用 ul li 做九宮格，li 浮動(dòng)排在一行時(shí)，每個(gè) li 有文字，高度用li的行高撐開的，沒有文字的 li 和有文字的 li 的高度是不一樣的。有的格子有文字有的沒有文字，導(dǎo)致九個(gè)格子沒有排在3行，有格子掉下去了，排成了4行。所以，在用行高讓文字居中時(shí)，高度和行高要都寫上。
11. text-align:justify;
p標(biāo)簽內(nèi)大段文字時(shí)，除了最后一行，其余的文字都是左對(duì)齊，導(dǎo)致段落文字距離右邊間距明顯大于左邊。
可以利用這個(gè)屬性不處理最后一行的特性，做這種布局：
上面這個(gè)布局有一點(diǎn)bug，最后一行是留白，把父級(jí)撐高了，原因是父級(jí)認(rèn)為所有子代，包括空文本節(jié)點(diǎn)都是占據(jù)空間的，哪怕空格，也占據(jù)空間。可以給父級(jí) ul 寫 font-size:0；就能把底部留白去除了，然后給子代再寫font-size:14px;就可以了。 但是，text-align:justify;畢竟是處理空格（拉伸空格來使內(nèi)部元素水平分散），所以在html中，li 要是連著寫和分段寫，表現(xiàn)結(jié)果是不一樣的，所以這種奇妙的布局還是有些許不完美，甚至不能用。
12.去除-webkit-的滾動(dòng)條
#content::-webkit-scrollbar{ display：none; }
設(shè)置滾動(dòng)條樣式
/*滾動(dòng)條寬度*/
#content::-webkit-scrollbar{ width:5px; }
/*滾動(dòng)條滑塊*/
#content::-webkit-scrollbar-thumb{ background:rgba(0,0,0,0.25); border-radius:3px; }
/*滾動(dòng)條的整個(gè)背景*/
#content::-webkit-scrollbar-track-piece{ background:#eee; }
TGuide
/* scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-button{display:none}
::-webkit-scrollbar-track{background-color:black}
::-webkit-scrollbar-track-piece{background:#FFF}
::-webkit-scrollbar-thumb{background-color:#8E8E8E;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background-color:#3B3B3B}
::-webkit-scrollbar-corner{background-color:#535353}
/*::-webkit-scrollbar-resizer{background-color:#FF6E00}*/
前面不加選擇器表示，所有出現(xiàn)滾動(dòng)條的元素。
13.設(shè)置placeholder的樣式
input::-webkit-input-placeholder{ color:#999; }
input::-moz-input-placeholder{ color:#999; }
input:-ms-input-placeholder{ color:#999; }
注意 -ms- 前面是一個(gè) “ ：”。
14.移動(dòng)端點(diǎn)擊某一行 :active 時(shí)添加背景色，比如 li:active{ background:#eee; } 時(shí)，要給 body標(biāo)簽上寫ontouchstart，否則沒有效果。
另一方面，給body添加，可以阻止圖片被默認(rèn)拖拽。百度的logo就可以被拖拽。
15.pageshow（）和pagehide（）方法。
問題描述：A頁面跳轉(zhuǎn)到B頁面，在B頁面操作后，返回到A頁面，A頁面的ajax方法不能被再次觸發(fā)。appcan里面從B頁面返回A頁面是直接關(guān)閉了B頁面，微信里是從緩存里取。這兩者都不能再次觸發(fā)A頁面的ajax。比如，修改姓名，修改性別。從A頁面點(diǎn)擊input跳轉(zhuǎn)到B頁面進(jìn)行修改操作，修改完成之后返回A頁面，發(fā)現(xiàn)信息沒有刷新，此時(shí)需要主動(dòng)觸發(fā)。
解決方法：可以監(jiān)聽pageshow方法，用addEventListener方法進(jìn)行監(jiān)聽。pageshow（）方法的觸發(fā)條件是，只要頁面被顯示就觸發(fā)，比如appcan里的B頁面覆蓋在A頁面，把B頁面關(guān)閉，A頁面自然就展現(xiàn)出來了，那么A頁面的pageshow方法就會(huì)觸發(fā)；微信里，點(diǎn)擊返回，雖然是從緩存里取頁面，但也會(huì)觸發(fā)pageshow方法。pagehide（）顧名思義。
16.關(guān)于position。
華為meta7，安卓版本4.4.2，position:relative; 的元素比position:absolute; 的元素層級(jí)要高。百度新聞的導(dǎo)航效果，也是利用了這個(gè)。很奇怪。
這種結(jié)構(gòu)，i.line是absolute，每個(gè)div都是relative，安卓4.4.2上 i.line 會(huì)被父級(jí)的兄弟div遮擋住。
解決辦法是，把 i.line 拿出來，和div同級(jí)。
17. background:url() no-repeat center, url() no-repeat center; 可以一次性放兩個(gè)圖片，中間用逗號(hào)隔開。
18.關(guān)于移動(dòng)端軟鍵盤彈起，蓋住頁面的問題。
核心解決辦法是利用 document.activeElement.scrollIntoView(false); 參數(shù)false，表示activeElement的元素與頁面下邊對(duì)齊，true表示activeElement的元素與頁面上邊對(duì)齊。這個(gè)方法兼容性很好。
另一個(gè)方法與之類似 document.activeElement.scrollIntoViewIfNeeded(); 這個(gè)方法效果不是很好，沒有上面那個(gè)好用。
19.常見于小說、報(bào)紙排版的column布局。
常用的5個(gè)屬性有4個(gè)是知曉效果的：
column-width:; 每列的寬度。
column-gap:; 列與列之間的間距。
column-fill:; 不知有何軟用。
column-rule:; 列與列直接的分割線，與border屬性效果一樣。
column-count:; 總共分多少列。（這個(gè)屬性受column-width限制，當(dāng)同時(shí)寫上column-width和column-count時(shí)，以column-width優(yōu)先，比如總寬度800px，height:200px; column-width:400px; column-count:4; 顯然，800px最多只能分2列，所以優(yōu)先以column-width進(jìn)行計(jì)算。）
小兼容：ios上，橫向滾動(dòng) overflow-x:auto; 的容器不適合直接當(dāng)成分欄布局的容器，應(yīng)該在 overflow-x 的元素內(nèi)嵌套一個(gè)div當(dāng)做分欄布局的容器。否則會(huì)出現(xiàn)，分欄線，column-rule不跟隨容器滾動(dòng)的奇異現(xiàn)象。另外，column-gap不適合賦值，應(yīng)當(dāng)將column-gap寫成0，列與列之間的間距可以用分欄布局的子元素的左右padding來做。
大段文字
.box{ width:300px; height:14em; overflow-x:auto; } /*滾動(dòng)的容器*/
.col{ height:11.9em; text-align:justify; column-count:2; column-gap:0; } /*分欄的容器*/
.col > p{ padding:0 .5em; line-height:1.2; } /*文字內(nèi)容的容器，加左右padding以增加列與列之間的間距。*/
四、貌似很多webapp都會(huì)寫兩個(gè)meta標(biāo)簽
不確定是否支持16進(jìn)制的顏色值。（好像測試過，16進(jìn)制顏色沒有效果。在appcan里也沒有效果。）
五、 一般不能上傳相同圖片
可以用 $('input[type="file"]').wrap('').closest('form').get(0).reset(); 重置后就可以了。
六、在安卓上touchmove出現(xiàn)了神奇的bug，百度上說，安卓上touchmove的一瞬間就會(huì)觸發(fā)touchcancel，touch事件就全部被取消了。IOS上是沒有這個(gè)問題的。
解決方法是：在touchmove里寫e.preventDefault();即可。但是這樣的話，手指滑動(dòng)頁面就不能scroll了。頁面將無法滾動(dòng)了。
七、flex布局
1. 2012年以后的版本
給父級(jí)添加 display:-webkit-flex; display:flex;
flex盒子內(nèi)子元素的排列方向稱作主軸，與主軸垂直的稱作交叉軸。
flex盒子內(nèi)的子元素可以被作項(xiàng)目。
注意：設(shè)為flex后，其子元素的float、clear、vertical-align屬性就會(huì)失效。
a.作用于父級(jí)的6個(gè)屬性：flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content。
//子元素的排列方向
flex-direction:row（默認(rèn)值，從左到右） | row-reverse（從右到左） | column（從上到下） | column-reverse（從下到上）;
//子元素是否換行
flex-wrap:nowrap（默認(rèn)值，不換行） | wrap（換行） | wrap-reverse（換行，但第一行在下方）;
//子元素排列方向和子元素是否換行的簡寫
flex-flow:row nowrap;（默認(rèn)值，從左到右，不換行。）
//項(xiàng)目（子元素）在主軸上的對(duì)齊方式
justify-content:flex-start（默認(rèn)值，以起點(diǎn)為始） | flex-end（以終點(diǎn)為始） | center（居中） | space-between（首尾兩個(gè)元素緊貼邊界，其余元素之間間隔相等） | space-around（每個(gè)項(xiàng)目的兩側(cè)間隔相等，相當(dāng)于給每個(gè)項(xiàng)目加了margin，并且左右margin相等。所以首尾元素與邊界都是有間距的。）;
//項(xiàng)目（子元素）在交叉軸上的對(duì)齊方式
align-items:flex-start（以起點(diǎn)為始） | flex-end（以終點(diǎn)為始） | center（居中） | baseline（與項(xiàng)目的第一行文字的基線對(duì)齊） | stretch（默認(rèn)值，在交叉軸方向撐滿父級(jí)）;
//多根軸線的對(duì)齊方式，如果只有一根軸線，該屬性不起作用。
align-content:flex-start（與交叉軸的起點(diǎn)對(duì)齊） | flex-end（與交叉軸的終點(diǎn)對(duì)齊） | center（與交叉軸的中點(diǎn)對(duì)齊） | space-between（與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布） | space-around（每根軸線兩側(cè)的間隔都相等。軸線之間的間隔比軸線與邊框的間隔大一倍，第一行和最后一行不會(huì)緊貼邊框） | stretch（默認(rèn)值，鋪滿整個(gè)交叉軸）;
（ align-content：stretch; 第一根軸線與邊框?qū)R，其他軸線均分父級(jí)間隙。 ）
b.作用于項(xiàng)目（子元素）的6個(gè)屬性：order，flex-grow，flex-shrink，flex-basis，flex，align-self。
//子元素的排列順序
order:0（默認(rèn)值） | 1 | 2 | 3 . . .
//項(xiàng)目（子元素）的放大比例
flex-grow:0（默認(rèn)值，默認(rèn)不放大，盡管有剩余空間） | 1 | 2 | 3 . . .
//項(xiàng)目的縮小比例
flex-shrink:1（默認(rèn)值，當(dāng)空間不足時(shí)，該項(xiàng)目將縮小） | 0（不論如何，都不縮小）;
//項(xiàng)目占據(jù)的主軸空間
flex-basis:auto（默認(rèn)值，項(xiàng)目本來的大小） | 固定值（200px，50%，100% . . .）;
//flex-grow，flex-shrink，flex-basis的簡寫 flex ：0 1 auto；
flex:0 1 auto（默認(rèn)值，有多余空間也不放大，但空間不足會(huì)縮小，默認(rèn)占據(jù)空間就是自身大小）;
flex:auto; => flex：1 1 auto; 根據(jù)空間大小，可放大可縮小。（有兼容性問題，chrome可以正常解析 flex：auto; -- flex：1 1 auto; 但 IE 就搞笑了，IE10解析出來的flex：auto -- flex：1 0 auto；只放大，不縮小。IE11解析出來的flex：auto；和chrome一樣，可放大可縮小。所以在用這個(gè)屬性的時(shí)候，要寫完整值，不要簡寫。）
flex:none； -- flex：0 0 auto；不放大，也不縮小。
//單個(gè)項(xiàng)目與其他項(xiàng)目不一樣的對(duì)齊方式，會(huì)覆蓋父級(jí)的align-items;
align-self:auto（默認(rèn)值， 繼承父級(jí)的align-items的值） | flex-start | flex-end | center | baseline | stretch; 除了auto，其他的與父級(jí)align-items屬性一致。
注意要活用align-self：stretch;和align-items：stretch;
2. 2009年的版本
目前新版本被支持的很好，所以舊版的直接寫帶前綴的。
display:-webkit-box; display:-ms-flexbox;
子元素如果有display：inline的，要把子元素寫成display：block; 2012年的版本不需要。
a.父級(jí)的5個(gè)屬性。-webkit-box-pack，-webkit-box-align，-webkit-box-direction，-webkit-box-orient，-webkit-box-lines。
//項(xiàng)目在主軸上的對(duì)齊方式
-webkit-box-pack:start（默認(rèn)值，從起點(diǎn)開始） | end | center | justify;
//項(xiàng)目在交叉軸上的對(duì)齊方式
-webkit-box-align:stretch（默認(rèn)值，交叉軸方向撐滿父級(jí)） | start | end | center | baseline;
//項(xiàng)目的排列順序
-webkit-box-direction:normal（默認(rèn)值，以起點(diǎn)為始） | reverse（以終點(diǎn)為始）;
//主軸方向
-webkit-box-orient:horizontal（默認(rèn)值，水平方向） | vertical（垂直方向） | inline-axis（行內(nèi)方式，映射為horizontal） | block-axis（塊方式排列，映射為vertical）;
//項(xiàng)目（子元素是否換行）
box-lines:single（默認(rèn)值，不允許） | multiple（允許）;
經(jīng)測試，沒有瀏覽器支持，這個(gè)屬性不能用。
b.子元素的3個(gè)屬性。box-flex，box-flex-group，box-ordinal-group。
//是否縮放
-webkit-box-flex:0（默認(rèn)值，不放大也不縮小） | 1 | 2 | 3 . . .;
//子元素排列次序
-webkit-box-ordinal-group:1 | 2 | 3 . . . 從小到大排列。
3. 對(duì) 1、2 的小結(jié)。
2012年版本比2009年的版本主要多了兩個(gè)屬性，1個(gè)是子元素是否換行，flex-wrap，2009年的box-lines不起作用。還有一個(gè)是子元素在主軸的對(duì)齊方式，2012年的justify-content:space-around; 2009年的沒有這個(gè)效果，但是可以通過加左右padding值的方式做到。
如果要兼容2009年版本的盒子布局又想換行的，只能改用float布局。
八、html結(jié)構(gòu)嵌套問題
p標(biāo)簽內(nèi)不要嵌套塊元素，其他的像h、p、dl . . .的塊元素都會(huì)發(fā)生解析錯(cuò)誤。可以嵌套行間元素。
類似的，還有a標(biāo)簽里不能再出現(xiàn)a標(biāo)簽，嵌套多少層都不行。
html標(biāo)簽嵌套要按照塊元素包含行間元素的規(guī)則來寫。
九、標(biāo)簽
讓瀏覽器用最新內(nèi)核渲染。
十、form標(biāo)簽一點(diǎn)特性
在移動(dòng)端，input框獲取焦點(diǎn)時(shí)，瀏覽器會(huì)彈出軟鍵盤，想讓軟鍵盤的enter鍵變成搜索兩個(gè)字，需要讓這個(gè)input按照這種結(jié)構(gòu)寫：
說明：onsubmit='return false';阻止表單默認(rèn)提交，便于自己操作。
input 的 type 必須是 search。
input 的 加了style='position：relative;'，防止ios上點(diǎn)擊搜索按鈕會(huì)閃屏（白屏）。
十一、瀏覽器兼容
1.關(guān)于table表格的寬度設(shè)置問題。
Firefox和chrome的解析方式是不一樣的，chrome會(huì)把你寫的table寬度全部轉(zhuǎn)化成px。Firefox則不會(huì)，所以在td寫行間樣式寬度時(shí)，不能百分比和px混用，要統(tǒng)一，要么每個(gè)td都寫百分比的寬，要么都寫px的寬；不要這幾個(gè)td寫百分比，那幾個(gè)td寫px。
2.某些安卓不識(shí)別height:calc（）; 可以用flex布局代替。
十二、KTV字幕效果
實(shí)現(xiàn)方式1：
把文字寫兩遍，兩個(gè)行間元素span，包裹相同的文字。
首頁
首頁
或者
首頁
首頁
實(shí)現(xiàn)原理是：讓內(nèi)部兩個(gè)span寬度相等，其中一個(gè)設(shè)置width:0%；overflow:hidden; 然后用js動(dòng)態(tài)控制width從0% -- 100%。
實(shí)現(xiàn)方式2：（張鑫旭說只適用于chrome，但是我測了下，好像firefox也是可以的。）
實(shí)現(xiàn)原理：background-image是覆蓋在background-color上的，chrome有個(gè)私有屬性 -webkit-background-clip:text; 意為背景裁切，以文字為裁切起止。效果就是背景圖片只會(huì)展示文字的書寫路徑，除了文字的其他部分空間不展示背景圖。再結(jié)合-webkit-text-fill-color:transparent; 將文字渲染的顏色寫為透明，這樣，文字路徑就透出了背景圖。再改變背景圖片的水平位置，就能露出文字和背景圖片下的背景顏色，就做到KTV字母效果了。
核心的css屬性：
background-image:url(); /*純色的背景圖，用來渲染文字顏色，因?yàn)槲淖质峭该鞯摹?/
background-repeat:no-repeat;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-position:0 0;
↑改變他就可以了。
關(guān)于實(shí)現(xiàn)方式2的圖示：
移動(dòng)端的屏幕適配問題
移動(dòng)端的屏幕適配問題主要通過響應(yīng)式設(shè)計(jì)、適配不同屏幕尺寸和分辨率、以及考慮設(shè)備特性等方式來解決。首先，響應(yīng)式設(shè)計(jì)是解決移動(dòng)端屏幕適配問題的關(guān)鍵。它基于流式布局的思想，通過CSS媒體查詢來根據(jù)設(shè)備屏幕的寬度調(diào)整布局和樣式。例如，在較寬的屏幕上，內(nèi)容可能以多欄形式展示，而在較窄的屏幕上則自動(dòng)...
CSS絕對(duì)定位,電腦上顯示正常,手機(jī)上豎屏顯示不出來,橫屏顯示是錯(cuò)位的...
兩者分辨率不同，手機(jī)上你要寫針對(duì)手機(jī)的css。用 @media screen 類似如圖寫法
網(wǎng)頁插入圖片電腦端能顯示,移動(dòng)端出現(xiàn)代碼
網(wǎng)頁插入圖片電腦端能顯示,移動(dòng)端出現(xiàn)代碼為什么？以下幾種情況引起的：1、圖片路徑錯(cuò)誤：檢查你插入圖片的路徑是否正確，特別是針對(duì)移動(dòng)端設(shè)備，路徑大小寫、斜杠方向等都需要注意。2、響應(yīng)式設(shè)計(jì)問題：移動(dòng)端設(shè)備通常需要使用響應(yīng)式設(shè)計(jì)，確保你的網(wǎng)頁使用了適應(yīng)移動(dòng)端設(shè)備的CSS樣式和媒體查詢。3、圖片格式...
pc端前端和移動(dòng)端前端哪個(gè)難度大
3.在布局上，移動(dòng)端開發(fā)一般是要做到布局自適應(yīng)的，我使用的一直是rem布局，感覺很好。4.在動(dòng)畫處理上，PC端由于要考慮IE的兼容性，所以通常使用JS做動(dòng)畫的通用性會(huì)更好一些，但是CSS3做了很大的犧牲， 而在手機(jī)端，如果要做一些動(dòng)畫、特效等，第一選擇肯定是CSS3，既簡單、效率又高。5.微信的一些...
css設(shè)置背景圖不顯示和nth-child(n)在移動(dòng)端不起作用,求大神解答...
如果用了 background-image，后面就只能放圖片的url，不能加“no-repeat”;如果要加“no-repeat”，就要用 background，不能用 background-image。background-image這行和background-size這行可以合并為：background: url(...此略...) no-repeat center \/ 100%;也可以全部分開來寫：background-...
一文搞懂,vue中pc端與移動(dòng)端適配解決方案(親測有效)
config.js需正確引入和設(shè)置postcss-pxtorem以實(shí)現(xiàn)px到rem的轉(zhuǎn)換。總的來說，適配過程中需注意行內(nèi)樣式的px轉(zhuǎn)換問題，以及字號(hào)的處理。如果遇到適配問題，檢查根元素的font-size設(shè)置以及css預(yù)處理器的配置。以上策略旨在提供一種實(shí)用且有效的移動(dòng)端與PC端適配解決方案，以適應(yīng)不同設(shè)備的顯示需求。
...手機(jī)上打開跟pc上打開格式不一致,是不是css哪兒有問題呢?_百度...
我也碰到這個(gè)情況，客戶反映給我，也是頭大，最后被我解決了，在全局樣式的body上添加個(gè)樣式min-width: 1100px; 當(dāng)然我這里說的1100px,并不一定得是1100你可以根據(jù)你的網(wǎng)頁最大寬度來定義這個(gè)數(shù)值！
為什么CSS3的響應(yīng)式網(wǎng)站在手機(jī)和平板上滑不動(dòng)
需要加載相應(yīng)的移動(dòng)端滑動(dòng)插件，例如iscroll.js
uni-app開發(fā)多移動(dòng)端程序時(shí)如何權(quán)衡是否使用nvue?
在使用uni-app進(jìn)行多移動(dòng)端程序開發(fā)時(shí)，關(guān)于是否使用NVue的選擇，確實(shí)需要權(quán)衡一些因素。你的回答和問題中，我注意到你可能在自定義TabBar插件的使用上遇到了困惑。首先，需要明確的是，TabBar確實(shí)支持NVue。通常，在進(jìn)行APP開發(fā)時(shí)，會(huì)發(fā)現(xiàn)NVue主要針對(duì)APP側(cè)進(jìn)行了優(yōu)化，這使得Vue頁面轉(zhuǎn)NVue變得相對(duì)困難，而...
在移動(dòng)端避免使用100vh
當(dāng)?shù)刂窓诳梢姇r(shí)，由于移動(dòng)瀏覽器不正確地將 100vh 設(shè)置為屏幕高度而沒有顯示地址欄，因此屏幕底部被切斷。在上圖中，應(yīng)該在屏幕底部的按鈕被隱藏了。更糟糕的是，當(dāng)用戶第一次使用手機(jī)訪問網(wǎng)站時(shí)，地址欄會(huì)顯示在頁面頂部，因此用戶體驗(yàn)是很糟糕的。解決這個(gè)問題的一種方法是依賴javascript而不是css。當(dāng)...
相關(guān)評(píng)說：
興安盟調(diào)速： ______ 很少遇到這種問題,一般你要想到的是,你的工作能給程序員帶來多大的便捷,例如很多內(nèi)容的適應(yīng),測試時(shí)會(huì)出現(xiàn)的問題,還有就是盡可能不讓程序員碰CSS,讓程序員更易懂你的結(jié)構(gòu),例如XHTML注釋,合理的注釋,加上內(nèi)容的提示.總之多溝通,同樣的,你的價(jià)值還是決定編輯人員和用戶的操作習(xí)慣.設(shè)計(jì)師是你上面要考慮你的,你要考慮程序員開發(fā),和編輯的操作,用戶的使用.
興安盟調(diào)速： ______ 常見的瀏覽器兼容性問題與解決方案大致有以下九種形式: 一、不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外邊界和內(nèi)填充不同 問題表現(xiàn):不加樣式控制下,margin和padding差異較大 解決方案:css里 *{margin:0; padding:0;} 備注:這是最常見也是最易...
興安盟調(diào)速： ______ 瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)丁和內(nèi)補(bǔ)丁不同 問題癥狀:隨便寫幾個(gè)標(biāo)簽,不加樣式控制的情況下,各自的margin 和padding差異較大. 碰到頻率:100% 解決方案:CSS里 *{margin:0;padding:0;} 備注:這個(gè)是最常見的...
興安盟調(diào)速： ______ 把那個(gè)指定的div 給一個(gè)名字 id 或者 class 然后用urlfrom 判斷是移動(dòng)端還是電腦端,或者直接用屏幕寬度判斷.如果是手機(jī)端 就用jquery 把那個(gè)div層級(jí)隱藏掉或者直接remove掉
興安盟調(diào)速： ______ 當(dāng)兩個(gè)容器嵌套時(shí),如果外層容器和內(nèi)層容器之間沒有別的元素,firefox會(huì)把內(nèi)層元素的margin-top作用與父元素. 也就是說因?yàn)樽訉邮歉笇拥牡谝粋€(gè)非空子元素,所以使用margin-top會(huì)發(fā)生這個(gè)錯(cuò)誤. 解決的辦法有兩個(gè): 1、使用浮動(dòng)來解決,即將子層代碼改為:<div style=＂margin-top:200px;float:left＂;>子層</div> 2、使用padding-top來解決,即: <div style=＂padding-top:200px;＂> <div>子層</div> </div>
興安盟調(diào)速： ______ 1;肯定是你哪里定義的沖突了.2;你可以把你的文件打包傳上來讓我們看看.3;不然的話肯定是有改變的.4;你把font-size:2em;改成font-size:12px;然后把數(shù)字依次12改成18,24看下.記得保存文件,然后刷新頁面.
興安盟調(diào)速： ______ 再用一個(gè)div包含它們,,然后設(shè)置寬度為三個(gè)層的和或者稍大些..
興安盟調(diào)速： ______ 一句一句看,看看是不是有標(biāo)簽沒有回,然后就是看看浮動(dòng)清楚掉了沒有.或者把代碼刪掉(先備份),寫一點(diǎn)就預(yù)覽一下,那里出錯(cuò)了就改過來再接著寫
興安盟調(diào)速： ______ 1\顯示錯(cuò)誤的網(wǎng)頁 可能是你的DIV標(biāo)志忘了一半 2\顯示不全 可能你的CSS定位不好 3\亂碼 網(wǎng)頁亂碼,是定義網(wǎng)頁編碼問題,meta屬性里的charset管這個(gè) 同樣會(huì)出這些問題的一個(gè)重要原因是瀏覽器問題 不同的瀏覽器對(duì)網(wǎng)頁的解析過程不一樣,所以網(wǎng)頁也就各異 比如網(wǎng)上很多校內(nèi)網(wǎng)的代碼,在IE很正常,到FIREFOX里就亂七八糟!
興安盟調(diào)速： ______ 你這個(gè)問題我感覺有點(diǎn)麻煩,似乎是碰到了某個(gè)IE6/7 BUG.由于要求左右兩列等高,在頁面代碼編寫過程中沒有經(jīng)過充分測試;另外一點(diǎn)就是IE對(duì):hover的偽類支持不完整.下面提出臨時(shí)解決辦法:1,將#footer a:hover 的背景屬性 ...
