記錄一下,忘記的時候翻一翻的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...