影象 & 表單 & 表格

影象

設定影象大小

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

表單

fieldset和legend

<form>
	<fieldset>
		<legend style="background-color: #000;color: #fff;padding: 3px 6px;">Choose your favorite monster</legend>
		<input style="margin: .4rem;" type="radio" id="kraken" name="monster">
		<label for="kraken">Kraken</label><br/>
		<input style="margin: .4rem;" type="radio" id="sasquatch" name="monster">
		<label for="sasquatch">Sasquatch</label><br/>
		<input style="margin: .4rem;" type="radio" id="mothman" name="monster">
		<label for="mothman">Mothman</label>
	</fieldset>
</form>
 

注意：一般不會繼承字型，需要自定義

初始化設定表單元素盒子

為了保證統一，將所有元素的內外邊距均設為0是個好主意，然後在單獨進行樣式化控制的時候將這些加回來。

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

表格

<table>
	<!--caption 表標題 -->
	<caption>A summary of the UK's most famous punk bands</caption>
	<!--thead 表頭 -->
	<thead>
		<!--tr 錶行 -->
		<tr>
			<!--th 標題單元格 -->
			<th scope="col">Band</th>
			<th scope="col">Year formed</th>
			<th scope="col">No. of Albums</th>
			<th scope="col">Most famous song</th>
		</tr>
	</thead>
	<!--tbody 表的內容 -->
	<tbody>
		<tr>
			<th scope="row">Buzzcocks</th>
			<!--td 普通單元格 -->
			<td>1976</td>
			<td>9</td>
			<td>Ever fallen in love (with someone you shouldn't've)</td>
		</tr>
	</tbody>
	<!--tfoot 表結尾 -->
	<tfoot>
		<tr>
			<th scope="row" colspan="2">Total albums</th>
			<td colspan="2">77</td>
		</tr>
	</tfoot>
</table>
 

表標題樣式

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);