CSS学习--图像 & 表单 & 表格

图像 & 表单 & 表格

图像

设置图像大小

object-fit: fill | contain | cover | none | scale-down;

表单

fieldset和legend

	

		
Choose your favorite monster
		
		Kraken

		
		Sasquatch

		
		Mothman
	

注意：一般不会继承字体，需要自定义

初始化设置表单元素盒子

为了保证统一，将所有元素的内外边距均设为0是个好主意，然后在单独进行样式化控制的时候将这些加回来。

button,input,select,textarea {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
textarea {
	overflow: auto;
}

表格

	
	
A summary of the UK's most famous punk bands
	
	

		
		

			
			
Band
			
Year formed
			
No. of Albums
			
Most famous song
		
	
	
	

		

			
Buzzcocks
			
			
1976
			
9
			
Ever fallen in love (with someone you shouldn't've)
		
	
	
	

		

			
Total albums
			
77
		
	

表标题样式

caption-side: top | bottom;

表格布局

table-layout

table-layout： automatic | fixed;

border-collapse

border-collapse: separate | collapse;

注意：collapse会忽略 border-spacing 和 empty-cells 属性。

border-spacing

border-spacing: all-side;
border-spacing: h-side v-side;

empty-cells

empty-cells: hide | show(default);