一些css 技巧的記錄

2021-09-02 18:01:05 字數 1065 閱讀 2882

記錄一下,忘記的時候翻一翻的css 技巧。

1. input 輸入框的樣式

如下,box-sizing 設為border-box 且 左右 padding 有.1rem ,這樣子輸入框內部就可以有乙個比較友好的內邊距。 

.search-input

box-sizing: border-box

width: 100%

height: .62rem

padding: 0 .1rem

line-height: .62rem

text-align: center

border-radius: .06rem

color: #666

2. border-bottom 

給元素新增乙個底部的border

後者是新增底部與頂部的border

如下,調整了border 的顏色

當前城市

熱門城市

3. float 響應式 布局 簡單案例

父元件 overflow 設定為hidden 可以消除塌陷問題。

父元素中每行顯示三個子元素,且父元素右邊留出一小列。

當前城市

北京

3. 元素撐開整個頁面(頭部預留出位置),這樣遮蔽掉瀏覽器本身的右側滑動。

.list 中內容

當前城市

北京

熱門城市

北京 北京

北京北京北京a

阿拉爾阿拉爾

阿拉爾阿拉爾

阿拉爾阿拉爾

a阿拉爾

阿拉爾阿拉爾

阿拉爾阿拉爾

阿拉爾

a阿拉爾

阿拉爾阿拉爾

阿拉爾阿拉爾

阿拉爾

4. ul 中li 實現垂直水平居中

使用display flex

Vim的一些技巧記錄

gf快捷鍵跳轉到對應文件指定的行數 在vimrc中新增以下 段 function gotofilewithlinenum let bak isfname isfname set isfname 48 57,let line number 0 let file name expand echo fil...

css一些高階技巧

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

CSS布局的一些技巧

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