1，flexbox~注意，設(shè)為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。

在ios8上要加上前綴 display: -webkit-box; display: -webkit-flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */ flex兼容兼容寫(xiě)法 容器屬性： .box{display: -webkit-flex; /* Safari */display: flex;flex-direction: row | row-reverse | column | column-reverse;（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左/右/上/下端。flex-wrap: nowrap | wrap | wrap-reverse;（默認(rèn)）：不換行。/換行從上到下/換行從下到上justify-content: flex-start | flex-end | center | space-between | space-around;橫向居左/右/中/對(duì)齊貼邊/等分居中align-items: flex-start | flex-end | center | baseline | stretch;縱向居上/下/中/項(xiàng)目的第一行文字的基線對(duì)齊/（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度---------------------------------------------------------------align-content: flex-start | flex-end | center | space-between | space-around | stretch; 多行上下對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。flex-flow: <flex-direction> || <flex-wrap>;flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式，默認(rèn)值為row nowrap。 } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 項(xiàng)目屬性： .item {order: <整數(shù)>; 定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。flex-grow: <number>; /* default 0 */項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。如果其他都是1，一個(gè)為2，那么2的空間比1大一倍flex-shrink: <number>; /*default1*/如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1，則空間不足時(shí)，為0縮小。flex-basis: <length> | auto; /* default auto */它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小。設(shè)置項(xiàng)目數(shù)值將占據(jù)固定主軸空間align-self: auto | flex-start | flex-end | center | baseline | stretch。屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒(méi)有父元素，則等同于stretch。-------------------------------------------------------------------flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]放大, 縮小 和定寬的簡(jiǎn)寫(xiě)，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。該屬性有兩個(gè)快捷值：auto (1 1 auto) 和 none (0 0 auto)。 }1，.item 設(shè)置margin：auto；自動(dòng)等分 2，當(dāng)flex-grow之和小于1時(shí)，只能按比例分配部分剩余空間，而不是全部
3，tip:左邊固定右側(cè)自適應(yīng)布局：左側(cè)flex:0 0 100px;

2，input設(shè)置?placeholder 顏色

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:#B3B3B3!important; } input:-moz-placeholder, textarea:-moz-placeholder { color:#B3B3B3!important; } input::-moz-placeholder, textarea::-moz-placeholder { color:#B3B3B3!important; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color:#B3B3B3!important; }

3，input 設(shè)置size可調(diào)節(jié)填充父級(jí)元素

4，兄弟節(jié)點(diǎn)ul > li+li{}表示ul下第一個(gè)li后面的所有l(wèi)i。多用于寫(xiě)上邊距

5，outline 描邊（參數(shù)同border）。outline-offset：20px偏移

6，圖片在指定尺寸后，可以設(shè)置object-fit為contain或cover保持比例

7，button設(shè)置disable后，設(shè)置button：disable{background：#eee; cursor: not-allowed;}

8,設(shè)置寬度為fill-available，可以使inline-block像block那樣填充整個(gè)空間 width: -webkit-fill-available;

9,設(shè)置寬度為fit-content，可以使block像inline-block那樣實(shí)現(xiàn)收縮寬度包裹內(nèi)容的效果

10,可以設(shè)置寬度為min-content和max-content，前者讓內(nèi)容盡可能地收縮，后者讓內(nèi)容盡可能地展開(kāi)

11,?CSS強(qiáng)制性換行:

word-break:break-all; /*支持IE，chrome，FF不支持*/

word-wrap:break-word;/*支持IE，chrome，FF*/

//不換行 white-space:nowrap; //自動(dòng)換行 word-wrap: break-word; word-break: normal; //強(qiáng)制換行 word-break:break-all;

12，CSS動(dòng)畫(huà)

//動(dòng)畫(huà)耗時(shí)transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out; //元素的動(dòng)畫(huà)transform:scale(1.2); -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -o-transform:scale(1.2); -ms-transform:scale(1.2);

　　使用CSS transforms 或者 animations時(shí)可能會(huì)有頁(yè)面閃爍的bug
　　-webkit-backface-visibility: hidden;

13，陰影：box-shadow: 0px 0px 2px -5px #eee, 0px 0px 0px #eee, 0px 3px 10px #eee, 0px 2px 0px #eee;

<!-線性漸變->
div {linear-gradient(red, yellow) } background: linear-gradient(direction, color-stop1, color-stop2, ...); background-image: linear-gradient(to right, transparent 50%, #655 0);//等分顏色

?

14，<input "IME-MODE: disabled;" οnkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" maxlength="5"? type="text" name="" class="num" value="1" /> 禁止粘貼和輸入非數(shù)字文本

15，背景圖

background:url() no-repeat scroll center top(水平 垂直) background-attachment：設(shè)置背景圖片是否隨著文字移動(dòng)而移動(dòng)，還是固定在一個(gè)位置上。 scroll：背景圖像是隨對(duì)象內(nèi)容滾動(dòng) fixed：背景圖像固定

16，省略號(hào)

N行省略號(hào) overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;單行省略號(hào) overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

17，CSS3 filter Property 圖片過(guò)濾

img {filter: grayscale(100%); //灰度f(wàn)ilter: blur(5px); //模糊filter:brightness(200%); //高亮filter:saturate(8); //飽和filter:sepia(100%); //懷舊}

18，box-sizing 讓元素的寬度、高度包含border和padding {box-sizing: border-box;}

19，手機(jī)video 都在頁(yè)面中播放，而不是全屏播放了。??<video src="test.mp4" webkit-playsinline="true"></video>

20，頁(yè)面操作

<img src=”logo.gif” width=88 height=31 οndragstart=”return false;” > οncοntextmenu=”return false;” //禁止鼠標(biāo)右鍵 οndragstart=”return false;” //禁止鼠標(biāo)拖動(dòng) onselectstart=”return false;”//文字禁止鼠標(biāo)選中 οnselect=”document.selection.empty();”//禁止復(fù)制文本

21，常用網(wǎng)頁(yè)字體設(shè)置

font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; //常用 宋體 SimSun 黑體 SimHei 微軟雅黑 Microsoft YaHei 微軟正黑體 Microsoft JhengHei 新宋體 NSimSun 新細(xì)明體 PMingLiU 細(xì)明體 MingLiU 標(biāo)楷體 DFKai-SB 仿宋 FangSong 楷體 KaiTi 仿宋_GB2312 FangSong_GB2312 楷體_GB2312 KaiTi_GB2312

?22，

22-1，在設(shè)置背景圖后，通過(guò) image-set( url() 1x， url() 2x) 設(shè)置不同分辨率下的圖片
　　background-image: url(../img/test-icon_1x.png);
　　background-image: -webkit-image-set(url(../img/test-icon_1x.png) 1x, url(../img/test-icon_2x.png) 2x);
22-2， @media only screen and (-webkit-min-device-pixel-ratio:3) { ... }

轉(zhuǎn)載于:https://www.cnblogs.com/chuanq/p/11270580.html

總結(jié)

以上是生活随笔為你收集整理的一个切图仔的 CSS 笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。