#### 多列等高
即使每個列的高度不一致,也能讓他們的高度保持一致。
```
.column {
float: left;
padding-bottom: 999px;
margin-bottom: -999px;
}
```
也可以借鑒table的高度自適應性(table同一行的每個td高度一定一致)
```
.father {
dispaly: table;
}
.column {
display: table-cell;
width: 1000px; //設置一個很大的寬度,只是為了保證每個td平分table寬度,放心,table的總寬度不會超過自身寬度的
}
//這種方法還有一個好處,就是響應式開發中想要控制一行顯示的數量,只需要在要折行的那個column前面加一個display: table-row(模擬tr)的span
```
*** SEO優化
* 內容是一個表格,就用table吧,是一個列表,就用ol/ul吧
* 加粗的字體就用b/strong吧,而不是設置font-weight
* 如果是圖片,就用img吧,加上alt提高SEO
* 如果是輸入框,就用input吧
* 如果是跳轉鏈接,就用a吧,而不是自己監聽單擊事件(a在手機上滑時不會觸發touchstart事件)。
* 如果按鈕就寫button或input的type=button吧,而不是a標簽設置樣式。
* 如果是分割線就用hr吧,而不是設置1px高的div。
* 如果是換行文本就用p吧,而不是加上br。
總的來說,要讓標簽充分發揮自己的作用,而不是一股腦地使用div+css。
#### 三角形
關于border畫三角形已經在css世界中提到了。這里,如何用border畫一個有邊緣色的三角形呢(三角形有邊框顏色)?
思路就是畫兩個三角形,錯開位置。
```
.box {
width: 200px;
height: 80px;
border: 1px solid #ccc;
position: relative;
}
.box:before {
content: '';
position: absolute;
border: 6px solid transparent;
border-right-color: #ccc;
left: -10px;
}
.box:after {
content: '';
position: absolute;
border: 6px solid transparent;
border-right-color: #fff;
left: -8px;
}
```