前端基礎篇3--css高階技巧
阿新 • • 發佈：2021-10-13
一.精靈圖
1.為什麼需要精靈圖
減少伺服器接收和傳送請求的次數，提高頁面的載入速度
2.精靈圖（sprites）的使用
- 原理核心：background-position
<style> span { display: inline-block; background: url(images/abcd.jpg) no-repeat; } .p { width: 100px; height: 112px; /* background-color: pink; */ background-position: -493px -276px; } .i { width: 60px; height: 108px; /* background-color: pink; */ background-position: -327px -142px; } .n { width: 108px; height: 109px; /* background-color: pink; */ background-position: -215px -141px; } .k { width: 105px; height: 114px; /* background-color: pink; */ background-position: -495px -142px; } </style> </head> <body> <span class="p">p</span> <span class="i">i</span> <span class="n">n</span> <span class="k">k</span> </body>
二.字型圖示
1.優點（瞭解）
輕量級;
靈活性;
相容性
2.字型圖示的下載
- icomoon 字型檔
- 阿里 iconfont 字型檔
3.適用場景
- 如果遇到一些結構和樣式比較簡單的小圖示，就用字型圖示。
- 如果遇到一些結構和樣式複雜一點的小圖片，就用精靈圖。
4.CSS 三角
做法:寬高為0，用border的各個方向去實現
<style> .box1 { width: 0; height: 0; /* border: 10px solid pink; */ border-top: 10px solid pink; border-right: 10px solid red; border-bottom: 10px solid blue; border-left: 10px solid green; } .box2 { width: 0; height: 0; border: 50px solid transparent; border-left-color: pink; margin: 100px auto; } .jd { position: relative; width: 120px; height: 249px; background-color: pink; } .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: pink; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="jd"> <span></span> </div> </body>
三.CSS 使用者介面樣式
1.滑鼠樣式
li {cursor: pointer; }
2.取消表單輪廓和防止拖拽文字域
input {outline: none; }
textarea{ resize: none;}
文字域標籤寫到一行
四.vertical-align 屬性應用
1.圖片文字垂直居中對齊
vertical-align : middle
2.圖片底部空隙
- 給圖片新增 vertical-align:middle | top| bottom 等。
- 把圖片轉換為塊級元素 display: block;
五.溢位的文字省略號顯示
1.單行
white-space: nowrap; （ 預設 normal 自動換行） overflow: hidden; text-overflow: ellipsis;
2.多行
overflow: hidden;
text-overflow: ellipsis;
/* 彈性伸縮盒子模型顯示 */
display: -webkit-box;
/* 限制在一個塊元素顯示的文字的行數 */
-webkit-line-clamp: 2;
/* 設定或檢索伸縮盒物件的子元素的排列方式 */
-webkit-box-orient: vertical;
六.常見佈局技巧
1.margin負值運用
不用擔心同時走的問題
滑鼠移動上去顯示邊框的效果
2.文字圍繞浮動元素
3.CSS 三角巧妙應用
直角三角形和梯形
<style>
.box1 {
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 ;
}
.price {
width: 160px;
height: 24px;
line-height: 24px;
border: 1px solid red;
margin: 0 auto;
}
.miaosha {
position: relative;
float: left;
width: 90px;
height: 100%;
background-color:red;
text-align: center;
color: #fff;
font-weight: 700;
margin-right: 8px;
}
.miaosha i {
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
border-color: transparent #fff transparent transparent;
border-style: solid;
border-width: 24px 10px 0 0;
}
.origin {
font-size: 12px;
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="price">
<span class="miaosha">
¥1650
<i></i>
</span>
<span class="origin">¥5650</span>
</div>
</body>
4.CSS初始化：重設瀏覽器的樣式
/* 把我們所有標籤的內外邊距清零 */
* {
margin: 0;
padding: 0
}
/* em 和 i 斜體的文字不傾斜 */
em,
i {
font-style: normal
}
/* 去掉li 的小圓點 */
li {
list-style: none
}
img {
/* border 0 照顧低版本瀏覽器 如果 圖片外面包含了連結會有邊框的問題 */
border: 0;
/* 取消圖片底側有空白縫隙的問題 */
vertical-align: middle
}
button {
/* 當我們滑鼠經過button 按鈕的時候，滑鼠變成小手 */
cursor: pointer
}
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button,
input {
/* "\5B8B\4F53" 就是宋體的意思 這樣瀏覽器相容性比較好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
body {
/* CSS3 抗鋸齒形 讓文字顯示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide,
.none {
display: none
}
/* 清除浮動 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}