css一些高階技巧

2021-10-23 01:49:15 字數 2614 閱讀 3136

今天學習了一些css的高階技巧,給自己做乙個筆記。

關於元素的顯示與隱藏主要是三個方法:

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

display: none 隱藏物件

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

該方法最大特點是隱藏之後,不在保留位置。第二種是visibility可見性

visibility:visible ;  物件可視

visibility:hidden;   物件隱藏

該方法最大的特點是隱藏之後,繼續保留原有位置。第三種是overflow溢位 (檢索或設定當物件的內容超過其指定高度及寬度時如何管理內容。)

overflow :visible | hidden | scroll | auto

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

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

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

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

簡單總結

第乙個是滑鼠樣式cursor設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。

第二種就是輪廓線outline是繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的作用。

不過 我們一般基本不需要 都是去掉的

outline: none;
第三種就是防止拖拽文字域resize

實際開發中,我們文字域右下角是不可以拖拽,所以我們要禁止:

resize: none;
使用者介面樣式總結

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

vertical-align : baseline |top |middle |bottom
我們通常用來控制/表單與文字的對齊

預設文字和是基線對齊的,我們利用vertical-align就可以調整文字與的對齊方式。

還可以去除底側空白縫隙,一般因為和基線對齊所以底部會有空白縫隙,我們調整的對齊方式為別樣的就可以去除空白了。還可以讓變為塊級元素也可以解決。

實現需要三步曲:

1. 先強制一行內顯示文字

white-space: nowrap;

2. 超出的部分隱藏

overflow: hidden;

3. 文字用省略號替代超出的部分

text-overflow: ellipsis;

注意:一定要首先強制一行內顯示,再次和overflow屬性 搭配使用

**為了有效地減少伺服器接受和傳送請求的次數,提高頁面的載入速度。**就有了精靈技術。

主要就是將網頁中的一些背景影象整合到一張大圖中(精靈圖),然而,各個網頁元素通常只需要精靈圖中不同位置的某個小圖,要想精確定位到精靈圖中的某個小圖。

然後我們結合使用背景的三個屬性:

background-image、background-repeat、background-position。

另外,css精靈技術主要針對於背景,插入的img 是不需要這個技術的。給盒子指定小背景時, 背景定位基本都是 負值。

我們用css 邊框可以模擬三角效果

寬度高度為0

我們4個邊框都要寫, 只保留需要的邊框顏色,其餘的不能省略,都改為 transparent 透明就好了

為了照顧相容性 低版本的瀏覽器,加上 font-size: 0; line-height: 0;

Swift的一些高階技巧

我們會發現,新建乙個uiviewcontroller以後,xcode會預設提供乙個函式給你。override func viewdidload 這個函式就是當此viewcontroller生成了乙個新的例項的時候,就會被呼叫。與之相對應的是乙個叫做deinit的函式。deinitswift中的閉包類...

一些css 技巧的記錄

記錄一下,忘記的時候翻一翻的css 技巧。1.input 輸入框的樣式 如下,box sizing 設為border box 且 左右 padding 有.1rem 這樣子輸入框內部就可以有乙個比較友好的內邊距。search input box sizing border box width 100...

CSS布局的一些技巧

通常使元素水平居中用的較多的方法為 main但是,當瀏覽器視窗比元素的寬度還要窄時,瀏覽器會顯示乙個水平滾動條來容納頁面,從而影響頁面可觀性。用max width替代 width 可以使瀏覽器更好地處理小視窗的情況。這點在移動裝置上顯得尤為重要。main目前所有的主流瀏覽器包括ie7 在內都支援 m...