HTML+CSS部分知识点（1）

HTML

常用标签：
1.mete：含义：描述网页
    name用于描述content的内容。如：keywords，description
    content设置网页关键字或者描述
    还可用来设置重定向
2.h1-h5标签
3.img标签 alt搜索引擎通过该属性检索图片
4.iframe：内联框架（不推荐使用）
5.a标签：超链接
    target属性值也可以指定内联框架的name，则在该内联框架内打开
    href=“#”，则跳到顶部
文本标签：
1.em标签：含义：语气强调、斜体
2.strong：字体加粗
3.i 斜体
4.b 加粗
5.small 小字号
6.cite 斜体 参考内容
7.q 内联元素 引号
8.blockquote 块元素 独占一行，缩进
9.sup 上标
10.sub 下标
11.ins 插入内容 下划线
12.del 删除内容 中划线
13.pre 代码 保留代码格式
14.code 不保留代码格式，专门用来表示代码

列表标签：
1..ul 无序列表
2.ol 有序列表
3.dl 定义列表
4.dt 列表的标题
5.dd 列表内容
6.li 列表项

长表格标签
1.thead 表头
2.tbody 表中
3.tfoot 表尾

块元素和内联元素
1.块元素：div p h1-h5（p标签不能包含块元素）
2.内联元素：span，a （a标签可以包含除本身外的任何元素）

CSS
选择器的优先级：
内联样式>id选择器＞class选择器＞元素选择器＞通配选择器＞继承的样式

1元素选择器：语法：标签名｛｝ 作用：选择所有指定元素
2..id选择器 语法：#id属性值｛｝ 作用：通过id值选择唯一元素
3.class属性值｛｝ 作用：通过class属性值选择一组元素 
    一个元素如果有多个class值，通过类选择器指定其中一个属性值，就能选择元素
4.并集选择器：语法：选择器，选择器N｛｝ 作用：选中多个对应的元素
5.交集选择器 语法：选择器1，选择器2，选择器n｛｝ 作用：选中同时满足多个选择器的元素
注意：选择器之间没有空格
6通配选择器：语法：*｛｝作用：选择所有元素
7.后代元素选择器：语法：祖先元素 后代元素｛｝ 作用：选择指定元素的后代元素
8.子元素选择器：语法：父元素＞子元素｛｝ 作用：选择指定元素的子元素 注意：IE6一下不支持
9.伪类选择器：语法：选择器：伪类｛｝ 作用：选择指定状态下的指定元素 备注：
：link未访问、：visited已访问、：hover鼠标悬浮、：active 鼠标选定、
10.否定伪类：语法：元素：not 作用：从已选择元素中剔除某些元素 语法中元素可写可不写
11.属性选择器：语法：元素[属性名=“属性值”]｛｝ 作用：选择含有指定属性的元素
12.子元素的伪类： 语法：first-child、last-child、nth-child（）｛｝
               first-of-type、last-of-type、nth-of-type（n）｛｝
         第一种：在父元素的所有子元素中选择、第二种：在父元素的指定子元素中选择
13.兄弟元素选择器： 语法：前一个元素+后一个元素｛｝、前一个元素~后一个元素｛｝
            作用：+表示选择后面的一个兄弟元素（必须紧挨着）、~表示选择后面的所有兄弟元素（不紧挨着也算）

样式
单位：px 像素，% 百分比 ，em 类似百分比

颜色：颜色名,#红绿蓝，rgb（红，绿，蓝）

文本属性：text-transform 大小写  capitalize每个单词首字母大写，uppercase大写
    lowercase 小写
    text-decoration：修饰线  none 无，underline 下线 overline 上线 line-through中线
    letter-space： 字符间距
    Word-space 单词间距
    text-align 对齐 left，right，center，justify两端对齐
    text-indent 首行缩进 单位建议用em

文字属性：color： 字体颜色
    font-style 样式 italic、oblique倾斜，效果一样，一般用前者
    font-variant 小型大写  small-caps 小型大写字母
    font-weight 粗细 bold粗体， bolder 更粗，lighter更细
    font-size 字体大小 一般默认16px
    font-family 字体
    font： 用空格隔开，字体必须写最后，大小和字体必须写

行高属性：
1.行间距
行间距=行高（line-height）-字号（font-size）
2.line-height：文本默认垂直居中  大小、百分比、数值

背景属性：
语法：background-image：url（具体路径）；设置背景图
      background-repeat 设置背景图重复方式
      background-position 背景图的定位
      background-attachment 背景图与滚动条关系 scroll 默认值，背景图随着滚动条滚动 fixed固定某一位置，不随着滚动条滚动
      background：url（具体路径）color repeat position attachment；

表格属性：border-collapse  是否合并单元格
    border-spacing 设置分隔单元格边框的距离
    border 设置边框样式 1px solid black
    css设置 tr：nth-child（odd）｛｝可以实现隔行变色效果

opacity（透明度） 语法：opacity x；（x为0~1之间的数） 注意：ie8及以下不支持，在ie8及以下中使用filter：alpha（opacity=x）（x为0-100之间的数）

display和visibility：

display：inline 作为内联元素显示 ,display：block 作为块元素显示 ，inline-block 作为行内块元素显示，既能设置宽高，又不会独占一行 
display：none 隐藏元素，且不会在占页面位置 

visibility： visible 显示溢出，hidden 隐藏溢出，scroll 设置横纵滚动条 auto 自动设置滚动条

float：
none：默认值。在文档流排列 right脱离文档流，向右浮动 left脱离文档流，向左浮动 浮动元素不会盖住文字，文字会自动环绕元素周围

clear：
none：默认
right：去除右侧浮动元素的影响
left：去除左侧浮动元素影响
both：去除左右侧浮动元素影响

文档流：
1.块元素在文档流中的特点：独占一行，自上而下排列
            默认宽度为auto，即父元素的100%
            默认高度为被子元素撑开的部分

2.内联元素在文档流中的特点：只占自身大小，从左到右排列
            默认宽高均为子元素撑开的部分
            一行中无法容纳时，自动换行

3脱离文档流：块元素脱离文档流后，默认的宽高为被内容撑开的部分，即不再独占一行
        内联元素脱离文档流后，会变为块元素

4.高度塌陷：1.将父元素设置为overflow：hidden或者auto
            2.：after｛
            content“”；
            display：none；
            clear：both；
            ｝

盒子模型：

1.padding内边距：padding：上 右 下 左、padding：上 左右 下、padding：上下 左右、padding：上下左右；
2.border：语法：border：宽度 样式 颜色（无顺序要求）
3.margin外边距：盒子与盒子之间的距离
        设置上左margin，将影响自身位置；设置下右margin，将影响其他盒子位置
        若为负值，则表示反向
        若只设置magin-left或者right为auto，则为最大值，若同时设置为auto，则居中，若设置
        margin-top为auto，则默认为0

定位：
1.相对定位：相对于元素原来的位置进行定位，不会脱离文档流，不会影响元素性质（块元素还是块元素，内联元素还是内联元素），会使元素提升一个层级

2.绝对定位：相对于离他最近的开启定位的祖先元素进行定位，如果所有祖先元素都没有开启定位，则会相对于浏览器窗口进行定位，会脱离文档流，会使元素提升一个层级

3.固定定位：相对于；浏览器窗口进行定位，不会随滚动条滚动，会脱离文档流