css基本语法（二）——表格列表边距尺寸浮动和清除

原创于 2019-07-28 13:16:10 发布 · 631 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css基本语法 #表格 # 列表 #边距尺寸 # 浮动和清除

前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍了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>