常用的表单元素:
optgroup用于分组,可实现选择分组功能。
<select name="" id="">
<optgroup label="广州市" >
<option value="">天河</option>
<option value="">白云</option>
<option value="">荔湾</option>
</optgroup>
<optgroup label="广州市">
<option value="">番禺</option>
<option value="">南沙</option>
<option value="">市桥</option>
</optgroup>
</select>
output:放在表单内使用,值改变时发生事件
<form action="" method="get" oninput="result.value=Number(num1.value)+Number(num2.value)"><!--oninput检测输入框的值是否发生改变-->
<input type="number" name="num1"/>
<input type="number" name="num2"/>
<output for="" name="result"></output>
<input type="submit" />
</form>
度量器(两种):
<meter min="0" max="100" value="60"></meter>
<progress value="50" style="width:400px"></progress>
<!--某些标签默认在浏览器上带来多余的边距,边距有可能是内边距或外边距 清楚方法:*{padding:0;margin:0;}-->
<!--选择器的优先级取决于找到的对象,范围越广则优先级越低,范围越小则优先级越高-->
选择器的分类:
首行缩进:text-indent(em;px)
text-align:
作用一:水平居中 专门用作文本的对齐
作用二:还可以用作块级标签盒子里面的元素的对齐,对齐有: left center right;
text-decoration:文本修饰
text-decoration:none;(清除样式)
text-decoration:overline;(上划线)
css:
继承性:可继承父级宽度,高度不可继承。
层叠性:
边框圆角:border-radius:5px;
转换标签类型:display
1.inline-block(行内标签):可设置宽高且不换行。
2.block(块级标签):可设置宽高、换行。
3.inline(行级标签):不可设置宽高,不换行。
锚伪类:<a>
a:link(点击前)
a:visited(点击后)
a:hover(悬停时)*必须在link和hover之后使用
a:active(按下但未放开时)*必须在hover后使用
line-height:文本行高,从文字顶线到下一行文字顶线的距离即是行高,当标签内只有一行文字时,line-height等于标签的高度就可使文字垂直居中。
margin(外边距)
margin:0 auto;可使标签相对于父级标签居中。
margin的合并现象:当两个盒子同时存在上下外边距时,取大值
margin的塌陷现象:?
padding(内边距)
当元素继承上一级的宽度属性时,padding能改变高度,但不能改变宽度。
设置内边距或者边框会使盒子宽高变大,此时盒子宽高为240px;而外边距margin不会影响。box-sizing:border-box;(固定盒子宽高,自动计算)
box-sizing:border-box;固定盒子的大小。