12.28 表格长表格布局完善clearfix

最新推荐文章于 2024-01-01 12:04:01 发布

冷暖自知···

最新推荐文章于 2024-01-01 12:04:01 发布

阅读量118

点赞数

本文链接：https://blog.csdn.net/weixin_43167531/article/details/85332135

版权

1 表格

在HTML中，使用table标签来创建一个表格 
在table标签中使用tr来表示表格中的一行，有几行就有几对tr
在tr中需要使用td来创建一个单元格，有几个单元格就有几个td
colspan横向的合并单元格
caption表示表格的标题。
thead表示表格的头部。
tbody表示表格的主体。
tfoot表示表格的底部。
rowspan纵向合并
text-align：设置文本的水平对齐。
vertical-align：设置文本的垂直对齐。
可选值：top、baseline、middle、bottom
border-spacing：边框间距
border-collapse：合并边框
collapse：合并边框
separate：不合并边框
padding可以设置内容和表格边框的距离。

table{
			/*设置表格的宽度*/
			width: 300px;
			/*居中*/
			margin: 0 auto;
			/*边框*/
            /*border:1px solid black;*/
            /*table和td边框之间默认有一个距离，通过border-spacing属性可以设置这个距离*/
            /*border-spacing: 10px;*/
            /*
            border-collapse可以用来设置表格的边框合并
            如果设置了边框合并，则border-spacing自动失效
            */
            border-collapse: collapse;
            /*设置背景样式*/
			/*background-color: #bfa;*/
		}
		/*设置边框*/
		th, td{
			border: 1px solid black;
		}
		/*设置隔行变色*/
		tbody > tr:nth-child(even){
			background-color: #bfa;
		}
		/*鼠标移入到tr以后，改变颜色*/
		tr:hover{
			background-color: yellow;
		}

长表格

有一些情况下表格是非常的长的，这时就需要将表格分为三个部分，表头，表格的主体，表格底部
在HTML中为我们提供了三个标签：

		thead 表头
		tbody 表格主体
		tfoot 表格底部
		
	这三个标签的作用，就来区分表格的不同的部分，
	他们都是table的子标签，都需要直接写到table中，tr需要写在这些标签当中
		
	thead中的内容，永远会显示在表格的头部
	tfoot中的内容，永远都会显示表格的底部
	tbody中的内容，永远都会显示表格的中间
	
	如果表格中没有写tbody，浏览器会自动在表格中添加tbody
	并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
	通过table > tr 无法选中行 需要通过tbody > tr
	以前表格更多的情况实际上是用来对页面进行布局的，但是这种方式早已被CSS所淘汰了
表格的列数由td最多的那行决定
表格是可以嵌套，可以在td中在放置一个表格

完善clearfix

<meta charset="UTF-8">
	<title>完善clearfix</title>
	<style type="text/css">
		.box1{
			width: 300px;
			height: 300px;
			background-color: #bfa;
		}
		.box2{
			width: 200px;
			height: 200px;
			background-color: yellow;
			/*
			子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素
			使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠
			*/
			margin-top: 100px;
		}
		.box3{
			border: 10px red solid;
		}
		.box4{
			width: 100px;
			height: 100px;
			background-color: blue;
			float: left;
		}
		/*解决父子元素的外边距重叠*/
		/*.box1:before{
			content: "";*/
			/*display:table可以将一个元素设置为表格显示*/
			/*display: table;
		}*/
		/*解决父元素高度塌陷*/
		/*.clearfix:after{
			content: "";
			display: block;
			clear: both;
		}*/

		/*
		经过修改后的clearfix是一个多功能的样式，既可以解决高度塌陷，
		又可以确保父元素和子元素的垂直外边距不会重叠
		*/
		.clearfix:before,
		.clearfix:after{
			content: "";
			display: table;
			clear: both;
		}
		.clearfix{
			zoom: 1;
		}
	</style>
</head>
<body>
	<div class="box3 clearfix">
		<div class="box4"></div>
	</div>

	<div class="box1 clearfix">
		<div class="box2"></div>
	</div>

冷暖自知···

关注

0
点赞
踩
0

收藏

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

1 表格在HTML中，使用table标签来创建一个表格在table标签中使用tr来表示表格中的一行，有几行就有几对tr在tr中需要使用td来创建一个单元格，有几个单元格就有几个tdcolspan横向的合并单元格caption表示表格的标题。thead表示表格的头部。tbody表示表格的主体。tfoot表示表格的底部。rowspan纵向合并text-align：设置文本的水平对...
复制链接

扫一扫