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

图像 & 表单 & 表格

图像

设置图像大小

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

值	描述
fill	填充元素的内容框，不保持长宽比
contain	保持长宽比，不保证填充完元素的内容框
cover	保持长宽比，填充元素的内容框，可能溢出
none	保持其原有的尺寸。
scale-down	contain和none中尺寸小的一个

表单

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;

值	描述
automatic	列宽由内容决定
fixed	列宽可由表格宽度与内容共同决定

border-collapse

border-collapse: separate | collapse;

值	描述
separatedefault，	单元格与表格之间都有间隙
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);