css基本語法(二)——表格 列表 邊距 尺寸 浮動和清除

表格

把兩個單元格相鄰的邊框線合併爲一條線,去掉表格邊框之間的空隙
要放在<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;}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章