CSS
display: flex;flex-direction: column;align-items: center;
1.flex佈局
{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center
{
flex:1 /* 所有的子元素平均分配 */
}
}
複製程式碼我寫css必定會用到他，自此之後摒棄flaot,畢竟float要清楚浮動，在我看來他完全可以替代float,而且最大的好處就是對任何不確定的寬和高，我們都可以讓他垂直居中對齊，想要了解的更深點，可以點選這裡 Flex 佈局教程：語法篇
2.移動端1px的實現
.person-infos{
position: relative;
&::before{
content: "";
pointer-events: none; /* 防止點選觸發 */
box-sizing: border-box;
position: absolute;
width: 200%;
height: 200%;
left: 0;
top: 0;
border-top:1px solid #fff;
transform:scale(0.5);
transform-origin: 0 0;
}
}
複製程式碼一定要在改元素上設定position:relative,before內設定position: absolute
3.利用::before,::after設定在元素前後設定border
{
position: relative;
&::before{
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1px;
background: #f1f1f1;
}
}
複製程式碼4.設定背景圖片，並該圖片在一個固定區域內，比如該區域是手機全屏區域減去頭部的標題欄
{
background: url(/static/img/login-back.e7b2e5f.jpg) no-repeat;
position: absolute;
top: 40px; /* 頂部標題欄的高度 */
left: 0;
width: 100%;
background-size: 100% 100%;
height: calc(100% - 40px);
}
複製程式碼推薦使用的是calc,加上我們設定了背景圖片的寬和高是100%，100%，這時候我們就可以看到除去頭部的40px,剩下的區域都被背景圖片佔滿了。
5.一個值得推薦的 css寫的陰影效果，我一直都用，感覺非常使用大部分場景
{
border: none;
border-radius: 5px;
box-shadow: 0 12px 5px -10px rgba(0,0,0,0.1), 0 0 4px 0 rgba(0,0,0,0.1);
-webkit-box-shadow: 0 12px 5px -10px rgba(0,0,0,0.1), 0 0 4px 0 rgba(0,0,0,0.1);
}
複製程式碼6.超出長度省略號
/* 1. 單行文字溢位用省略號顯示：*/
{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
width: 100%; /* IE6 需要定義寬度 */
-o-text-overflow: ellipsis; /* Opera */
text-overflow: ellipsis; /* IE, Safari (WebKit) */
-moz-binding: url('ellipsis.xml#ellipsis'); /* Firefox */
}
/* 2.多行文字溢位用省略號顯示： */
{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
複製程式碼7.顏色的漸變(right表示漸變的方向)
{
background: linear-gradient(to right, #f5adc9, #f38eb6, #f977ab);
}
複製程式碼8.box-sizing
box-sizing: content-box|border-box|inherit;
複製程式碼有時候我們設定內部的div一個固定的寬高，但是由於受padding,border的影響，會讓他的寬高比設定的小，如果不想這樣，可以設定box-sizing:content-box,具體看CSS3 box-sizing 屬性
9.禁用滑鼠點選
{
pointer-events: none;
}
複製程式碼10. input,寬改變border,並且聚焦除掉橙色的邊框
{
border:none;
outline:none;
border:1px solid #eee /* 自定義 */
}
複製程式碼11.設定透明，併相容瀏覽器
{
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}
複製程式碼12.除input,textarea之外，讓任何標籤的內容可編輯，可以在該元素上新增 contenteditable="true"
13.自定義滾動條樣式
/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/
::-webkit-scrollbar
{
width: 16px;
height: 16px;
background-color: #F5F5F5;
}
/*定義滾動條軌道 內陰影+圓角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
/*定義滑塊 內陰影+圓角*/
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
複製程式碼14.實現按鈕一邊凹陷
.btn{
display: block;
width: 100px;
height: 40px;
background-color: lightcoral;
text-align: center;
line-height: 40px;
position: relative;
color: #FFF;
font-size: 2em;
margin: 0 auto;
&::after {
content: "";
width: 30px;
height: 30px;
border-radius: 30px;
background: #fff;
position: absolute;
display: block;
right: -15px;
top: 5px;
}
}
複製程式碼效果如下圖：
