css寫頁面時,遇到了以下的一些問題 ?每每寫頁面都要去搜索解決方案 ?,現在整理如下,分享給朋友們:
1.背景圖片高度自適度
padding-bottom: 100%;
height: 0;
2.讓底部內容一直固定在底部?
3.導航添加分格線
.top ul li + li { border-left: 1px solid #ddd;}
4.最優清除浮動
.clearfix:before,.clearfix:after{content: " ";display: table;}
.clearfix:after{clear:both;}
5.去除img之間的空隙
font-size: 0;
vertical-align: bottom;
6.使用css設置雙線條邊框
border:2px solid #f9e42b; //邊框
outline:2px solid #f9e42b; //外輪廓
outline-offset:6px; //主要屬性 設置邊框與外輪廓的間距
7: 使用flex布局時,遇到如下圖情況,我的做法是在最后面加一個空li ,如有其它好的解決方案,歡迎推薦
8.移動端導航左右滑動效果 (以前一直以為只有js插件能夠實現,其實css一個屬性就搞定)
overflow-x: scroll;? //裁剪內容 - 提供滾動機制。
9.一些CSS屬性
vertical-align middle 垂直居中
display: table-cell;
text-decoration: line-through; 刪除線
pointer-events:none; 取消元素鼠標點擊事件? 就是讓元素變成透明不能點擊狀態
overflow: hidden; 元素超出隱藏
text-overflow: ellipsis; 文字超出隱藏
white-space: nowrap;? 文本強制單行顯示
border-collapse: collapse;? 表格邊框單行線
table,tr,th : border:1px solid #000;? 表格邊框