html+css基础知识

Xhtml规范

    1.页面必须有文档头
    2.Img必须有alt
    3.双标签必须闭合
    4.单标签必须合理闭合
    5.标签名和标签的属性必须小写
    6.符号必须用英文符号
 （引号必须用双引号，用在行间时用单引号）

书写顺序

background:url color no-repeat position;
font:weight style size family;

省略号 (必须给宽度)

white-space:nowrap;   强制不换行
overflow:hidden;     溢出隐藏
text-overflow:ellipsis;   省略号

块标签 div h1-h6 p ul ol dl li dt dd

1.支持宽高
2.独占一行
3.不受换行和空格的影响
4.宽度参照父级
5.支持四个方向的padding和margin
6.块元素能嵌套所有标签
7.特殊的：P标签只能嵌套行内

行内标签span a em i b strong

1.不支持宽高
2.受换行和空格的影响
3.合并到一行
4.宽高根据内容撑开
5.不支持上下的margin和padding
6.行内只能嵌套行内 不能嵌套自己
7.特殊的：a 能嵌套所有标签 都可以嵌套img

行内块img input

 1.支持宽高
 2.受换行和空格的影响
 3.合并到一行

嵌套规则

1.块元素能包含所有元素     
2.P不能包块，只能包行内     
3.行内元素不能包块元素      
4.行内元素可以包行内元素，但是不能包自己     
5.a标签可以包任何元素但是不能包自己       
6.任何标签都可以包img      
7.行内元素即使转化成块，也不能包块元素

标签伪类顺序

link visited hover active  顺序  l v h a

关于继承

1.所有和文字相关的样式都能继承 
2.a标签不能继承颜色       
3.b strong h1-h6 不能继承加粗      
4.i em 不能继承斜体

内边距/内补白/内补丁

1.块元素支持4个方向上的padding       
2.行内元素支持左右方向的padding，不支持上下       
3.父级最好给宽，子级不用给   
4.给padding的时候要减去相应的值

外边距/外补白/外补丁

margin 发生合并时，取最大值；
margin给上边距的时候发生拖拽      
1.加border   
2.加overflow:hidden;     
3.换做给父级加padding （推荐）

优先级/权重

行内样式>id>class>标签>*

盒子模型

width height padding border

浮动 float的特性

1.浮动有方向left right none
2.合并到一行
3.脱离文档流
4.父级宽度不够会掉下来
5.浮动后宽度尽可能的窄，窄到内容的宽度
6.行内元素给浮动后变成了块元素
7.文本环绕
8.尽可能的往上飘
9.同级元素都要给浮动
10.给浮动之后要清浮动
11.尽量给宽度

清浮动的3种方法

1.父级加：overflow:hidden;
2.同级加：clear:both
3.父级加：clearFix:after{ content:'';display:block;clear:both}
         clearFix{ zoom:1;}

定位position

relative 相对定位
1.不能改变元素的本质
2.不脱离文档流
3.根据自己定位

 absolute 绝对定位         
1.宽度尽可能的窄，窄到内容的宽度           
2.可以把行内元素变成块元素           
3.父级没有相对定位时，会一直往上找直到body
     ```

fixed 固定定位
1.根据可视区定位
2.行内元素转化为块
3.脱离文档流
4.块元素会变窄

层级 z-index       

1.最大值2的32次方，值越大层级越高
2.子级永远在父级的上面
3.只有在有定位的时候才好用

透明处理

opacity：0-1
filter:alpha(opacity:0-100)

雪碧图/精灵图

大小不宜超过50k
可以减少请求，不利于维护
必须给负值

 表格

表头
表身
表尾

th,td{ border:1px solid #000; }
table{ border-collapse:collapse;}合并单元格
colspan 列合并
rowspan 行合并
align="center" 水平方向
left center right
valign="middle" 垂直方向
top middle bottom