前端开发教程五（总结以及补充）

CSS选择器：

1. 标签选择器

2. 类选择器 class

    可以给多个标签指定相同的class名，也可以给一个标签添加多个class名。
    目的是：可以把一些标签的相同样式放在同一个 类 中，这些标签都可以调用这个公共的类，然后再调用自己独有的类。从而节省css代码，也方便统一修改样式。

3. id选择器 唯一性

4. 伪类选择

      nth-child(n):先匹配序号，再匹配元素  first-child() last-child
      nth-of-type(n):先匹配元素，再匹配序号 first-of-type  last-of-type

      :link  :visited  :hover :active  'love hate'
      如果上面四个选择器出现两个或者两个以上时，要按照规定的顺序写代码
      :link 表示选择出未访问的链接
      :visited 表示选择出已经访问过的链接
      :hover 鼠标经过的链接
      :active  鼠标按下时候的链接
      :focus  表单元素获取焦点的时候

5.复合选择器 ：

    后代选择器： 选择器 选择器
    父子选择器： 选择器>选择器
    并集选择器： 选择器,选择器
    交集选择器： 选择器选择器

6.属性选择器 []

7.伪元素选择器 (伪元素可以当做行标签使用)

    ::before  之前 前缀
    ::after  之后 后缀

CSS 选择器优先级：

    CSS优先级：即CSS权重值，权重值大的优先级大，权重值小的优先级小。

第一等级：

    行内样式，权重值为1000；
    如 style=""

第二等级：

    ID选择器，权重值为100；
    如 #id=""

第三等级：

    calss选择器 | 伪类 | 属性 选择器，权重值10；
    如 .class | :hover | []

第四等级：

    标签选择 | 伪元素选择器，权重值1；
    如 p | ::after, ::before等等

!important权重值是无穷的，一般把!important设置的CSS属性，权重值理解成10000

    最后形成优先级顺序：
    !important > style属性 > #id > .class > element
    注意：权重是可以相加的。

CSS样式具有继承性

    判断一个元素是否具有继承性，需要测试和查看文档。

1. 有继承性的CSS属性：

    和颜色相关的属性，如：color等
    和字体相关的属性，如：font-size, font-weight等
    和文本相关的属性，如：text-align, line-height等
    和表格相关的属性，如：caption-side、border-collapse、border-spacing、       empty-cells、table-layout等
    和列表相关的属性，如：list-style-type、list-style-image、list-style-position、      list-style

    和XXX相关的，我们慢慢积累。

2. 无继承性的

    width, height，border, margin, padding等
    display显示属性等
    定位和浮动都不具有继承性。

    .....有很多CSS属性不具有继承性，我们慢慢积累。

---

文本样式：

text-开头的基本样式、单行文字溢出隐藏、多行文字溢出隐藏

字体样式：

font-开头的基本样式。

颜色设置的不同方式

：预定义颜色、十六进制表示颜色、rgb(r,g,b)、rgba(r,g,b,a) 注意：a表示透明度。

标签类型及类型转换:

    标签类型：行标签，块标签，行内块标签
    类型转换：display: inline  block  inline-block

盒模型：

    盒模型组成部分：content，padding，border，margin
    盒模型转换：box-sizing:content-box 默认值   最终盒子的大小 等于 （width/height+padding+border）
    box-sizing:border-box  最终盒子的大小 等于 最初设置的 width/height

背景图：

    大小 ：可以设置绝对值，也可以使用 contain，cover。（自己写个例子区分一下contain，cover的区别）
    平铺 ：no-repeat  repeat-x  repeat-y
    定位 : 一般应用在雪碧图（精灵图，sprites）上。
    注：精灵图技术指的是：将一些小图片（小图标）整合在一张大图上，通过背景图片定位，展示不同的小图标。使用精灵图时，需要准确测量每个小图片的大小和位置。

    背景图实际开发常见于 logo 或者 一些装饰性的小图标，或超大背景图，优点是便于控制位置。
g> 字体图标的使用：
    在线字体图标 （Font class）
    本地字体图标 （Unicode）

浮动：

浮动的特性：

1.可以实现元素水平排列

2.浮动的元素会脱离标准文档流

3.元素浮动之后，元素性质会发生改变，变为行内块标签。

清除浮动：

1.为什么要清除浮动？

        当子元素进行浮动时，会脱离标准文档流，此时父元素的高度就会变为0，影响后续内容的排版。

2.如何清除浮动？

        a. 给浮动元素的父元素加 高度（height）。
        b. 隔墙法(注意：添加块标签)
        c. 给父元素设置：overflow：hidden
        d. 给父元素添加伪元素
            .clearfix::after{
                content: '';
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            }
            .clearfix{
                *zoom: 1; /*IE6,7专有*/
            }
        e. 双伪元素
            .clearfix::before,
            .clearfix::after{
                content: '';
                display: table;
            }
            .clearfix::after{
                clear: both;
            }
            .clearfix{
                *zoom: 1;/*IE6,7专有*/
            }

元素的显示和隐藏：

1.display:

实现元素的显示和隐藏，当元素隐藏的时候，不再占据原来的位置。 none：隐藏 block：显示

2.visibility:

实现元素的显示和隐藏，当元素隐藏时，依然占据原位置。 hidden：隐藏 visible:显示

3.overflow：

显示或隐藏溢出的内容.
hidden:隐藏溢出的内容
scroll：无论是否有内容溢出，都会有滚动条
auto：只有 有内容溢出的时候，才会有滚动条。

 vertical-align 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐 

总结

以上就是本篇文章要讲的内容，本文结合上几篇文章写的一些总结和补充，css的一些东西到这里就告一段落了，我们下期再会！
注：以上内容均来自智游集团张瑞，王晨阳传授