中html倒入css那么套路,CSS常用套路
a標簽去除原顏色(改為白色)和下劃線
text-decoration: none;
color: #ffffff;
列表標簽去除默認小點:
list-style-type:none;
設置元素透明度：
opacity:0.5;
頁面中文字無法被選中：
user-select: none;
鼠標懸停，樣式變化的方法：
a:hover {
opacity: 1;
}
設置字體行高(如果只有一行文字可以達到居中的效果)：
line-height: 45px;
設置字體樣式：
font-family: DFKai-SB;
改變鼠標的樣式：
cursor : pointer;? (變成小手)
cursor :?default;?(變成默認鼠標樣式)
設置元素邊框：
border: 1px solid #ffffff;
設置元素圓角：
border-radius: 5px;
設置元素為圓形(元素本身為正方形，即寬高一樣)：
border-radius: 50%;
更改精靈圖定位：
background-position: -20px -20px;
內容未顯示完，有滾動條顯示剩下區域：
overflow: auto;
改變盒模型元素寬度計算模型為 IE模型(寬度包括了邊框和內邊距的長度)：
box-sizing: border-box;
inline-block元素、inline元素、文本、img圖片，垂直居中顯示，需要設置他們父元素的vertical-align屬性(只要元素已設置高度即可讓文字內容居中)：
vertical-align:middle;
inline-block元素、inline元素、文本、img圖片，水平居中顯示，需要設置他們父元素的text-align屬性(只要元素能設置寬度即可讓文字內容居中)：
text-align: center;
元素根據父元素寬度進行居中顯示 block 元素(前提條件，該block元素需要設置有寬度的值)：
margin: 0 auto;
文字加粗：
font-weight: bold;
消除input輸入框，點擊后輪廓的光圈：
input:focus{
outline: 0px;
}
盒模型整體向XYZ某個方向移動(相比使用外邊距移動，性能更優)：
transform: translate3d(200px, 0px, 0px)
布局：
設置子元素左右距離父元素邊框百分之5的邊距，有如下兩種方法，其中第二種方案不脫離文檔流：
1、子絕父相，父元素：position:?relative;? 子元素：position:?absolute; left:5%; right:5%;
2、 外邊距，子元素(不設置寬度):???height: 100%;???margin: 0 5%;
設置絕對定位(設置后可以根據相對定位的父元素，進行位置的定位)：
position: absolute;
設置圖層前后順序(只有脫離文檔流的屬性可以使用，值越大在的位置越前面)：
z-index: -1;
設置背景圖片(平鋪)等比拉升，覆蓋整個元素：
background-size: cover ;
背景圖片上下左右(水平垂直)居中：
background-position: center center;
設置分隔線，可以使用加號選擇器(表示當前class為a的元素前一個class也是a，選中當前class為a的元素)保證css代碼的一致性：
li .a + .a{
border-right: 1px solid #ffffff;
}
去除a標簽的點擊跳轉的效果：
陰影設置：
box-shadow: 0px 4px 13px 0px rgba(0,0,0,0.2) ;
清楚浮動最優套路，給浮動元素的父元素添加如下CSS樣式(::after是偽元素，作用是在該元素的最前面增加一個元素，但在html中并不存在該元素，主要作用是布局頁面):
.a::after {
content:"";
display:block;
clear:both
}
使用自定義動畫：
先定義動畫效果
@keyframes submenuSlide {
0%{
opacity: 0;
margin-right: 100%;
}
100%{
opacity: 1;
margin-right: 0%;
}
}
再使用動畫(執行動畫submenuSlide，整個過程1.5s執行完畢，勻速執行，重復執行)
.loading::after{
content: '';
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
animation:submenuSlide?1.5s linear infinite ;
animation-delay: 0.75s; #延遲0.75s執行
}
過度動畫(所有變更過度，在0.2s內完成動畫效果)：
transition: all 0.2s;
行內元素，常見套路(設置完行內后，需要vat才能讓行內元素正常顯示)
nav{
display: inline-block;
vertical-align: top;
}
居中套路：
1、行內元素居中
2、塊級元素居中
直角三角形套路：
.userCard .welcome .triangle{
/* 將span變成塊級元素 */
display: block;
/* 將邊框粗細設置為10px 顏色設置為透明*/
border: 10px solid transparent;
/* 如果不設置寬度，有可能會隨父元素自適應，最好設置為0 */
width:0px;
/* 將左邊邊框，單獨設置顏色(會覆蓋原來設置的透明色) */
border-left-color: #E6686A;
/* 將頂部邊框的寬度設置為0(就是讓頂部邊框隱藏，這樣左右兩邊就是直角三角形了) */
border-top-width: 0px;
/* 子絕父相 */
position: absolute;
top: 100%;
left: 4px;
}
CSS兼容性寫法;
CSS3動畫效果生成器：
總結
以上是生活随笔為你收集整理的中html倒入css那么套路,CSS常用套路的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CentOS7 源码编译安装MySQL8
- 下一篇： 浅析CSS选择器