一、文本樣式

1. 文字超出部分顯示省略號

單行文本的溢出顯示省略號(一定要有寬度)

p{

width:200rpx;

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

}

多行文本溢出顯示省略號

p {

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;

}

2. 文字垂直居中

單行文字的垂直居中

解決方案：line-height 方法

height 和 line-height 同樣的高度

.box{

width:200px;

height:100px;

line-height:100px;

}

多行文字的垂直居中

解決方案：vertical-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. 中英文自動換行word-break:break-all;只對英文起作用，以字母作為換行依據

word-wrap:break-word; 只對英文起作用，以單詞作為換行依據

white-space:pre-wrap; 只對中文起作用，強制換行

white-space:nowrap; 強制不換行，都起作用

p{

word-wrap: break-word;

white-space: normal;

word-break: break-all;

}

6. 文字陰影

text-shadow 為網頁字體添加陰影，通過對text-shadow屬性設置相關的屬性值。

屬性與值的說明如下：

text-shadow: [X-offset,Y-offset,Blur,Color];

X-offset:指陰影居于字體水平偏移的位置。

Y-offset:指陰影居于字體垂直偏移的位置。

Blur:指陰影的模糊值。

color:指陰影的顏色；

h1

{

text-shadow: 5px 5px 5px #FF0000;

}

7. 設置 input 中 placeholder 的字體樣式

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 垂直居中的方法方法一：偽元素和 inline-block / vertical-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;

}方法三：transform(不兼容 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%);

}方法四：設置 margin: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 定義 height

原理：父級 div 手動定義 height，就解決了父級 div 無法自動獲取到高度的問題。

優點：簡單，代碼少，容易掌握

缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級 div 不一樣時，會產生問題

建議：不推薦使用，只建議高度固定的布局時使用

評分：★★☆☆☆

.div1{background:#000080;border:1px solid red;/*解決代碼*/height:200px;}

.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}

.left{float:left;width:20%;height:200px;background:#DDD}

.rightright{float:rightright;width:30%;height:80px;background:#DDD}

LeftRight

div2

方法二：結尾處加空 div 標簽 clear:both

原理：添加一個空 div，利用 css 提高的 clear:both 清除浮動，讓父級 div 能自動獲取到高度

優點：簡單，代碼少，瀏覽器支持好，不容易出現怪問題

缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空 div，讓人感覺很不爽

建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法

評分：★★★☆☆

.div1{background:#000080;border:1px solid red;}

.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}

.left{float:left;width:20%;height:200px;background:#DDD}

.rightright{float:rightright;width:30%;height:80px;background:#DDD}

/*清除浮動代碼*/

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}

.clearfloat{zoom:1}

LeftRight

div2

方法三：父級 div 定義 overflow:hidden

原理：必須定義 width 或 zoom:1，同時不能定義 height，使用 overflow:hidden 時，瀏覽器會自動檢查浮動區域的高度

優點：簡單，代碼少，瀏覽器支持好

缺點：不能和 position 配合使用，因為超出的尺寸的會被隱藏。

建議：只推薦沒有使用 position 或對 overflow:hidden 理解比較深的朋友使用。

評分：★★★☆☆

.div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;overflow:hidden}

.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}

.left{float:left;width:20%;height:200px;background:#DDD}

.rightright{float:rightright;width:30%;height:80px;background:#DDD}

LeftRight

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;

}

3. 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;

}

「效果如下：」

注: 如果想繪制右直角三角，則將左 border 設置為 0；如果想繪制左直角三角，將右 border 設置為 0 即可(其它情況同理)。

4. 表格邊框合并

table,tr,td{

border: 1px solid #666;

}

table{

border-collapse: collapse;

}

5. CSS 選取第 n 個標簽元素first-child first-child 表示選擇列表中的第一個標簽。

last-child last-child 表示選擇列表中的最后一個標簽

nth-child(3) 表示選擇列表中的第 3 個標簽

nth-child(2n) 這個表示選擇列表中的偶數標簽

nth-child(2n-1) 這個表示選擇列表中的奇數標簽

nth-child(n+3) 這個表示選擇列表中的標簽從第 3 個開始到最后。

nth-child(-n+3) 這個表示選擇列表中的標簽從 0 到 3，即小于 3 的標簽。

nth-last-child(3) 這個表示選擇列表中的倒數第 3 個標簽。

「使用方法：」

li:first-child{}

6. onerror 處理圖片異常

使用 onerror 異常處理時，若 onerror 的圖片也出現問題，則圖片顯示會陷入死循環，所以要在賦值異常圖片之后，將地址置空

7. 移動端軟鍵盤變為搜索方式

默認情況下軟鍵盤上該鍵位為前往或者確認等文字，要使其變為搜索文字，需要在 input 上加上 type 聲明：

需要一個 form 標簽套起來,并且設置 action 屬性,這樣寫完之后輸入法的右下角就會自動變成搜索

同時，使用了 search 類型后，搜索框上會默認自帶刪除按鈕

如需屏蔽，可以使用如下方式：

input[type="search"]::-webkit-search-cancel-button{

-webkit-appearance: none;

}

總結

以上是生活随笔為你收集整理的td 首行缩进_工作中常用的CSS整理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。