HTML常用标签总结

复合属性:
一个属性,多个属性值.

border:
solid 实线
dashed 虚线
dotted 点线(IE6不兼容)

border : 内边距相当于给一个盒子加了填充厚度会影响盒子大小.

text-decoration 属性: underline/overline/linethrough/none;

常见样式:
结构样式: width 宽度 height 高度 background
背景 border 边框 padding 内边距 margin 外边距
文本样式: font-size:字体大小 font-family 字体
color 颜色 line-height 行高 text-align 文本对齐方式 text-indent 首行缩进 font-weight 文字着重 font-style 文字倾斜
text-decoration 文本修饰 letter-spacing
字母间距 word-spacing 单词间距

a 伪类(持续触发顺序): a:link{} a:visited{} a:hover{}
a:active{}

块和内联,内嵌,行内属性标签
内联,内嵌,行内属性标签:
1.默认同行可以跟同类型标签
2.内容撑开宽度
3.不支持宽高
4.不支持上下的margin和padding
5.代码换行被解析
块属性标签
1.默认独占一行显示
2.没有宽度时,默认撑满一排
3.支持所有css命令

浮动: 元素加了浮动,会脱离文档流,按照指定的方向移动,直到碰到父级的边界或者另外一个浮动元素才停止

标签嵌套规范:
p标签里不能包含块标签

position :relative　//相对定位

a.不影响元素本身的特性
b.不使元素脱离文档流
c. 如果没有定位偏移量,对元素本身没有任何影响
定位元素位置控制 : top/right/bottom/left 定位元素偏移量

position : absolute; // 绝对定位

a.可以使元素脱离文档流
b.使内嵌支持宽高,块属性内容撑开宽度
c.如果有定位父级相对于定位父级发生偏移,没有定位父级相对于整个文档进行偏移
d.相对定位一般都是配合绝对定位元素进行使用
定位元素,默认后者层级高于前者
定位层级:z-index:[number]

标准不透明度 : opacity:0.5;
IE私有 filter:alpha(opacity=50);

position : fixed; //固定定位
与绝对定位的特性基本一致.差别是始终相对于整个窗口进行定位;
IE6 不支持固定定位
默认相对于整个文档进行偏移
可以使内嵌支持宽高
不会随拖拽页面滚动条而发生滚动
position : static 默认值
position : inherit 继承父级定位属性的值 工作中基本不用

overflow:hidden 隐藏超出父级的部分
父级的overflow在IE6下包不住子级定位的relative
(解决办法: 给父级也加相对定位就可兼容IE6)
绝对定位元素的父级宽/高是基数的话,定位会有偏差 (IE6)

7种清浮动方法:
1.给浮动元素父级加高
2.给浮动元素父级加浮动
3.加br
4.overflow:hidden
5.给浮动元素父级加绝对定位absolute
6.给浮动元素父级加固定定位fixed
7.clear:after:content=""; display="block"
clear:both;
body 复合属性
backgeound　复合属性

表格:
(一)注意事项:
(二)border属性:
border-collapse:collapse;合并单元格

border-spacing :<length> 来定义和单元格的边框在横向和纵向上的间距 只有当border-collapse等于separate时才起作用
(三) 不设宽度时 由内容撑开宽度
(四) table基本特性:

1. 不要给table,th td以外的表格加样式
2. display:table;
3. 单元格默认平分table宽
4. th里面的内容默认加粗 并且左右上下居中显示
5. td里面的内容默认上下居中,左右居左显示
6. table决定了整个表格的宽度
7. table里面的单元格宽度会被转换成百分比.
8. 表格里面的每一列必须有宽度,否则内容撑开宽度,导致表格改变
9. 同一竖列继承最大宽度
10. 同行继承最大高度
(五) 单元格合并:
colspan 规定单元格可横跨的列数
进行合并后 要把被合并的单元格去掉

表单 :
(一): <input type="submit" value="提交OK"/> IE显示的是提交查询内容 谷歌是提交 用value来控制
<input type="radio" name=""/> 若想操作单选按钮,则必须将name设成同样的名字,否则可同时选中
<label></label> label将里面内容与表单元素关联起来 但不兼容IE6
<input type="radio" name="gender"
id="a" /><label for="a">男</label>
<input type="radio" name="gender"
id="b" /><label for="b">女</label>

checked 默认选中
disabled 禁用 针对单选按钮有效
(二) :IE6下 form与form之间有外边距
表单元素都是inline-block特性
select在标准浏览器下支持宽高,在IE下只支持宽
(三) : input (IE6下)背景随着内容增多滚动的问题
解决办法: 在input外面加div 将input样式加在div上,设置同样宽高的input

CSS:
1. 设置背景图像固定 : background-attachment : fixed;
设置背景图像随着页面滚动: background-attachment:scroll;
2. 块元素有: div,<h1>~<h6>,<p>,<ul>,<ol>,<li>
行内元素有: <strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<a>,<span>
行内元素中有: <img/>,<input/><td> 设置宽高可对齐,有些时候被称为 行内块元素

3. vertical-align属性:
vertical-align:baseline.默认,元素放在父元素基线上
vertical-align:sub 垂直对齐文本的下标
vertical-align :super 垂直对齐文本的上标
vertical-align:top把元素的顶端与行中最高元素的顶端对齐
vertical-align:text-top;把元素的顶端与父元素字体的顶端对齐
vertical-align :middle; 把此元素放置在父元素的中部

vertical-align:bottom;把元素的顶端与行中最低元素的顶端对齐
vertical-align :text-bottom;把元素的顶端与父元素字体的底端对齐
vertical-align :%;使用"line-height"属性的百分比值来排列元素,允许使用负值
vertical-align:inherit;规定应该从父元素继承 vertical-align的值

4.去掉输入框边框:
border:none;
outline: none;(同时使用)
5.表格中的td可以当div使用,里面可以嵌套元素

6. 在表单数据周围绘制一个带标题的框
<fieldset>
<legend>标题内容</legend>
</fieldset>