WEB前端之表格设计和盒子模式

表格设计：

	

		
			
			
			
		
	
	
	
		

			
表格设计
			
注:  a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果
			
注:  a:active 必须在 a:hover 之后。
		
		

			
		

			


				

					
学生姓名
					
学生学号
					
班级名称
					
学生年龄
					
学生性别
					
操作
				
				
				

					
张一
					
1001
					
java
					
20
					
sex?男：女
					
修改
					
删除
				
				
				

					
张二
					
1002
					
android
					
21
					
sex?男：女
					
修改
					
删除
				
			
		
	
	

图：

盒子模式：

(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

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

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

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

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

	

		
			
					
			
		 
	
	
	
		
盒子模式学习
		
	
		

			
盒子模式1
			
盒子模式2
		
	

图片：