css一些特殊的屬性,使用技巧和使用場景

2022-09-28 23:39:17 字數 960 閱讀 5306

一、display:inline-block;

在想標籤處於一行,設定值為inline-block,經常會有標籤之間對齊方式不一致的問題,此時新增另外乙個屬性vertical-align: top;即可,經常使用的是top或者middle。

display: inline-block;

/*baseline 預設。元素放置在父元素的基線上。

sub 垂直對齊文字的下標。

super 垂直對齊文字的上標

top 把元素的頂端與行中最高元素的頂端對齊

text-top 把元素的頂端與父元素字型的頂端對齊

middle 把此元素放置在父元素的中部。

bottom 使元素及其後代元素的底部與整行的底部對齊。

text-bottom 把元素的底端與父元素字型的底端對齊。

length 將元素公升高或降低指定的高度,可以是負數。

% 使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。

inherit 規定應該從父元素繼承 vertical-align 屬性的值。

*/vertical-align: top;

二、pointer-events: none;

我一直認為pointer-events有點像js的功能,它的作用如下:
阻止使用者的點選動作產生任何效果

阻止預設滑鼠指標的顯示

阻止css裡的hover和active狀態的變化觸發事件

阻止j**ascript點選動作觸發的事件

/*

auto 預設值。元素對指標事件做出反應,比如 :hover 和 click。

none 元素不對指標事件做出反應。

inherit 從其父元素繼承此屬性。

*/pointer-events: none;

一些css的屬性

一些css的屬性 使整個頁面的元素都沒有頁邊距 margin 與填充距離 padding body 使整個頁面居中顯示 padding 12px 元件能與邊緣的距離 moz border radius 6px 6px 6px 6px 圓角 float left div同行顯示 margin 30px...

css的一些屬性

1 文字的水平居中 css實現單行文字水平居中 text align center 2 塊元素居中 保證margin left和margin right都為auto,就可以保證塊元素水平居中 如果要是使用margin 0 auto來實現塊元素居中,就要 指定這個元素的寬度 3 行內元素 使用text...

css一些高階技巧

今天學習了一些css的高階技巧,給自己做乙個筆記。關於元素的顯示與隱藏主要是三個方法 第乙個是display設定或檢索物件是否及如何顯示。display none 隱藏物件 display block 除了轉換為塊級元素之外,同時還有顯示元素的意思。該方法最大特點是隱藏之後,不在保留位置。第二種是v...