表格
把兩個單元格相鄰的邊框線合併爲一條線,去掉表格邊框之間的空隙
要放在<table></table>
裏
border-collapse:collapse;
設置表格懸停樣式
td:hover{background: blue;color: yellow;}
列表
給列表加圖標
ul li{list-style-image: url(img/1145584.gif)};
列表位置
ul{list-style-position:outside;}
ul{list-style-position:inside;}
浮動
讓縱向排列的列表橫排
列表浮動,並加大寬度,不讓前邊圖標擋住後邊的字
{float: left;width: 100px;}
一個元素浮動以後,它將不再具備塊級元素的換行效果
如果左浮動,它會位於一行的左邊,默認左對齊
去掉列表前符號
ol li{list-style-type: none;}
清除前邊浮動元素對它的影響
style="clear:both;"
邊距
內邊距
pedding不允許爲負值
width: 400px;height: 400px;border: 1px solid red;
padding-left:100px;padding-top: 50px;
不寫方向表示上下左右都是100px
padding: 100px;
此時寬、高都多了200px
在邊框上減去200px即可
寫兩個表示上下、左右
padding: 50px 100px;
寫三個表示上、左右、下
padding: 50px 100px 200px;
寫四個表示上、右、下、左
padding: 50px 100px 200px 200px;
外邊距
margin可以爲負值
讓邊框在水平方向居中
margin: 0px auto;
或使用相對尺寸vw
width:80vw;height: 300px;border: 1px solid red;
margin: 0px 10vw;
vw:將窗口的寬度等分爲100份,每一份就是1vw
vh:將窗口的高度等分爲100份,每一份就是1vh
例如20vw表示寬度爲窗口的20%
邊距多用於實現搜索框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.input{
width: 300px;height: 38px;border: 1px solid red;
border-radius: 6px 0px 0px 6px;
font: 16px/38px "微軟雅黑";
background: url(img/search.png) no-repeat;
padding-left: 40px;
}
</style>
</head>
<body>
<input type="text" name="search" class="input" />
</body>
</html>
尺寸
當使用相對大小vw和vh時,大小會根據當前窗口的拉伸而拉伸
此時可以設置尺寸限制
最大尺寸
max-width:200px;
max-height:100px;
最小尺寸
min-width:100px;
min-height:80px;
浮動和清除
當一個div元素浮動起來,它所佔據的空間就會被釋放,後面的元素就會佔據它的位置
float:left;
清除前邊的浮動對後邊元素產生的影響
clear:both;
讓圖片和文字中線對齊
img{vertical-align: middle;}