css（三）：常見元件及套路

soldiermakk發表於2019-03-14
CSS元件

css畫三角形

第一種

border:50px solid transparent;
width:0px;
border-left-color:red;
border-top-width:0px;
複製程式碼
  1. 無用邊框為透明
  2. 內部為0
  3. 有用邊框為有色
  4. 頂部邊框為0將兩側拉伸

css（三）：常見元件及套路

小程式碼塊的實現方式

效果圖：

css（三）：常見元件及套路
正確解法：

 display: inline-block;
 padding:5px 5px;
 line-height:22px;
複製程式碼

因為內聯元素不能設定高度，所以先用 display: inline-block;將其變為塊級元素，然後再用padding將寬高撐出來,滿足寬高並且達到居中效果。

錯誤解法：

width:70px;
height:30px;
line-height:30px;
text-algin:center;
複製程式碼

這樣子寫死高度會導致不能加字，很容易出bug。

三角形與其他結合

效果圖：

css（三）：常見元件及套路

.userCard .welcome{
    background:#e6686a;
    color: #EFEFEF;
    display: inline-block;
    padding:5px 5px;
    position:relative;
}
.userCard .welcome .triangle{
    display: block;
    border:12px solid transparent;
    width:0px;
    border-left-color:#E6686A;
    border-top-width:0px;
    top:100%;
    left:4px;
    position:absolute;
}
複製程式碼
  1. 依附元素absolute；被依附元素relative；
  2. 依附元素top:100%;
  3. 兩者變為塊級元素

大框小框div

如果大框中設定了max-width,那麼就不要再加padding了，會撐寬。

解決方法：

在div中套div，小框div加padding

表格類問題

效果圖：

css（三）：常見元件及套路

.userCard .text>dl>dd{
    float:left;
    width:30%;
}
.userCard .text>dl>dt{
    float:left;
    width:70%;
}
複製程式碼

解決思路：

由於dd，dt對導致在同一行，所以設定寬度百分比之和為100霸佔一行。

字型樣式 行間距問題

*{
    padding: 0px;
    margin:0px;
}
複製程式碼

先消除html自帶樣式，然後用css的padding margin把他撐起來！

icon-font.cn的使用

  1. 搜尋想要的圖示並新增購物車（多加幾個）

css（三）：常見元件及套路
2. 點選購物車並新增至專案
css（三）：常見元件及套路
3. 生成連結並檢視幫助文件

css（三）：常見元件及套路
4. 將連結加入script

<script src="//at.alicdn.com/t/font_1091123_sfjj972p7qf.js">
</script>
複製程式碼
  1. 加入通用css程式碼（引入一次就行）
<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>
複製程式碼
  1. 挑選相應圖示並獲取類名，應用於頁面
<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>
複製程式碼

css畫陰陽太極圖

div{
  background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,1) 51%, rgba(255,255,255,1) 51%, rgba(0,0,0,1) 51%, rgba(0,0,0,1) 100%);
  width:200px;
  height:200px;
  border-radius:50%;
  position:relative;
  border:0.1px solid black;
}
div::before{
  content:"";
  display:block;
  width:20px;
  height:20px;
  background:white;
  position:absolute;
  border-radius:50%;
  top:50px;
  left:0px;
  border:40px solid black; 
}
div::after{
  content:"";
  display:block;
  width:20px;
  height:20px;
  background:black;
  position:absolute;
  border-radius:50%;
  top:50px;
  right:0px;
  border:40px solid white; 
}
複製程式碼

效果圖:

css（三）：常見元件及套路

要點： 0. 使用::before ::after偽類省去div

  1. 偽類中使用content:"";讓偽類顯示出來
  2. 偽類自動變成block元素

居中方式

有寬度

使用margin-left：auto；margin-right：auto；

沒寬度

誰變成了inline-block，就在誰的父元素上使用text-align：center居中。

相關文章