td 首行縮排 工作中常用的CSS整理

2021-10-13 06:19:30 字數 1298 閱讀 2550

一、文字樣式

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

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

p方法二:flex(不相容 ie8 以下)

.box-wrap 方法三:transform(不相容 ie8 以下)

.box-wrap 方法四:設定 margin:auto(該方法得嚴格意義上的非固定寬高,而是 50%的父級的寬高。)

.box-wrap

.div2

.left

.rightright

left

right

div2

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

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

優點:簡單,**少,瀏覽器支援好,不容易出現怪問題

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

評分:★★★☆☆

.div1

.div2

.left

.rightright

/*清除浮動***/

.clearfloat:after

.clearfloat

left

right

div2

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

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

優點:簡單,**少,瀏覽器支援好

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

評分:★★★☆☆

.div1

.div2

.left

.rightright

left

right

div2

三、css 常見問題

1. ios 頁面滑動卡頓

body,html

6. onerror 處理異常

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

預設情況下軟鍵盤上該鍵位為前往或者確認等文字,要使其變為搜尋文字,需要在 input 上加上 type 宣告:

需要乙個 form 標籤套起來,並且設定 action 屬性,這樣寫完之後輸入法的右下角就會自動變成搜尋

同時,使用了 search 型別後,搜尋框上會預設自帶刪除按鈕

如需遮蔽,可以使用如下方式:

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

css 自動換行 工作中常用的css整理

p 複製 p 複製 解決方案 line height 方法 height 和 line height 同樣的高度 box解決方案 vertical align 方法 box 複製 這是一段內容文字,這是一段內容文字 複製 p first letter 複製 word break break all ...

工作中 常用CSS3記錄

border和padding計算入width之內,其實就是怪異模式了,多用於排版 div 1.邊框圓角,邊框陰影 div 2.背景的大小 bg img 3.文字效果 text 5.元素2d 移動 旋轉 放大 縮小 翻轉 3d x軸旋轉 y軸旋轉 trans2d.trans3d 6.過渡效果trans...

工作中常用的命令

1.unzip zip archive tar cf new.tar path tar xvf file.tar 2.transfer files scp username ip path path first path 傳輸檔案路徑 second path 儲存的路徑 安裝ssh伺服器 apt g...