所謂界面樣式，就是更改一些用戶操作樣式，比如更改用戶的鼠標樣式，表單輪廓等，但是比如滾動條的樣式改動受到了很多瀏覽器的抵制，因此我們放棄了，防止表單域拖拽
鼠標樣式cursor
設置或檢索在對象上移動的鼠標指針採用何種系統預定義的光標形狀
cursor: default小白/pointer 小手/move 移動/text 文本
千萬不要用hand 因爲 火狐不支持pointer ie6以上都支持的儘量用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: purple;
cursor: default; /*小白 默認*/
}
.pointer {
cursor: pointer; /*小手*/
background-color: blue;
}
.move {
cursor: move; /*移動*/
}
.text {
cursor: text;
background-color: skyblue;
}
/*這四個比較常用*/
</style>
</head>
<body>
<div>鼠標經過div的時候 會變換鼠標樣式 小白 default 默認的</div>
<div class="pointer">鼠標經過div的時候 會變換鼠標樣式 pointer 小手</div>
<div class="move">鼠標經過div的時候 會變換鼠標樣式 移動 move</div>
<div class="text">鼠標經過div的時候 會變換鼠標樣式 文本 text</div>
</body>
</html>
輪廓outline
是繪製元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。
outline: outline-color/outline-style/outline-width
但是我們都不關心可以設置多少，我們平時都是去掉的。
最直接的寫法是：outline:0; 或者outline:none;
防止拖拽文本域 resize
resize: none 這個單詞可以防止 火狐 谷歌等l瀏覽器隨意的拖動 文本域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
input {
/*outline: 5px solid red;*/
border: 1px solid skyblue;
outline: 0; /*取消輪廓線*/
}
textarea {
resize: none; /*防止文本域拖拽*/
outline: none; /*取消輪廓線*/
width: 400px;
height: 120px;
border: 1px solid pink;
background-color: #f6e7f7;
color: skyblue;
}
</style>
</head>
<body>
<input type="text">
<textarea name="" id="" cols="30" rows="10"></textarea>
<p>下面是文字</p>
</body>
</html>
vertical-align 垂直對齊
讓帶有寬度的塊級元素居中對齊，是margin: 0 auto;
讓文字居中對齊，是text-align: center;
vertical-align 垂直對齊
vertical-align: baseline/top/middle/bottom
設置或檢索對象的垂直方式
（瀏覽器默認圖片和文字基線對齊）
圖片、表單（行內快元素）和文字對齊
注意：對於塊級元素無效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 200px;
height: 100px;
background-color: blue;
margin-left: auto;
margin-right: auto; /*左右自動auto 盒子水平居中對齊*/
text-align: center; /*文字水平居中*/
vertical-align: middle; /*對於塊級元素無效*/
}
img {
/*vertical-align: baseline; 默認基線對齊*/
vertical-align: middle;
/*vertical-align: top;*/
}
textarea {
width: 300px;
height: 300px;
vertical-align: middle;
}
</style>
</head>
<body>
<div>文字居中</div>
<hr>
<img src="1.png" alt="">123
<hr>
用戶留言：<textarea></textarea>
</body>
</html>
去除圖片低測空白縫隙
圖片或者表單等行內快元素，他的底線會和父級盒子的基線對齊。這樣圖片低側會有一個空白縫隙。
解決方法:
1.給img vertical-align: midde/top 等等。讓圖片不要和基線對齊。
2.給img添加display: block; 轉換爲塊級元素就不會存在問題了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 222px;
height: 220px;
background-color: blue;
}
img {
/*display: block; 轉換爲塊級元素*/
vertical-align: top; /*也可middle 但用的最多的是top*/
}
</style>
</head>
<body>
<img src="ad-l.png" height="220" width="222" alt="">
</body>
</html>