來源 |
CSS常用樣式
一、文本樣式
1、文字超出部分顯示省略號單行文本的溢出顯示省略號（一定要有寬度）
css">p{width:200rpx;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
2、多行文本溢出顯示省略號
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、首行縮進
這是一段內容文字，這是一段內容文字 4、首字下沉
p:first-letter{font-size:40px;float: left;color:red;}
5、中英文自動換行
p{word-wrap: break-word;white-space: normal;word-break: break-all;}
6、文字陰影
text- 為網頁字體添加陰影，通過對text-屬性設置相關的屬性值。
屬性與值的說明如下：
text-: [X-,Y-,Blur,Color];
X-:指陰影居于字體水平偏移的位置。
Y-:指陰影居于字體垂直偏移的位置。
Blur:指陰影的模糊值。
color:指陰影的顏色；
h1{text-shadow: 5px 5px 5px #FF0000;}
7、設置 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; //微調整空格}.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%);??}
方法四：設置 :auto（該方法得嚴格意義上的非固定寬高，而是 50%的父級的寬高。）
.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、清除浮動方法一：父級 div 定義
優點：簡單，代碼少，容易掌握
缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級 div 不一樣時css 頂上有空白，會產生問題
建議：不推薦使用，只建議高度固定的布局時使用。
div2
方法二：結尾處加空 div 標簽 clear:both
原理：添加一個空 div，利用 css 提高的 clear:both 清除浮動，讓父級 div 能自動獲取到高度
優點：簡單css 頂上有空白，代碼少，瀏覽器支持好，不容易出現怪問題
缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空 div，讓人感覺很不爽
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法
div2
方法三：父級 div 定義 :
原理：必須定義 width 或 zoom:1，同時不能定義 ，使用 : 時，瀏覽器會自動檢查浮動區域的高度
優點：簡單，代碼少，瀏覽器支持好
缺點：不能和 配合使用，因為超出的尺寸的會被隱藏。
建議：只推薦沒有使用 或對 : 理解比較深的朋友使用。
div2
CSS常見問題
1、IOS 頁面滑動卡頓
body,html{-webkit-overflow-scrolling: touch;}
2、CSS滾動條仿 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、實現隱藏滾動條同時又可以滾動
.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 繪制三角形實現一個簡單的三角形
div {width: 0;height: 0;border-width: 0 40px 40px;border-style: solid;border-color: transparent transparent red;}
效果如下：
實現帶邊框的三角形
#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;}
效果如下：
注: 如果想繪制右直角三角，則將左 設置為 0；如果想繪制左直角三角，將右 設置為 0 即可（其它情況同理）。
5、表格邊框合并
table,tr,td{ border: 1px solid #666;}table{ border-collapse: collapse;}
6、 CSS 選取第 n 個標簽元素
使用方法：
li:first-child{}
7、 處理圖片異常使用 異常處理時，若 的圖片也出現問題，則圖片顯示會陷入死循環，所以要在賦值異常圖片之后，將地址置空。
8、移動端軟鍵盤變為搜索方式默認情況下軟鍵盤上該鍵位為前往或者確認等文字，要使其變為搜索文字，需要在 input 上加上 type 聲明：
需要一個 form 標簽套起來,并且設置 屬性,這樣寫完之后輸入法的右下角就會自動變成搜索。
同時，使用了 類型后，搜索框上會默認自帶刪除按鈕
如需屏蔽，可以使用如下方式：
input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance: none; }
CSS常用屬性
一、字體屬性：(font)
1. 大小 {font-size: x-large;}(特大) xx-small;(極小) 一般中文用不到，只要用數值就可以，單位：PX、PD2.樣式 {font-style: ;}(偏斜體) ;(斜體) ;(正常)3. 行高 {line-: ;}(正常) 單位：PX、PD、EM4.粗細 {font-: bold;}(粗體) ;(細體) ;(正常)5.變體 {font-: small-caps;}(小型大寫字母) ;(正常)6.大小寫 {text-: ;}(首字母大寫) ;(大寫) ;(小寫) none;(無)7.修飾 {text-: ;}(下劃線) ;(上劃線) line-;(刪除線) blink;(閃爍)二、常用字體：(font-)" New", , , "Times New Roman", Times, serif, Arial, , sans-serif, 三、背景屬性：()
色彩 {-color: #;}
圖片 {-image: none;}
重復 {-: no-;}
滾動 {-: fixed;}(固定) ;(滾動)
位置 {-: left;}(水平) top(垂直);
簡寫方法 {:#000 url(..) fixed left top;} /*簡寫·這個在閱讀代碼中經常出現。四、區塊屬性：(Block)
字間距 {-: ;} 數值
對齊 {text-align: ;}(兩端對齊) left;(左對齊) right;(右對齊) ;(居中)
縮進 {text-: 數值px;}
垂直對齊 {-align: ;}(基線) sub;(下標) sup;(上標) top; text-top; ; ; text-;
詞間距word-: ; 數值
空格white-space: pre;(保留) ;(不換行)
顯示 {:block;}(塊) ;(內嵌) list-item;(列表項) run-in;(追加部分) ;(緊湊) ;(標記) table; -table; table-raw-group; table--group; table--group; table-raw; table--group; table-; table-cell; table-;(表格標題) /* 屬性的了解很模糊*/
五、方框屬性：(Box)六、邊框屬性：()七、列表屬性：(List-style)
類型list-style-type: disc;(圓點) ;(圓圈) ;(方塊) ;(數字) lower-roman;(小羅碼數字) 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%; /*設置行高*/
font-:bold; /*文字粗體*/
-align:sub; /*下標字*/
-align:super; /*上標字*/
text-:line-; /*加刪除線*/
text-: ; /*加頂線*/
text-:; /*加下劃線*/
text-:none; /*刪除鏈接下劃線*/
text- : ; /*首字大寫*/
text- : ; /*英文大寫*/
text- : ; /*英文小寫*/
text-align:right; /*文字右對齊*/
text-align:left; /*文字左對齊*/
text-align:; /*文字居中對齊*/
text-align:; /*文字分散對齊*/
-align屬性
十、CSS邊框空白
-top:10px; /*上邊框留空白*/
-right:10px; /*右邊框留空白*/
-:10px; /*下邊框留空白*/
-left:10px; /*左邊框留空白*/
頁面布局常用詞匯
頭部/頁眉；