css常用技巧

2021-07-26 16:46:22 字數 2445 閱讀 8575

水平居中元素：

通用方法，元素的寬高未知

方式一：css3 transform 

.parent


.child
方式二：flex 布局

.parent
適用於子元素為浮動，絕對定位，內聯元素，均可水平居中。

居中的元素為常規文件流中的內聯元素(display: inline)

常見的內聯元素有：span, a, img, input, label 等等

.parent
此方法同樣適用於 display: inline-block 的元素。

居中的元素為常規文件流中的塊元素(display: block)

常見的塊元素：div, h1~h6, table, p, ul, li 等等

方式一：設定 margin

.parent


.child
此方法只能進行水平的居中，且對浮動元素或絕對定位元素無效。

方式二：修改為 inline-block 屬性

.parent


.child
居中的元素為浮動元素

.child
居中的元素為絕對定位元素

方式一：

.parent


.child
方式二：

.parent


.child
垂直居中元素：

通用方法，元素的寬高未知

方式一：css3 transform

.parent


.child
方式二：flex 布局

.parent
適用於子元素為浮動，絕對定位，內聯元素，均可垂直居中。

居中元素為單行文字

.text
把文字的 line-height 設為文字父容器的高度，適用於只有一行文字的情況。

已知元素寬高

方式一：

.parent


.child
方式二：

.parent


.child
垂直居中元素：

絕對居中定位

div
優點：

不僅可以實現在正中間，還可以在正左方，正右方

元素的寬高支援百分比 % 屬性值和 min-/max- 屬性

可以封裝為乙個公共類，可做彈出層

瀏覽器支援性好

2. 負邊距居中

.child
特點：

良好的跨瀏覽器特性,相容 ie6 - ie7

靈活性差，不能自適應，寬高不支援百分比尺寸和 min-/max- 屬性

3. transform 定位

.child
特點：

內容可自適應，可以封裝為乙個公共類，可做彈出層

可能干擾其他 transform 效果

4. flexbox 布局

.parent
這是 css 布局未來的趨勢。flexbox 是 css3 新增屬性，設計初衷是為了解決像垂直居中這樣的常見布局問題。

5. table-cell 居中

.parent


.child
適用於子元素 display 為 inline-block, inline 型別的元素，需要已知父元素的寬高，且父元素的寬高不能設為百分比數。

font-size 配合 vertical-align 實現垂直居中

.parent


.child


該方法的要點是給父元素設乙個合適的 font-size 的值，這個值的取值為該父元素的高度除以 1.14 得到的值，並且子元素必須 是乙個 inline 或 inline-block 元素，需要加上 vertical-align: middle 屬性。使用這種方法，子元素的寬度或高度都不必知道。
具體原理可以上網搜 vertical-align 垂直居中。

文字內容居中

text

CSS常用技巧

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

CSS 常用開發技巧

目錄 如何在點文字時也選中核取方塊或單選框？如何讓單行文字在容器內垂直居中？如何使文字溢位邊界顯示為省略號？如何設定內聯元素的寬高？效果如下 如下 方式一 所有主流瀏覽器都支援 label 的 for 屬性值與 input 的 id 屬性值一致 選項一選項二 選項一選項二 方式二 相比方法1更簡潔，...

css常用技巧集合

1 不想讓按鈕touch時有藍色的邊框或半透明灰色遮罩 根據系統而定 解決方式一 webkit tap highlight color rgba 0,0,0,0 webkit user modify read write plaintext only webkit user modify有個 就是輸...