css高階技巧

2021-10-09 11:26:40 字數 2057 閱讀 3339

一、display顯示

display設定或檢索物件是否及如何顯示。

display: none隱藏物件

display: block 除了轉換為塊級元素之外,同時還有顯示元素的意思。

特點:隱藏之後,不再保留位置。

width: 40px;

heigt: 100px;

}.one

二、visibility可見性

設定或檢索是否顯示物件。

visibility: visible ;

物件可視visibility: hidden;物件隱藏

特點:隱藏之後.聯續保留原有位苦.

width: 40px;

heigt: 103px;

.one

.two

三、overflow溢位

檢索或設定當物件的內容超過其指定高度及寬度時如何管理內容。

visible不剪下內容也不新增滾動條

hidden不顯示超過物件尺寸的內容,超出的部分隱藏掉

scroll不管超出內容否,總是顯示滾動條

auto超出自動顯示滾動條,不超出不顯示滾動條

width:103px;

height: 180px;

background: lightblue;

overflow: hidden;

}實際開發場景:

清除浮動

隱藏超出內容,隱藏掉,不允許內容超過父盒子。

總結:顯示與隱藏總結

display 隱藏物件,不保留位置配合後面js做特效,比如下拉列表,原先沒有,滑鼠經過,顯示下拉列表,應用極為廣泛

visibility隱藏物件,保留位置使用較少

overflow只是隱藏超出大小的部分1.可以清除浮動⒉保證盒子裡面的內容不會超出該盒子範

四、vertical-align垂直對齊

有寬度的塊級元素水平居中對齊,是margin: 0 auto;

讓元素中的文字居中對齊,是text-align: center;

vertical-align垂直對齊,它只針對於行內元素或者行內塊元素

vertical-align : baseline |top ]middle |bottom

設定或檢索物件內容的垂直對其方式。

注急:

vertical-align不影響塊級元素中的內容對齊,它只針對於行內元素或者行內塊元素,

特別是行內塊元素,通常用來控制/表單與文字的對齊。

基線對齊vertical-align: baseline;

垂真居中vertical-align: middle;

頂部對齊vertical-align: top;

五、去除底側空白縫隙

給img vertical-align:middle | top| bottom等等。讓不要和基線對齊。

給img新增 display: block;轉換為塊級元素就不會存在問題了

vertical-align垂直對齊,它只針對於行內元素或者行內塊元素

vertical-align : baseline |top ]middle |bottom

設定或檢索物件內容的垂直對其方式。

注急:

vertical-align不影響塊級元素中的內容對齊,它只針對於行內元素或者行內塊元素,

特別是行內塊元素,通常用來控制/表單與文字的對齊。

基線對齊vertical-align: baseline;

垂真居中vertical-align: middle;

頂部對齊vertical-align: top;

總結:

/先強制一行內顯示文字white-space: nowrap;

/超出的部分隱藏overflow: hidden;

/立字用省略縣替{代超出的部分f text-overflow: ellipsis;

CSS高階技巧

1.滑鼠樣式cursor 設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。cursor default 小白 pointer 小手 move 移動 text 文字 2.溢位的文字隱藏 word break 自動換行 white space設定或檢索物件內文字顯示方式。通常我們使用於強制...

CSS高階技巧

所謂的介面樣式,就是更改一些使用者操作樣式,比如 更改使用者的滑鼠樣式,表單輪廓.防止表單域拖拽等。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制。設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。cursor default 小白 pointer 小手 move 移動 text 文字 ...

CSS高階技巧

在css中有三個顯示和隱藏的單詞比較常見,我們要區分開,他們分別是 display visibility 和 overflow。他們的主要目的是讓乙個元素在頁面中消失,但是不在文件原始碼中刪除。display 顯示 display 設定或檢索物件是否及如何顯示。display none 隱藏物件 與...