表单属性补充:
下拉列表(菜单):
<select >
<option>下拉选项1</option>
<option>下拉选项2</option>
</select>
多行文本定义:(rows属性设置高度 cols设置宽度,单位是字符)
<textarea name=" " rows=" " cols=" " > </textarea>
阻止浏览器对窗口的拖动设置:{resize:none;}(css属性)
表单字段集:<fieldset></fieldset>
--相当于一个方框,可嵌套其他元素,disabled定义空间禁制可用;
字段级标题:<legend align="left/right/center/justify"></legend>
--legend元素可以在fieldset对象绘制的方框内插入一个标题;
--legend元素必须是fieldset内的第一个元素
提示信息标签:<label for="绑定的id名字"></label>
--定义标签,为页面上的其他元素指定提示信息
--要将label元素绑定到其他的控件上,可以将label元素的for属性设置为与该控件的id属性值相同
上传文件框:<input type="file"/>
高级表格应用:css属性
单元格间距:border-spacing:value(必须给table添加,不可取负值)
合并相邻单元格边框:border-collapse:separate(默认值 边框分开)/collapse(边框合并);(必须给table添加)
无内容时单元格的显示设置:empty-cells:show/hide;
单元格行和列的算法:table-layout:auto/fixed
表格标题:<caption></caption> 设置位置:caption-side:top(默认值)/right/bottom/left
表格列标题:<th></th>
数据列分组:<colgroup span="value"></colgroup>双标签 <col span="value" />单标签 (默认值为1,从左到右的顺序对表格进行分组)
样式重置:(腾讯为例)
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px "宋体","Arial Narrow",HELVETICA;background:#fff;}
a{color:#172c45;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word} .ind{text-indent:2em}
.ind10{text-indent:10px;}
.noborder{border:0;}
BFC(block formatting context):块级格式化上下文
BFC布局规则:
1、内部的Box会在垂直方向,一个接一个地放置;(块级元素的特点)
2、Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠;
3、每个元素的margin box的左边, 与包含块border box的左边相接触;(设置margin值时,盒子边框必须与父级边框相接触)
4、BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素;
5、BFC的区域不会与float box重叠;(常见的后台布局)
6、计算BFC的高度时,浮动元素也参与计算。
触发规则:overflow:hidden/auto;