本文共 3293 字，大约阅读时间需要 10 分钟。

1.web标准

2.HTML基本标签

2.1基本标签

单标签：
	
   
				
   	
         1

2.2表格

   
      1   2   3   4   5   6   7   8

表格横向合并： <td colspan="横向合并行数"></td>

表格竖向合并：<td rowspan="竖向合并行数"></td>

表格有部分属性我们不常用，这里重点记住cellspacing.cellpadding。

表格标题caption

语法：

   
	    
     我是表格标题
    
   
      1   2   3

注意:

1.caption元素定义表格标题，通常这个标题会被居中且显示于表格之上。

2.caption标签必须紧随table标签之后。 3.这个标签只存在表格里面才有意义。

2.3表单

表单提交

   
      1

input type类型

   
        
            
            
    男        
            
            
            
    我是文本域        
            
            
                            2            
   
      1   2   3   4   5   6   7   8   9   10   11   12   13   14   15

2.4标签分类和特性

3.选择器

3.1 常用选择器种类

id选择器、类选择器、后代选择器、子集选择器、标签选择器、并集选择器

3.2选择器权重和优先级(重点)

!important        ∞无穷大

内联样式 1000

id选择器优先级 100

类选择器优先级 10

标签选择器优先级 1

通配符优先级 0

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

即：!important > 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符

4.CSS属性

4.1文字属性

4.2背景

4.3边框

soild是实线 dashed是虚线

5.盒模型

一个盒子由content+padding+border+margin组成

margin同理      1

6.浮动

浮动的方式：

float: left; 左浮动            float: right;右浮动            float: none; 元素不浮动（默认值）      1   2   3

为什么要浮动？怎么清除浮动？（重点）

页面布局的时候子元素不浮动的时候会撑起父盒子的高度；

浮动后父盒子的高度为0，会对后面的页面布局造成影响，所以需要清除浮动。

清除浮动的几种方式（重点）

(1)额外标签法

是w3C推荐的做法是通过在浮动元素末尾添加一个空的标签 例如<div style="clear:both"></div>

优点:通俗易懂，书写方便

缺点:添加许多无意义的标签，结构化较差。

(2)overflow:hidden

可以给父级添加:overflow为hidden/ auto/ scro11

优点:代码简洁

缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

(3))使用after伪元素清除浮动

使用方法:.clearfix:after {   		content: ""; 		display: block; 		height: 0; 		clear: both;		visibility: hidden; }.clearfix {   		*zoom: 1;}/*IE6、7专有*/      1   2   3   4   5   6   7   8   9   10   11

7.定位

定位模式有三种：绝对定位 相对定位 固定定位

重中之重：

相对定位：相对于自身位置

绝对定位：相对于有定位的最近的父元素定位

固定定位：相对于浏览器进行定位

z-index:999;表示层叠顺序或者层级

8.display属性值

9.伪类

简记：lvha

10.注释

html注释 <!-- -->

css中注释 /* */ js中的注释 //

11.文本下划线

12.CSS3属性

旋转 div 元素：

transform:rotate(30deg);      1

缩放div元素：

transform: scale(0.98);      1

div元素阴影：

box-shadow:6px 6px 6px 6px #969494;      1

边框圆角：

box-radius:50%；      1

13.浏览器内核

因为浏览器太多啦，但是现在主要流行的就是下面几个:

转载地址：http://sfsm.baihongyu.com/