WEB前端之表格设计和盒子模式_前端让表格在盒子里占满显示-优快云博客

本文链接：https://blog.youkuaiyun.com/sxb956347789/article/details/53192449

本文探讨了WEB前端中的表格设计和盒子模式。盒子模型是CSS布局的基础，包括边距、边框、填充和内容四个部分。在设定元素宽度和高度时，需考虑这些因素以计算元素的总尺寸。例如，一个宽度为250px的元素，加上左右填充、边框和边距，总宽度会达到300px。理解这个模型对于精确布局至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表格设计：

<!DOCTYPE HEML>
<html>
	<div>
		<head>
			<meta charset="utf-8">
			<title>表格</title>
			<style>
				#e{text-align:center;}
				table,th,td
				{border:1px solid red;}/*加边框,表格有双边框。因为表和th/ td元素有独立的边界。显示表的单边框，用 border-collapse属性。*/
				
				th,td{text-align:center;}/*th,td文字居中 left居左  right居右*/
				
				td{padding:20px;}/*在表的内容中控制空格之间的边框,使用td和th元素的填充属性*/
				th{background-color:green;color:white;height:30px;}/*th背景、字体颜色设置;垂直对齐属性设置垂直对齐，比如顶部，底部或中间：*/
				/*table{width:50%;height:30%;}/*表格占显示屏高和宽的比例*/
				/*table{width:100px;height:80px;}/*表格占显示屏高和宽的大小值*/
				table{margin:0 auto;} /*设置表格居中*/
				
				a:link {color:bule;}      /* 未访问链接*/
				a:visited {color:#00FF00;}  /* 已访问链接 */
				a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
				a:active {color:red;}  /* 鼠标点击时 */
				
				a{text-decoration:none;}/*鼠标去链接下划线*/
			</style>
		</head>
	</div>
	
	<body>
		<div id="e">
			<h1>表格设计</h1>
			<p><b>注:</b>  a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果</p>
			<p>注:  a:active 必须在 a:hover 之后。</p>
		</div>
		<hr/>
			
		<div>
			<table>

				<tr>
					<th>学生姓名</th>
					<th>学生学号</th>
					<th>班级名称</th>
					<th>学生年龄</th>
					<th>学生性别</th>
					<th colspan="2">操作</th>
				</tr>
				
				<tr>
					<td>张一</td>
					<td>1001</td>
					<td>java</td>
					<td>20</td>
					<td>sex?男：女</td>
					<td><a href="#">修改</a></td>
					<td><a href="#">删除</a></td>
				</tr>
				
				<tr>
					<td>张二</td>
					<td>1002</td>
					<td>android</td>
					<td>21</td>
					<td>sex?男：女</td>
					<td><a href="#">修改</a></td>
					<td><a href="#">删除</a></td>
				</tr>
			</table>
		</div>
	</body>
	
</html>

图：

盒子模式：

(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

元素的宽度和高度

指定一个CSS元素的宽度和高度属性时，只是设置内容区域的宽度和高度。完全大小的元素，还必须添加填充，边框和边距。.

下面的例子中的元素的总宽度为300px：

   width:250px; 
  
 padding:10px; 
  
 border:5px solid gray; 
  
 margin:10px;

250px (宽)
+ 20px (left + 右填充)
+ 10px (left + 右边框)
+ 20px (left + 右边距)
= 300px

最终元素的总宽度计算公式：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

<!DOCTYPE HTML>
<html>
	<div>
		<head>
			<meta charset="utf-8">
					
			<style>
				*{margin:0;pidding:0} /*清除所有html元素内外边距*/
				.o{text-align:center;margin:20px}
				.p{
					margin:0 auto; /* 设置表格居中*/
					text-align:center;/*设置内容居中*/
					width:300px;  /*盒子宽度*/
					height:600px; /*盒子高度*/
					background-color:green; /*背景颜色设置*/
					border:5px dotted red; /*边框大小，实线solid(点线:dotted,虚线:dashed)，颜色*/
				  }
				.p1{
					width:200px;  /*盒子宽度*/
					height:200px; /*盒子高度*/
					background-color:gray; /*背景颜色设置*/
					border:5px solid black; /*边框大小，实线solid(点线:dotted,虚线:dashed)，颜色*/
					color:white;/*盒子内容颜色*/
					padding:20px;/*设置内边距*/
					margin-top:20px;/*设置外边距(上下bottom左left右right)*/
					margin-left:20px;/*如果是：margin:20px即是上下左右边距都为20px。margin:20px;margin:30px即上下为20，左右为30*/
					/* visibility:hidden; 占位置的隐藏元素( display:none;不占位置的隐藏元素)*/
					}
						
				.p2{
					width:200px;  /*盒子宽度*/
					height:200px; /*盒子高度*/
					background-color:yellow; /*背景颜色设置*/
					border:5px solid black; /*边框大小，实线solid(点线:dotted,虚线:dashed)，颜色*/
					color:white;/*盒子内容颜色*/
					padding:20px;/*设置内边距*/
					margin-top:20px;/*设置外边距(上下bottom左left右right)*/
					margin-left:20px;/*如果是：margin:20px即是上下左右边距都为20px。margin:20px;margin:30px即上下为20，左右为30*/
					/* visibility:hidden; 占位置的隐藏元素( display:none;不占位置的隐藏元素)*/
					}		
			</style>
		 </head>
	</div>
	
	<body>
		<p class="o">盒子模式学习</p>
		<hr/><!--水平线-->	
		<div class="p">
			<p class="p1">盒子模式1</p>
			<p class="p2">盒子模式2</p>
		</div>
	</body>
</html>

图片：