來(lái)源 |
CSS常用樣式
一、文本樣式
1、文字超出部分顯示省略號(hào)單行文本的溢出顯示省略號(hào)（一定要有寬度）
css">p{width:200rpx;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
2、多行文本溢出顯示省略號(hào)
p {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
二、 文字垂直居中1、單行文字的垂直居中解決方案：line- 方法 和 line- 同樣的高度
.box{width:200px;height:100px;line-height:100px;}
2、多行文字的垂直居中
解決方案：-align 方法
.box{width:500px;height:100px;vertical-align:middle;display:table-cell;}
3、首行縮進(jìn)
這是一段內(nèi)容文字，這是一段內(nèi)容文字 4、首字下沉
p:first-letter{font-size:40px;float: left;color:red;}
5、中英文自動(dòng)換行
p{word-wrap: break-word;white-space: normal;word-break: break-all;}
6、文字陰影
text- 為網(wǎng)頁(yè)字體添加陰影，通過(guò)對(duì)text-屬性設(shè)置相關(guān)的屬性值。
屬性與值的說(shuō)明如下：
text-: [X-,Y-,Blur,Color];
X-:指陰影居于字體水平偏移的位置。
Y-:指陰影居于字體垂直偏移的位置。
Blur:指陰影的模糊值。
color:指陰影的顏色；
h1{text-shadow: 5px 5px 5px #FF0000;}
7、設(shè)置 input 中 的字體樣式
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */color: red;}input::-moz-placeholder { /* Firefox 19+ */color: red;}input:-ms-input-placeholder { /* IE 10+ */color: red;}input:-moz-placeholder { /* Firefox 18- */color: red;}
二、布局樣式1、div 垂直居中
固定高寬 div 垂直居中
.box{position: absolute;top: 50%;left: 50%;background-color: red;width: 100px;height: 100px;margin: -50px 0 0 -50px;??}
不固定高寬 div 垂直居中的方法方法一：偽元素和 -block / -align（兼容 IE8）
.box-wrap:before {content: '';display: inline-block;height: 100%;vertical-align: middle;margin-right: -0.25em; //微調(diào)整空格}.box {display: inline-block;vertical-align: middle;???}
方法二：flex(不兼容 ie8 以下)
.box-wrap {height: 300px;justify-content:center;align-items:center;display:flex;background-color:#666;???}
方法三：(不兼容 ie8 以下)
.box-wrap {width:100%;height:300px;background:rgba(0,0,0,0.7);position:relative;}.box{position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%);??}
方法四：設(shè)置 :auto（該方法得嚴(yán)格意義上的非固定寬高，而是 50%的父級(jí)的寬高。）
.box-wrap {position: relative;width:100%;height:300px;background-color:#f00;}.box-content{position: absolute;top:0;left:0;bottom:0;right:0;width:50%;height:50%;margin:auto;background-color:#ff0;}
2、清除浮動(dòng)方法一：父級(jí) div 定義
優(yōu)點(diǎn)：簡(jiǎn)單，代碼少，容易掌握
缺點(diǎn)：只適合高度固定的布局，要給出精確的高度，如果高度和父級(jí) div 不一樣時(shí)css 頂上有空白，會(huì)產(chǎn)生問(wèn)題
建議：不推薦使用，只建議高度固定的布局時(shí)使用。
div2
方法二：結(jié)尾處加空 div 標(biāo)簽 clear:both
原理：添加一個(gè)空 div，利用 css 提高的 clear:both 清除浮動(dòng)，讓父級(jí) div 能自動(dòng)獲取到高度
優(yōu)點(diǎn)：簡(jiǎn)單css 頂上有空白，代碼少，瀏覽器支持好，不容易出現(xiàn)怪問(wèn)題
缺點(diǎn)：不少初學(xué)者不理解原理；如果頁(yè)面浮動(dòng)布局多，就要增加很多空 div，讓人感覺(jué)很不爽
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動(dòng)方法
div2
方法三：父級(jí) div 定義 :
原理：必須定義 width 或 zoom:1，同時(shí)不能定義 ，使用 : 時(shí)，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度
優(yōu)點(diǎn)：簡(jiǎn)單，代碼少，瀏覽器支持好
缺點(diǎn)：不能和 配合使用，因?yàn)槌龅某叽绲臅?huì)被隱藏。
建議：只推薦沒(méi)有使用 或?qū)?: 理解比較深的朋友使用。
div2
CSS常見(jiàn)問(wèn)題
1、IOS 頁(yè)面滑動(dòng)卡頓
body,html{-webkit-overflow-scrolling: touch;}
2、CSS滾動(dòng)條仿 ios
::-webkit-scrollbar{width: 5px;height: 5px;}::-webkit-scrollbar-thumb{border-radius: 1em;background-color: rgba(50,50,50,.3);}::-webkit-scrollbar-track{border-radius: 1em;background-color: rgba(50,50,50,.1);??}
3、實(shí)現(xiàn)隱藏滾動(dòng)條同時(shí)又可以滾動(dòng)
.demo::-webkit-scrollbar {display: none; /* Chrome Safari */}.demo {scrollbar-width: none; /* firefox */-ms-overflow-style: none; /* IE 10+ */overflow-x: hidden;overflow-y: auto;}
4、CSS 繪制三角形實(shí)現(xiàn)一個(gè)簡(jiǎn)單的三角形
div {width: 0;height: 0;border-width: 0 40px 40px;border-style: solid;border-color: transparent transparent red;}
效果如下：
實(shí)現(xiàn)帶邊框的三角形
#blue { position:relative; width: 0; height: 0; border-width: 0 40px 40px; border-style: solid; border-color: transparent transparent blue;}#blue:after { content: ""; position: absolute; top: 1px; left: -38px; border-width: 0 38px 38px; border-style: solid; border-color: transparent transparent yellow;}
效果如下：
注: 如果想繪制右直角三角，則將左 設(shè)置為 0；如果想繪制左直角三角，將右 設(shè)置為 0 即可（其它情況同理）。
5、表格邊框合并
table,tr,td{ border: 1px solid #666;}table{ border-collapse: collapse;}
6、 CSS 選取第 n 個(gè)標(biāo)簽元素
使用方法：
li:first-child{}
7、 處理圖片異常使用 異常處理時(shí)，若 的圖片也出現(xiàn)問(wèn)題，則圖片顯示會(huì)陷入死循環(huán)，所以要在賦值異常圖片之后，將地址置空。
8、移動(dòng)端軟鍵盤變?yōu)樗阉鞣绞侥J(rèn)情況下軟鍵盤上該鍵位為前往或者確認(rèn)等文字，要使其變?yōu)樗阉魑淖郑枰?input 上加上 type 聲明：
需要一個(gè) form 標(biāo)簽套起來(lái),并且設(shè)置 屬性,這樣寫完之后輸入法的右下角就會(huì)自動(dòng)變成搜索。
同時(shí)，使用了 類型后，搜索框上會(huì)默認(rèn)自帶刪除按鈕
如需屏蔽，可以使用如下方式：
input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance: none; }
CSS常用屬性
一、字體屬性：(font)
1. 大小 {font-size: x-large;}(特大) xx-small;(極小) 一般中文用不到，只要用數(shù)值就可以，單位：PX、PD2.樣式 {font-style: ;}(偏斜體) ;(斜體) ;(正常)3. 行高 {line-: ;}(正常) 單位：PX、PD、EM4.粗細(xì) {font-: bold;}(粗體) ;(細(xì)體) ;(正常)5.變體 {font-: small-caps;}(小型大寫字母) ;(正常)6.大小寫 {text-: ;}(首字母大寫) ;(大寫) ;(小寫) none;(無(wú))7.修飾 {text-: ;}(下劃線) ;(上劃線) line-;(刪除線) blink;(閃爍)二、常用字體：(font-)" New", , , "Times New Roman", Times, serif, Arial, , sans-serif, 三、背景屬性：()
色彩 {-color: #;}
圖片 {-image: none;}
重復(fù) {-: no-;}
滾動(dòng) {-: fixed;}(固定) ;(滾動(dòng))
位置 {-: left;}(水平) top(垂直);
簡(jiǎn)寫方法 {:#000 url(..) fixed left top;} /*簡(jiǎn)寫·這個(gè)在閱讀代碼中經(jīng)常出現(xiàn)。四、區(qū)塊屬性：(Block)
字間距 {-: ;} 數(shù)值
對(duì)齊 {text-align: ;}(兩端對(duì)齊) left;(左對(duì)齊) right;(右對(duì)齊) ;(居中)
縮進(jìn) {text-: 數(shù)值px;}
垂直對(duì)齊 {-align: ;}(基線) sub;(下標(biāo)) sup;(上標(biāo)) top; text-top; ; ; text-;
詞間距word-: ; 數(shù)值
空格white-space: pre;(保留) ;(不換行)
顯示 {:block;}(塊) ;(內(nèi)嵌) list-item;(列表項(xiàng)) run-in;(追加部分) ;(緊湊) ;(標(biāo)記) table; -table; table-raw-group; table--group; table--group; table-raw; table--group; table-; table-cell; table-;(表格標(biāo)題) /* 屬性的了解很模糊*/
五、方框?qū)傩裕?Box)六、邊框?qū)傩裕?)七、列表屬性：(List-style)
類型list-style-type: disc;(圓點(diǎn)) ;(圓圈) ;(方塊) ;(數(shù)字) lower-roman;(小羅碼數(shù)字) upper-roman; lower-alpha; upper-alpha;
位置list-style-: ;(外) ;
圖像list-style-image: url(..);
八、定位屬性：()
: ; ; ;
: ; ; ;
: ; ; ; auto;
clip: rect(12px,auto,12px,auto) (裁切)
九、CSS文字屬性：
color : #; /*文字顏色*/
font- : 宋體,sans-serif; /*文字字體*/
font-size : 9pt; /*文字大小*/
font-style:; /*文字斜體*/
font-:small-caps; /*小字體*/
- : 1pt; /*字間距離*/
line- : 200%; /*設(shè)置行高*/
font-:bold; /*文字粗體*/
-align:sub; /*下標(biāo)字*/
-align:super; /*上標(biāo)字*/
text-:line-; /*加刪除線*/
text-: ; /*加頂線*/
text-:; /*加下劃線*/
text-:none; /*刪除鏈接下劃線*/
text- : ; /*首字大寫*/
text- : ; /*英文大寫*/
text- : ; /*英文小寫*/
text-align:right; /*文字右對(duì)齊*/
text-align:left; /*文字左對(duì)齊*/
text-align:; /*文字居中對(duì)齊*/
text-align:; /*文字分散對(duì)齊*/
-align屬性
十、CSS邊框空白
-top:10px; /*上邊框留空白*/
-right:10px; /*右邊框留空白*/
-:10px; /*下邊框留空白*/
-left:10px; /*左邊框留空白*/
頁(yè)面布局常用詞匯
頭部/頁(yè)眉；