一、文字樣式

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 不一樣時，會產生問題

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

評分：★★☆☆☆

複製程式碼

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

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

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

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

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

評分：★★★☆☆

複製程式碼

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

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

優點：簡單，程式碼少，瀏覽器支援好

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

建議：只推薦沒有使用 position 或對

overflow：hidden

理解比較深的朋友使用。

評分：★★★☆☆

複製程式碼

http：//

blog。csdn。net/qq_423547

73

…

三、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；

}

複製程式碼

效果如下：

實現帶邊框的三角形