css佈局的小知識點積累（持續更）

1、 行內元素的注意點

只能設置margin-left,margin-right,padding-left,padding-right;
不能設置他們的top，bottom值

2、 多餘的文字顯示省略號

在web開發過程中，常常會遇到要讓佈局中的某些文本根據寬度來顯示，如果超過最大寬度仍然顯示不完的，就顯示爲省略號的情況，添加下面的CSS樣式表就能實現這種效果，但是這種效果只適用於單行顯示的文本。
首先給用於放文本的標籤元素設置一個寬度值，並設置溢出屬性overflow爲溢出隱藏,設置文本縮略的樣式爲”…”

width: 245px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

3、自定義表格樣式

在邊框處理上主要使用了合併邊框屬性
border-collapse
設置或檢索當表格邊框獨立時，行和單元格的邊框在橫向和縱向上的間距。 collapse和border-spacing:0;

看看例子：
html:

 <table>
       <tbody>
        <tr><td>姓名</td><td>語文</td><td>數學</td><td>英語</td><td>地理</td><td>生物</td></tr>
        <tr><td>小紅</td><td>79</td><td>45</td><td>78</td><td>70</td><td>89</td></tr>
        <tr><td>小方</td><td>23</td><td>52</td><td>78</td><td>45</td><td>78</td></tr>
        <tr><td>小東</td><td>73</td><td>20</td><td>78</td><td>65</td><td>45</td></tr>
        <tr><td>小新</td><td>76</td><td>38</td><td>78</td><td>68</td><td>23</td></tr>
        <tr><td>小夾</td><td>59</td><td>34</td><td>78</td><td>70</td><td>77</td></tr>
        <tr><td>小沉</td><td>90</td><td>96</td><td>78</td><td>32</td><td>32</td></tr>
        </tbody>
   </table>

css代碼：

table{
        border-collapse: collapse; 
        border-spacing:0; 
        margin: 50px 100px;
        border: 1px solid #999;
      }
      table tr{
        height: 30px; 
      }
      table tr:first-child{
        background: pink;
      }
      table td{
        padding: 0;
        width: 100px; border: 1px solid #999;
      }

效果圖:

4、css邊框畫三角形

直接看例子： 正三角，其他方向原理是一樣的，這裏只展示一個向上的例子
html：

  <div class="triangle-up"></div>

css：

 .triangle-up{
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid pink;
      }

效果：

斜三角類似翻頁的效果，這裏我也只是展示上右方向，其他方向類似
html代碼：

 <div class="triangle-topright"></div>

css：

 .triangle-topright {
        width: 0;
        height: 0;
        border-top: 100px solid pink;
        border-left: 100px solid transparent; 
       }

效果圖：