表格的布局和完善clearfix

最新推荐文章于 2019-01-14 21:06:27 发布

超超.

最新推荐文章于 2019-01-14 21:06:27 发布

阅读量137

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/peichaohang/article/details/85330566

版权

前端专栏收录该内容

39 篇文章 0 订阅

订阅专栏

表格的布局

以前表格更多的情况实际上是用来对页面进行布局的，但是这种方式早已被CSS所淘汰了
表格的列数由td最多的那行决定
表格是可以嵌套，可以在td中在放置一个表格
代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格的布局</title>
</head>
<body>
	<table border="1" width="100%">
		<tr height="100px">
			<td colspan="2"></td>
		</tr>
		<tr height="400px">
			<td width="20%"></td>
			<td width="80%">
				<table border="1" width="100%" height="100%">
					<tr>
						<td></td>
					</tr>
					<tr>
						<td></td>
					</tr>
				</table>
			</td>
		</tr>
		<tr height="100px">
			<td colspan="2"></td>
		</tr>
	</table>
</body>
</html>

完善clearfix

解决父子元素的外边距重叠

		.box1:before{
			content: "";
			display:table;      可以将一个元素设置为表格显示
			display: table;
		}

解决父元素的高度塌陷

.clearfix:after{
			content: "";
			display: block;
			clear: both;
	}

经过修改后的clearfix是一个多功能的样式，既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠

.clearfix:before,
		.clearfix:after{
			content: "";
			display: table;
			clear: both;
		}

超超.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格的布局和完善clearfix

表格的布局以前表格更多的情况实际上是用来对页面进行布局的，但是这种方式早已被CSS所淘汰了表格的列数由td最多的那行决定表格是可以嵌套，可以在td中在放置一个表格代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;表格的布局
复制链接

扫一扫