background-size: 100% 100%;? ? ? ? ? ? 　　背景通過拉伸實現填充 自適應

overflow: hidden;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 　　清除浮動

box-sizing: border-box;? ? ? ? ? ? ? ? ? ? ? ??　　為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制

border-radius:3px;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 　　 邊框圓角

vertical-align: middle;? ? ? ? ? ? ? ? ? ? ? ? ? 　　實現多個內聯塊垂直中部對齊

cursor:pointer;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?　　鼠標指針樣式?

:nth-child(nn)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?　　偽類選擇器可以給指定行（n）設置樣式odd表示奇數行，even表示偶數行

box-shadow:0px 3px 6px rgba(0,0,0,0.5)? ?陰影

border: none;? outline:none;? ? ? ? ? ? ? ? ? ? ? ? 取消input框默認邊框和選中后的邊框

linear-gradient(direction,?color-stop1...)? ? ? 線性漸變 direction指定漸變方向或角度

?

?使用絕對定位來居中：

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);? ? ? （未設置寬度）

position: absolute;

left: 0;

right: 0;

margin-left: auto;

margin-right: auto;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（設置寬度 只能設置左右居中不能設置上下居中）

?

gulp中使用rem：

<script src="dist/js/lib/viewport/viewport.js"></script>

設置縮放標準

docEl.style.fontSize = 40 * (clientWidth / 1440) + 'px';

?

轉載于:https://www.cnblogs.com/liluning/p/10484351.html

總結

以上是生活随笔為你收集整理的css实用属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。