1、CSS三角
網頁中常見一些三角形，使用 CSS 直接畫出來就可以，不必做成圖檔或者字型圖示。
div {
width: 0;
height: 0;
/* border: 20px solid pink; */
border-top: 20px solid pink;
border-right: 20px solid red;
border-bottom: 20px solid blue;
border-left: 20px solid green;
}
上述代碼的效果如下：
是以想要得到右三角
，代碼如下：
div {
width: 0;
height: 0;
border: 20px solid transparent;
border-left-color: green;
/* border-bottom-color: blue; */
}
案例：京東三角
效果圖如下：
代碼：
.jd {
position: relative;
width: 120px;
height: 249px;
background-color: skyblue;
}
.jd span {
position: absolute;
right: 15px;
top: -10px;
width: 0;
height: 0;
/* 為了照顧相容性 */
line-height: 0;
font-size: 0;
border: 5px solid transparent;
border-bottom-color: skyblue;
}
html代碼:
<div class="jd">
<span></span>
</div>
2、CSS 使用者界面樣式
2.1 什麼是界面樣式
所謂的界面樣式，就是更改一些使用者操作樣式，以便提高更好的使用者體驗。
- 更改使用者的滑鼠樣式
- 表單輪廓
- 防止表單域拖拽
2.2 滑鼠樣式 cursor
設定或檢索在對象上移動的滑鼠指針采用何種系統預定義的光标形狀。
| 屬性值 | 描述 |
|---|---|
| default | 小白 預設 |
| pointer | 小手 |
| move | 移動 |
| text | 文本 |
| not-allowed | 禁止 |
2.3 輪廓線 outline
給表單添加
outline: 0;
或者
outline: none;
樣式之後，就可以去掉預設的藍色邊框。
2.4 防止拖拽文本域 resize
實際開發中，我們文本域右下角是不可以拖拽的。
3、vertical-align 屬性應用
CSS 的
vertical-align
屬性使用場景： 經常用于設定圖檔或者表單(行内塊元素）和文字垂直對齊。
官方解釋： 用于設定一個元素的
垂直對齊方式
，但是它隻針對于行内元素或者行内塊元素有效。
文法：
| 值 | 描述 |
|---|---|
| baseline | 預設。元素放置在父元素的基線上。 |
| top | 把元素的頂端與行中最高元素的頂端對齊。 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的頂端與行中最低的元素的頂端對齊。 |
3.1 圖檔、表單和文字對齊
圖檔、表單都屬于行内塊元素，預設的 vertical-align 是基線對齊。
此時可以給圖檔、表單這些行内塊元素的 vertical-align 屬性設定為 middle 就可以讓文字和圖檔垂直居中對齊了。
3.2 解決圖檔底部預設空白縫隙問題
bug：圖檔底側會有一個空白縫隙，原因是行内塊元素會和文字的基線對齊。
主要解決方法有兩種：
- 給圖檔添加
vertical-align:middle | top| bottom
- 把圖檔轉換為塊級元素
display: block;
4、溢出的文字省略号顯示
4.1 單行文本溢出顯示省略号
必須滿足三個條件：
/* 這個單詞的意思是如果文字顯示不開，自動換行（預設值） */
/* white-space: normal; */
/* 1.強制在一行内顯示 */
white-space: nowrap;
/* 2.溢出的部分隐藏起來 */
overflow: hidden;
/* 3.文字溢出的時候用省略号來顯示 */
text-overflow: ellipsis;
4.2 多行文本溢出顯示省略号
多行文本溢出顯示省略号，有較大相容性問題， 适合于webKit浏覽器或移動端（移動端大部分是webkit核心）。
/* 溢出的部分隐藏起來 */
overflow: hidden;
text-overflow: ellipsis;
/* 彈性伸縮盒子模型顯示 */
display: -webkit-box;
/* 限制在一個塊元素顯示的文本的行數 */
-webkit-line-clamp: 2;
/* 設定或檢索伸縮盒對象的子元素的排列方式 */
-webkit-box-orient: vertical;
更推薦讓背景人員來做這個效果，因為背景人員可以設定顯示多少個字，操作更簡單。
5、 常見布局技巧
5.1 margin負值的運用
方法：
- 讓每個盒子 margin 往左側移動 -1px 正好壓住相鄰盒子邊框。
- 滑鼠經過某個盒子的時候，提高目前盒子的層級即可（如果沒有有定位，則加相對定位（保留位置），如果有定位，則加z-index）。
代碼：
html代碼：
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
css代碼：
<style>
ul li {
position: relative;
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
}
/* ul li:hover {
1.如果盒子沒有定位，則滑鼠經過添加相對定位即可，相對定位會壓住标準流或浮動
position: relative;
border: 1px solid blue;
} */
ul li:hover {
/* 如果li都有定位，則利用z-index提高層級 */
z-index: 1;
border: 1px solid blue;
}
5.2 文字圍繞浮動元素
巧妙運用浮動元素不會壓住文字的特性。
代碼：
html代碼：
<div class="box">
<div class="pic">
<img src="images/img.png" alt="">
</div>
<p>【集錦】熱身賽-巴西0-1秘魯 内馬爾替補兩人血染賽場</p>
</div>
css代碼：
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 70px;
border: 1px solid #ccc;
margin: 0 auto;
padding: 5px;
}
.pic {
float: left;
width: 120px;
height: 60px;
margin-right: 5px;
}
.pic img {
width: 100%;
}
</style>
5.3 行内塊的巧妙運用
頁碼在頁面中間顯示：
- 把這些連結盒子轉換為行内塊， 之後給父級指定
text-align:center;
- 利用行内塊元素中間有縫隙，并且給父級添加 text-align:center; 行内塊元素會水準會居中。
5.4 CSS三角強化
原理：
代碼：
div {
width: 0;
height: 0;
/* 把上邊框寬度調大 */
/* border-top: 100px solid transparent;
border-right: 50px solid skyblue; */
/* 左邊和下邊的邊框寬度設定為0 */
/* border-bottom: 0 solid blue;
border-left: 0 solid green; */
/* 1.隻保留右邊的邊框有顔色 */
border-color: transparent red transparent transparent;
/* 2.樣式都是solid */
border-style: solid;
/* 3.上邊框寬度要大，右邊框寬度稍小，其餘的邊框都為0 */
border-width: 100px 50px 0 0;
}