常用的css的技巧

2022-05-18 19:27:54 字數 1511 閱讀 4267

1.在做專案當中,由靜態頁面來載入到專案中,作為動態資料的部分,若是這個動態資料,前面或者後面有需要顯示(是用background來顯示的),一般不用float:left或者right,而是padding。

例如:預覽

2、做瑞祥裝飾的手機端時,遇到乙個問題,

3、很多時候我們寫導航的時候,導航每個li之間可能會有間隔線,但是我們經常會去要設定最後乙個間隔線為無,一般會使用li:last-child。

li:last-child
4、經常會遇到需要強制不折行,但是因為不常用,總是不記得.

p
5.還有乙個相當不常用,就是 關於漢字注音— 使用ruby標籤和ruby-align屬性,可以利用ruby-align設定對齊方式。

"

ruby-align:right

">注音zhuyin

6.常用的超過寬度的內容自動截斷,並且顯示省略號。(定義乙個寬度,再加上text-overflow:ellipsis; white-space:nowrap; overflow:hidden;)

ol

li

7.平時寫table時,經常在**中因為文字過多,而導致擠壓臨近資料,如下圖

所以一般在平時寫table的時候,還是要有習慣,給table中每個td一定的寬度,或者寬度比,然後再加上word-wrap: break-word

如下面**:

"

2%">

"chkall

" name="

chkall

" runat="

server

" type="

checkbox

" onclick="

check(this, 'chkitem')

" title="

全選" />"4%

">編號"4%

">地區"8%

">材料名稱"4%

">品牌"4%

">規格

"12%

">所屬材料"5%

">原供價"5%

">現供價"5%

">原配送"5%

">現配送"7%

">申請理由"7%

">打回理由"7%

">詳細狀態"7%

">審核狀態"7%

">申請時間"7%

">執行時間

.tbl_2 td,.tbl_2 th

.tbl_2 td span

效果如下圖所示:

常用的css小技巧

li first child li last child li nth child 4 width 200px word break break all text overflow ellipsis display webkit box 物件作為伸縮盒子模型顯示 webkit box orient ...

CSS常用技巧

css 使用技巧 1.可以避開css的盒模型考慮問題,指定margin和padding的值的時候在分別另外指定,後面的只將覆蓋前面的值。2.img 可以避免帶鏈結的邊緣出現藍色邊框,將以塊級元素顯示。3 nowrap 有時候我們要在首頁動態列印一列十條文章,要放在乙個css容器div裡面,若每行文字...

css常用技巧

水平居中元素 通用方法,元素的寬高未知 方式一 css3 transform parent child 方式二 flex 布局 parent 適用於子元素為浮動,絕對定位,內聯元素,均可水平居中。居中的元素為常規文件流中的內聯元素 display inline 常見的內聯元素有 span,a,img...