S跟着李南江学习HTML5—CSS学习

<h2>CSS学习感想</h2>
　　如果说HTML让我学得热血澎湃，那么CSS可以说让我疯狂着迷，江哥有句话是我一直铭记在心的，就是<strong>html只修改语义，CSS只修改样式</strong>。CSS就是用来美化网页的，CSS的学习一共分为两大部分，一个是CSS的属性，另一个是CSS选择器。江哥先带着我们从CSS初体验，让我们感受到CSS的魅力，渗透了解各种选择器，再到学习的中转点——CSS三大特性，在CSS往后的学习中都要时刻贯彻这三大特性，接着是div和span两大块，CSS元素显示模式转换，CSS精灵图，以及浮动定位，让整个CSS的思路更新清晰，可以清楚的知道自己每一步要做什么，该用到哪些模块的知识。
　　做前端开发，需要我们有很强的<strong>大局意识</strong>，不要想到什么就把代码敲进去，在做一个项目时要先结合HTML、CSS以及后面将会学到的JS、JQ等等，来做一个简单的大局构思，从外到里，层层递进地去写，每一步代码都关系到最后成型网页的流畅度、后期优化难度、可阅读性等等。江哥教给我们的不仅是专业知识和热情，还有思维方式，最重要的是<strong>走心的努力</strong>！
　　学习CSS的过程非常的专心和开心，谢谢江哥如此走心、专业、认真的教学视频。

<strong>学HTML5就选李南江，选培训机构我只选小码哥（www.520it.com）</strong>

学习笔记

• CSS固定格式

• 格式：

<style type="text/css">
    标签名称{
        属性名称:属性对应的值;
        ...
    }
</style>

• 注意点：
  • style标签必须写在head标签的开始标签和结束标签之间（也就是必须和title标签是兄弟关系）
  • style标签的type属性其实可以不用写，默认就是type=”text/css”
  • 设置样式时必须按照固定的格式来设置：

key: value;

其中冒号:不能省略，分号;大多数情况下也不能省略，只有是最后一个属性才能省略，但是推荐都不要省略

• 文字相关属性 （掌握）
  主要学习两大块：
  Css中的选择器：｛｝前面的东西
  Css中的属性：大括号｛｝里面的东西

• 规定文字样式的属性

  • 格式：

font-style:italic;

• 取值：

     normal：正常的，默认就是正常的
     italic：倾斜的

• 快捷键：

     fs+tab   就是font-style:italic;
     fsn+tab  就是font-style:normal;

• 规定文字粗细的属性
• 格式：

font-weight: bold;

• 单词取值：

lighter：细线，默认就是细线
bold：加粗
bolder：比加粗还要粗，但文字有极限，有时看不出

• 快捷键：

    fw+tab   font-weight: ;
    fwl+tab   font-weight:lighter;
    fwb+tab  font-weight:bold;
     fwbr+tab   font-weight:bolder;

• 数字取值：

100~900的整百取值

• 规定文字大小的属性
  • 格式：

font-size:30px;
单位：px（pixel）

• 注意点：通过font-size设置大小一定要带单位，也就是一定要写px
• 快捷键：

fz+tab   font-size: ;
fz30+tab   font-size:30px;

• 规定文字字体的属性
  • 格式：

font-family:"宋体";

• 注意点：
  1. 如果取值是中文，需要用双引号（” ”）或者单引号（’ ’）括起来
  2. 设置的字体必须是用户电脑里面已经安装好的字体
• 快捷键：

    ff+tab   font-famliy: ;

• 字体属性补充
  • 如果设置的字体不存在，那么系统会使用默认的字体来显示宋体
  • 吐过设置的字体不存在，而我们又不想用默认的字体来显示怎么办？
    可以给字体设置备选方案：

font-family:"字体1","备选方案1";

• 如果想给中文和英文分别单独设置字体，怎么办？（英文字体写前面，中文字体写后面）
  但凡是中文字体，里面都包含了英文；
  但凡是英文字体，里面都不包含中文；
  也就是说中文字体可以处理英文，而英文字体不能处理中文；

font-family:"Times New Roman","微软雅黑";

• 注意点：

如果想给界面中的英文单独设置字体，那么英文的字体必须写在中文的前面

补充1：

在企业开发中最常见的字体有以下几个
中文：宋体/黑体/微软雅黑
英文：Times New Roman / Arial

补充2：

并不是名称是英文就一定是英文字体，因为中文字体其实都有自己的英文名称，所以是不是中文字体主要看能不能处理中文！
宋体：SimSun
黑体：SimHei
微软雅黑：Microsoft  YaHei

• 文字属性的简写
  • CSS的注释：

/*
被注释掉的东西
*/

和html的一样

<!—被注释掉的东西-->

• 缩写形式：

font:style weight size family;
例如：
font:italic bold 30px "宋体";

• 注意点：

• 在这一种缩写格式中有的属性可以省略，style、weight可以省略

• 在这一种缩写格式中style和weight可以交换位置

• 在这一种缩写格式中有的属性不可以省略，size和family不可以省略

• 在这一种缩写格式中size和family不可以随便乱放的，size必须写在family前面，而且size和family必须写在所有属性的最后。

• 文本属性

  • 文本装饰的属性
  • 格式：

text-decoration: underline;

• 取值：

underline：下划线
line-through：删除线
overline：上划线
none：什么都没有，最常见的用途就是用于去掉超链接的下划线

• 快捷键：

td+tab：text-decoration: none;
tdu+tab: text-decoration: underline;
tdl+tab: text-decoration: line-through;
tdo+tab: text-decoration: overline;

• 文本水平对齐的属性
• 格式：

text-align: right;

• 取值：

left：左
right：右
center：中 

• 快捷键：

ta: text-align: left;
tar: text-align: right;
tac: text-align: center;  

• 文本缩进的属性
• 格式：

text-indent: 2em;

• 取值：

   2em， 其中em是单位，一个em代表缩进一个文字的宽度

• 快捷键：

ti+tab：text-indent: ;
ti2e+tab：text-indent: 2em;

• **颜色控制属性(理解) **
  在CSS中如何通过color属性来修改文字颜色
  • 格式：

color:red;

• 取值：
• 英文单词：一般情况下常见的颜色都有对应的英文单词，但是英文单词能够表达的颜色是有限制的，也就是说不是所有的颜色都能通过英文单词来表达
• rgb：其实就是三原色，其中r（red红色）、g（green绿色）、b（blue蓝色）
  • 格式：

color:rgb(0,0,0);

格式中第1个数字就是用来设置三原色的光源元件红色显示的亮度
第2个数字就是用来设置三原色的光源元件绿色显示的亮度
第3个数字就是用来设置三原色的光源元件蓝色显示的亮度
其中每个数字的取值范围是0~255之间，0代表不发光，255代表发光，值越大就越亮。

红色：rgb(255,0,0);
绿色：rgb(0,255,0);
蓝色：rgb(0,0,255);
黑色：rgb(0,0,0);
白色：rgb(255,255,255);

在前端开发中其实并不常用灰色，只要让红、绿、蓝的值一样就是灰色，且如果这三个值越小就越偏黑色，越大就越偏白色

• rgba（到CSS3才推出来的）
  rgba中rgb和前面讲解的一样，a代表透明度，取值是0~1，取值越小就越透明。
  • 格式：

color:rgba(0,0,0,0.2);

• 1.4十六进制
  本质就是rgb，十六进制中是通过没两位表示一个颜色，
  例如：

#FFEE00  FF代表r 、EE代表g 、00代表b

什么是十六进制？

和十进制一样都是一种计数方式。
在十进制中取值范围0~9，逢十进一
在十六进制中取值范围0~F，逢十六进一
十六进制转化为十进制的公式：
十六进制第一位*16 +十六进制第二位 = 十进制

* 1.5十六进制缩写

在CSS中只要十六进制的颜色每两位的值都是一样 的，那么就可以简写一位
例如：

 #FFEE00 ==  #FE0

* 注意点：

如果当前颜色对应的两位数不一样，那么就不能简写
如果两位相同的数字不是属于同一个颜色，也不能简写

• 标签选择器
  【{}前面就是选择器】
  • 什么是标签选择器？
  • 作用：
    根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性
  • 格式：

标签名称{
               属性:值;
}

• 注意点：

1、标签选择器选中的是当前界面中所有的标签，而不能单独选中某一个标签
2、标签选择器无论标签藏的多深都能被选中
3、只要是HTML中的标签就可以作为标签选择器（h/a/h1/p/ul/input……）

• id选择器
  什么是id选择器？
  • 作用：根据指定的id名称找到对应的标签，然后设置属性
  • 格式：

     #标签名称{
                属性: 值;
        }

• 注意点：
• 每个html标签都有一个属性叫做id，也就是每个标签都可以设置id
• 在同一个界面中id的名称是不可以重复的
• 在编写id选择器时一定要在id名称前面加上#
• id的名称是有一定的规范的

1、id的名称只能由字母、数字、下划线：a~z、0~z、_
2、id名称不能以数字开头
3、id名称不能是html标签的名称

在企业开发中一般情况下如果仅仅是为了设置样式，我们不会使用id，因为在前端开发中id是留给JS使用的

• 类选择器
  什么是类选择器？
  • 作用：根据指定类名称找到对应的标签，然后设置属性
  • 格式：

    .类名{
           属性: 值;
       }

• 注意点：
• 每个html标签都有一个属性叫做class，也就是每个标签都可以设置类名
• 在同一个界面中class的名称是可以重复的
• 在编写类选择器时一定要 在class名称前面加上英文句号（.）
• 类名的命名规范和id名称的命名规范一样
• 类名就是专门用来给某个特定的标签设置样式的（CSS）
• 在html中每个标签可以同时绑定多个类名
  格式：

           <标签名称 class="类名1  类名2 …">

• id选择器和class选择器
  • id和class的区别？

id相当于人的身份证不可重复
class相当于人的名称可以重复

一个html标签只能绑定一个id名称
一个html标签可以绑定多个class名称

• id选择器和class选择器区别？

    id选择器是以#开头
    class选择器是以.开头

• 在企业开发中到底用id选择器还是用class选择器？
  id一般情况下是给js使用的，所以除非特殊情况，否则不要使用id去设置样式

• 对类的使用能看出这个开发人员的技术水平
  一般情况下在企业开发中要注重余代码的抽取，可以讲一些公共的代码抽取到一个类选择器中，然后让标签和这个类选择器绑定即可

• 后代选择器
  什么是后代选择器？

  • 作用：找到指定标签的指定 所有后代标签，设置属性
  • 格式：

 标签名称1  标签名称2{
                       属性:值;
                      }

• 含义：先找到名叫标签名称1的标签，再在这个标签下面去查找所有叫标签名称2的标签，然后再设置属性
• 注意点：

  1.后代选择器必须用空格隔开
  2.只要最终是放到指定标签中的都是后代
  3.后代选择器不仅可以使用标签名称，还可以使用其他选择器

• 补充：后代选择器可以可以无限延伸，比如

标签名称1 标签名称2 标签名称3{}

         <head>
    <meta charset="UTF-8">
    <title>12后代选择器</title>
    <style>
        div ul li p{
            color:red;
        }
    </style>
</head>
<body>
<p>我是文字</p>
<div>
    <ul>
        <li>
            <p>我是文字</p>
            <p>我是文字</p>
        </li>
    </ul>
    <p>我是文字</p>
    <p>我是文字</p>
</div>
<p>我是文字</p>
</body>

后代选择器的延伸

• 子元素选择器
  什么是子元素选择器？
  • 作用：找到指定标签中所有特定的直接子元素，然后设置属性
  • 格式：

标签名称1>标签名称2{
                     color: red;
                     }

• 含义：先找到名叫“标签名称1”的标签，然后再这个标签中查找所有直接子元素名叫做“标签名称2”的元素
• 注意点：

1. 子元素选择器只会查找儿子，不会查找其他被嵌套的标签
2. 子元素选择器之间需要用大于号>链连接，并且不能有空格
3. 子元素选择器不仅可以使用标签名称，还可以使用其他选择器
4. 子元素选择器可以通过大于号一直延续下去

• 后代选择器和子元素选择器

• 后代选择器和子元素选择器之间的区别？

  • 后代选择器使用空格作为连接符号
    子元素选择器使用>作为连接符号
  • 后代选择器会选定指定标签中所有特定后代标签，也就是会选中儿子/孙子…只要是被放到指定标签中的特定标签都会被选中
    子元素选择器指挥选中指定标签中，所有特定的直接标签，也就是只会选中特定的儿子标签

• 后代选择器和子元素选择器之间的共同点？

• 后代选择器和子元素选择器都可以使用标签名称/id名称/class名称 来作为选择器

• 后代选择起和子元素选择器都可以通过各自的链接符号一直延续下去

• 在企业开发中如何选择？

   如果想选中指定标签中的所有特定的标签，用后代选择器
   如果想选中指定标签中的所有特定儿子标签，用子元素选择器

• 交集选择器（仅了解）
  什么是交集选择器？
• 作用：给所有选择器选中的标签中，相交的哪部分标签设置属性
• 格式：

标签名称1标签名称2{
                      属性: 值;
            }

• 注意点：

  1. 选择器和选择器之间没有任何的连接符号
  2. 选择器可以使用 标签名称/id名称/class名称
  3. 交集选择器仅作了解，因为企业开发中用得很少

• 并集选择器
  什么是并集选择器？

• 作用：给所有选择器选中的标签设置属性

• 格式：

标签名称1,标签名称2{
                      属性: 值;
            }

• 注意点：

  1. 并集选择器必须使用逗号，来连接
  2. 选择器可以使用 标签名称/id名称/class名称

• 兄弟选择器
  什么是兄弟选择器？
  只能选中同级的标签

• 相邻兄弟选择器CSS2

  • 作用：给指定选择器后面紧跟的那个选择器选中的标签设置属性
  • 格式：

标签名称1+标签名称2{
                         属性: 值;
            }

• 注意点：

  1. 相邻兄弟选择器必须通过加号+连接
  2. 相邻兄弟选择器只能选中紧跟在其后的那个标签，不能选中被隔开的标签

• 通用兄弟选择器CSS3

  • 作用：给指定选择器后面的所有选择器选中的所有标签设置属性
  • 格式：

标签名称1~标签名称2{
                         属性: 值;
            }

• 注意点：

  1. 通用兄弟选择器必须用波浪线~连接
  2. 通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签，无论有没有被隔开都可以被选中

• 序选择器（又名“个数选择器”）
  CSS3中新增的选择器最具代表性的就是序选择器（10个）

• 同级别的第几个

标签名称:first-child{
                   color: green;
                  }

• 含义：选中同级别中的第一个标签
• 注意点：不区分标签类型

last-child：选中同级别中的最后一个标签
nth-child(n)：选中同级别中的第n个标签
nth-last-child(n)：选中同级别中倒数第n个标签
only-child：选中父元素中唯一的标签

• 同类型的第几个

标签名称:first-of-type{
                       color: red;
                      }

• 含义：选中同级别中同类型的第一个标签

last-of-type：选中同级别中同类型的最后一个标签
nth-of-type(n)：选中同级别中同类型的第n个标签
nth-last-of-type(n)：选中同级别中同类型的倒数第n个标签
only-of-type：选中父元素中唯一类型的某个标签

• 补充：

nth-child(odd)：选中同级别中的所有奇数标签
nth-child(even)：选中同级别中的所有偶数标签
nth-of-type(odd)：选中同级别中同类型的奇数标签
nth-of-type(even)：选中同级别中同类型的偶数标签
nth-child(xn+y)：x和y是用户自定义的，n是一个计数器，从 0开始递增

• 属性选择器
  什么是属性选择器？
• 作用：根据指定的属性名称找到对应的标签，然后设置属性
• 格式：

p[id]{
          color: red;
       }

[attribute]：根据指定的属性名称找到对应的标签，然后设置属性
[attribute=value]：找到有指定属性，并且属性的取值等于value的标签，然后设置属性。
最常见的应用场景，就是用于区分input属性

例如：

p[type=password]{
                color: red;
               }

• 下面几个CSS2的只用了解
• 属性的取值是以什么开头的？

   [attribute|=value]：CSS2
   [attribute^=value]：CSS3
   区别：
CSS2中的只能找到value开头，并且value是被横杠-和其他内容隔开的
CSS3中的只要是以value开头的都可以找到，无论有没有被横杠-隔开

• 属性的取值是以什么结尾的？

   [attribute$=value]：CSS3

• 属性的取值是否包含某个特定的取值？

   [attribute~=value]：CSS2
   [attribute*=value]：CSS3
区别：
CSS2中的只能找到独立的单词，也就是包含value，并且value是被空格隔开的
CSS3中只要包含value的都可以

• 通配符选择器
  什么是通配符选择器？
• 作用：给当前界面上所有的标签设置属性
• 格式：

   *{
       color: red;
      }

注意点：
由于通配符选择器是设置界面上所有标签的属性，所以在设置之前会遍历所有的标签，如果当前界面上的标签比较多，那么性能就会比较差，所以在企业开发中一般不会使用通配符选择器

• CSS三大特性の继承性（inherit继承）
  什么是继承性？
• 作用：给父元素设置一些属性，子元素也可以使用。
• 注意点：
  • 并不是所有的属性都可以继承，只有以color/font-/text/line开头的属性才可以继承
  • 在CSS的继承中不仅仅是儿子可以继承，只要是后代都可以继承
  • CSS继承性中的特殊性

 a标签的文字颜色和下划线是不能继承的
h标签的文字大小是不能继承的

• 应用场景：
  一般用于设置网页上的一些共性信息，例如网页的文字颜色、字体、文字大小等内容 body{}

• CSS三大特性の层叠性（覆盖）
  什么是层叠性？

• 作用：就是CSS处理冲突的一种能力

• 注意点：

  • 层叠性只有在多个选择器选中“同一个标签”然后又设置了“相同的属性”，才会发生层叠性
  • CSS全程Cascading StyleSheet 层叠式样式表

类选择器 会覆盖 标签选择器

• CSS三大特性の优先级
  什么是优先级？
• 作用：
  当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠就由优先级来确定。
• 优先级判断的三种方式
  • 间接选中就是继承

如果是间接选中，那么就是谁离目标标签比较近就听谁的

• 相同选择器（直接选中）

如果都是直接选中，并且都是同类型的选择器，那么就是谁写在后面就听谁的

• 不同选择器（直接选中）

  如果都是直接选中，并且不是相同类型的选择器，那么就会按照选择器的优先级来层叠

• 选择器优先级别：

id>类>标签>通配符>继承>浏览器默认

• 优先级之important
  什么是important？
• 作用：用于提升某个直接选中标签的选择器中的某个属性的优先级的，可以将被指定的属性的优先级提升为最高
• 注意点：
  1. important只能用于直接选中，不能用于间接选中
  2. 通配符选择器选中的标签也是直接选中的
  3. !important只能提升被指定的属性的优先级，其他的属性的优先级不会被提升
  4. !important必须写在属性值的分号前面
  5. !important前面的感叹号不能省略

.bb{
          color: blue;;
          }
        p{
          color: red !important;
          }

• 优先级之权重问题
  什么是优先级的权重？

• 作用：当多个选择器混合在一起使用时。我们可以通过计算权重来判断谁的优先级高低

• 权重的计算规则（通配符权重为零）

  • 首先 先计算选择器中有都少个是id的，id多的选择器优先级最高
  • 如果id的个数一样，那么再看类名的个数，类名个数多的优先级最高
  • 如果类名个数一样，那么再看标签名称的个数，标签名称个数多的优先级最高
  • 如果id个数一样、类名个数一样、标签名称个数一样，那么就不回继续往下计算其他选择器了，此时谁写在后面听谁的，也就是说优先级如果一样，那么谁写在后面听谁的

• 注意点：

 只有选择器是直接选中标签的才需要计算权重

• div和span标签
• 什么是div？
  • 作用：一般用于配合CSS完成网页的基本布局
• 设么是span？
  • 作用：一般用于配合CSS修改网页中的一些局部信息
• div和span的区别
  • div会单独占领一行，而span不会单独占领一行
  • div是一个容器级别的标签，而span是一个本文级别的标签
• 容器级的标签和文本级别的标签的区别？

   容器级别的标签中可以嵌套其他所有的标签
   文本级别的标签中只能嵌套文字、超链接、图片

• 容器级的标签：

div h ul ol dl li …

• 文本级的标签：

   span p buis strong em ins del 

• 注意点：

哪些标签是本文级的，哪些标签是容器级的不用刻意去记
在企业开发中一般情况下要嵌套都是嵌套在div中，或者按照组标签来嵌套

• CSS元素显示模式
  在HTML中html将所有标签分成两类，分别是容器级和文本级
  在CSS中CSS也将所有标签分成两类：
• 什么是块级元素，什么是行内元素？

   块级元素会独占一行
   行内元素不会独占一行

• 块级元素：

p  div  h  ul  ol  dl  li …

• 行内元素：

   span  buis   strong  em  ins  del 

• 块级元素和行内元素的区别？
  • 块级元素

1、独占一行
2、如果没有设置宽度那么默认和父元素一样宽
3、如果设置的宽高，那么就按照设置的来

• 行内元素

1、不会独占一行
2、如果没有设置宽度，那么默认和内容一样宽
3、行内元素是不可以设置宽度和高度的

• 行内块级元素

为了能够让元素既能够不独占一行，又可以设置宽度和高度，那么就出现了行内块级元素

• CSS元素显示模式转换
• 如何转换CSS元素的显示模式？

   设置元素的display属性

• display取值：

   block 块级
   inline 行内
   inline-block 行内块级

• 快捷键：

   di+tab    display:inline;
   db+tab   display:block;
   dib+tab   display:inline-block;

• 背景颜色
  如何设置标签的背景颜色？

在CSS中有一个background-color:;属性，就是专门用来设置标签的背景颜色的

• 取值：
  • 具体单词
  • rgb
  • rgba
  • 十六进制

快捷键：bc+tab

• 背景图片
  如何设置背景图片？

在CSS中有一个叫做background-image: url();属性,就是转么用于设置背景图片 

• 注意点：
  • 图片的地址必须放在:url()中，图片的地址可以是本地的地址，也可以是网络地址
  • 如果图片的大小没有标签的大小 大，那么会自动在水平和垂直方向平铺和填充
  • 如果网页上出现了图片，那么浏览器会再次发送请求获取图片

快捷键：bi+tab

• 背景平铺属性
• 如何控制背景图片的平铺方式？

   在CSS中有一个background-repeat属性，就是专门用于控制背景图片的平铺方式的

• 取值：

repeat：  默认，在水平和垂直都需要平铺
no-repeat：在水平和垂直都不需要平铺
repeat-x： 只在水平方向平铺
repeat-y： 只在垂直方向平铺

• 快捷键：

 bgr+tab

• 应用场景：
  可以通过背景图片的平铺来降低图片的大小，提升网页的访问速度

• 背景定位

• 如何控制背景图片的位置？

CSS中有一个叫做background-position: 0 0;属性，就是专门用于控制背景图片的位置

• 格式：

background-position: 水平方向 垂直方向;

• 取值
  • 具体的方位名词

   水平方向：left  center  right
   垂直方向：top  center  bottom

• 具体的像素（一定要写单位）

   例如：100px 

• 注意点：

1、一定要写单位px
2、x越往右越大，y越往下越大
3、可以接受负数

• 注意点：
  同一个标签可以同时设置背景颜色和背景图片，如果颜色和图片同时存在，那么图片会覆盖颜色
• 快捷键：

bp+tab

• 应用场景：
  例如英雄联盟主页的图片，永远居中

• 背景关联和缩写

• 背景属性缩写的格式：

background:背景颜色 背景图片 平铺方式 关联方式 定位方式;

• 快捷键：

bg+tab

• 注意点：

background属性中，任何一个属性都可以被省略

• 什么是关联方式？
  默认情况下背景图片会随着滚动条的滚动而滚动，如果不想这样，那么我们就可以修改背景图片和滚动条的关联方式

• 如何修改修改背景关联方式？
  在CSS中有一个叫做background-attachment:;的属性，这个属性就是专门修改关联方式的

  • 格式：

background-attachment:scroll;

• 取值：

 scroll  默认值，会随着滚动条的滚动而滚动
 fixed   不会随着滚动条的滚动而滚动

• 快捷键：

ba+tab

注意点：
仅做了解，企业开发中用得不多

• 背景图片和插入图片的区别
• 小技巧：

div.box$*n    
就会生成n个div，且box从1到n

• 背景图片和插入图片的区别？
  • 背景图片仅仅是一个装饰，不会占用位置插入图片会占用位置
  • 背景图片有定位属性，所以可以很方便地控制图片的位置插入图片没有定位属性，所以控制图片的位置不太方便
  • 插入图片的语义比背景图片的语义要强，所以在企业开发中如果你的图片想被搜索引擎收录，那么推荐使用插入图片

• CSS精灵图
• 什么是CSS精灵图？
  CSS精灵图是一种图像合成技术
• CSS精灵图作用：
  可以减少请求的次数，以及可以降低服务器处理压力
• 如何使用CSS精灵图
  CSS精灵图需要配合背景图片和北京定位来使用

div class="box1"></div>
<style>
div{
    width: 86px;
    height: 28px;
    background-image: url(images/weibo.png);
    background-position: -425px -200px;
}
</style>

精灵图1 精灵图2

• 边框属性上
• 什么是边框？
  边框就是环绕在标签宽度和高度周围的线条
• 边框属性的格式：
  • 连写1（同时设置四条边的边框）

border: 边框宽度 边框样式 边框颜色;
例如：
border: 1px solid #000;

 * 快捷键：

      bd + tab

 * 边框样式的取值非要记住的只有两个：

dashed（虚线）
solid（实线）

 * 注意点：

1.连写格式中颜色属性可以省略，省略之后默认是黑色
2.连写格式中样式不可省略，省略之后就看不到边框了
3.连写格式中宽度可以省略，省略之后可以看到边框

• 连写2（分别设置四条边的边框）

border-top: 边框宽度 边框样式 边框颜色;
border-right: 边框宽度 边框样式 边框颜色;
border-bottom: 边框宽度 边框样式 边框颜色;
border-left: 边框宽度 边框样式 边框颜色;

 * 快捷键：

bt+
br+
bb+
bl+

• 连写3（分别设置四条边的边框）

border-width:上 右 下 左;  
border-style:上 右 下 左;
border-color:上 右 下 左;

 * 注意点：
   * 这三个属性的取值是按照顺时针来赋值，也就是按照上右下左来赋值，而不是按照日常中的上下左右
   * 这三个属性的取值省略时的规律：

1、上右下左>上右下>左边的取值和 右边一样
2、上右下左>上右>左边的取值和右边一样，下边的取值和上边一样
3、上右下左>上>右下左取值和上边一样

 * 非连写（企业开发中几乎不用）

例如：
border-top-width:;
border-top-style:;
border-top-color: #000;

• 内边距属性
• 什么是内边距？
  边框和内容之间的距离。
• 格式
  • 非连写

padding-top:像素;
padding-right:像素;
padding-bottom:像素;
padding-left:像素;

• 连写

      padding:上 右 下 左;

这三个属性的取值省略时的规律

1、上右下左>上右下>左边的取值和 右边一样
2、上右下左>上右>左边的取值和右边一样，下边的取值和上边一样
3、上右下左>上>右下左取值和上边一样

• 注意点：
  1. 给标签设置内边距之后，标签占有的宽度和高度会发生变化
  2. 内边框也有背景颜色

• 外边距属性
• 什么是外边距？
  标签和标签之间的距离。
• 格式：
  • 非连写

margin-top:;
margin-top:;
margin-top:;
margin-top:;

• 连写

margin-top:上 右 下 左;

这三个属性的取值省略时的规律

1、上右下左>上右下>左边的取值和 右边一样
2、上右下左>上右>左边的取值和右边一样，下边的取值和上边一样
3、上右下左>上>右下左取值和上边一样

• 注意点：
  外边距的那一部分是<strong>没有背景颜色</strong>

• 外边距合并（塌陷）现象

• 什么是外边距合并现象？
  在默认布局的垂直方向上，默认情况下相邻外边距是不会叠加的，谁比较大就听谁的在水平方向会合并。

• CSS盒子模型

• 什么是CSS盒子模型？
  仅仅是一个形象的比喻，HTML中所有的标签都是盒子模型

• 结论：
  1.在HTML中所有的标签都可以设置：

宽度/高度：指定可以存放内容的区域
边框：
内边距：
外边距：

• 盒子宽度和高度
• 内容的宽度和高度

   就是通过标签的width/height属性设置的宽度和高度

• 元素的宽度和高度

   宽度=左边框+左内边距+width+右内边距+右边框
   高度=同理可证

• 元素空间的宽度和高度

   宽度=左外边距+元素宽度+右外边距
   高度=同理可证

• 盒子宽度和高度练习

• 规律：

• 增加了padding之后元素的宽高也会发生变化

• 如果增加了padding之后还想保持元素的宽高，那么必须减去内容的宽高

• 增加了border之后元素的宽高也会发生变化

• 如果增加了border之后还想保持元素的宽高，那么必须减去内容的宽高

• 盒子box-sizing属性

• CSS3中新增了一个box-sizing属性，这个属性可以保证我们给盒子新增padding和border后元素的宽高保持不变

• box-sizing属性是如何保证增加padding和border之后，盒子元素的宽高不变

• box-sizing取值

content-box
       元素的宽高=边框+内边距+内容宽高
 border-box
       元素的宽高=width/height

• 盒子模型练习

• 注意点：

  • 如果两个盒子是嵌套关系，那么设置了里面一个盒子的顶部的外边距，外面一个盒子也会被顶下来
  • 如果外面的盒子不 想被一起顶下来，那么可以给外面的盒子设置一个边框属性
  • 在企业开发中，一般情况如果需要控制嵌套关系盒子之间的距离，应该首先先考虑padding，其次再考虑margin，margin本质上用于控制兄弟关系之间的间隙，padding是控制父子关系的

• 另注意点：

  • 在嵌套关系的盒子里，我们可以margin：0 auto; 的方式来让里面的盒子在外面盒子中水平居中
  • <strong>margin：0 auto;只对水平方向有效，对垂直方向无效</strong>

• 盒子居中和内容居中

• <strong>text-align:center; </strong>和 <strong>margin:0 auto;</strong> 居中

• text-align:center; 的作用：

设置盒子中存储的文字/图片的水平居中

• margin:0 auto;的作用：

让盒子自己水平居中

• 清空默认边距

• 为什么要清空默认边距（外边距和内边距）
  在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等，所以在企业开发中

• 如何清空默认的边距

  • 格式：

*{
         margin: 0;
         padding: 0;
        }

• 注意点：

  通配符选择器会找到（遍历）当前界面中所有的标签，所以性能不好
  所以，百度搜yui css reset ，第一个，进去打开网址复制
    http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}

• 行高和字号
• 什么是行高？
  在CSS中所有的行都有自己的行高
• 注意点：
  行高和盒子的高不是同一个概念
• 格式：

   line-height:;

• 规律：

  1. 文字在行高中默认是垂直居中的
  2. 在企业开发中我们经常将盒子的高度和行高设置为一样，那么这样就可以保证一行文字在盒子的高度中是垂直居中的，简而言之：要想一行文字在盒子中垂直居中，那么只需要设置这行文字的行高等于盒子的高即可
  3. 在企业开发中如果一个盒子中又多行文字，那么就不能用上面那点，那么我们只能通过padding来让文字垂直居中

• 还原字体和字号

• 注意点：

  1. 在企业开发中，如果一个盒子中存储的是文字，那么一般情况下我们回忆和字左边的内边距为基准，不会以右边的内边距为基准，因为这个右边的内边距有误差
  2. 右边内边距的误差从何而来？因为右边如果放不下这个文字，那么文字就会换行显示，所以文字和内边距之间的距离就有误差
  3. 顶部的内边距并不是边框到文字顶部的距离，而是边框到行高顶部的距离

• 网页布局方式
  什么是网页的布局方式？
  其实就是指浏览器是如何对网页中国的元素进行排版的
  • 标准流（文档流/普通流）排版方式
  • 其实浏览器默认的排版方式就是标准流的排版方式
  • 在CSS中将元素分为三类，分别是块级元素、行内元素、行内块级元素
  • 在标准流中有两种排版方式，一种是垂直排版，一种是水平排版

垂直排版：如果元素是块级元素，那么就会垂直排版
水平排版：如果元素是行内元素/行内块级元素，那么就会水平排版

• 浮动流排版方式

float: left;
float: right;

• 浮动流是一种“半脱离标准流”的排版方式
• 浮动流只有一种排版方式，就是水平排版，他只能设置某个元素左对齐或者右对齐
• 注意点：

   1.浮动流中没有居中对齐，也就是没有center这个取值
   2.在浮动流中是不可以使用margin:0  auto;的

• 特点：

   1.在浮动流中是不区分块级元素、行内元素、行内块级元素的，无论是块级元素、行内元素、行内块级元素都是水平排版
   2.在浮动流中无论是块级元素、行内元素、行内块级元素都可以设置宽高
   3.综上所述，浮动流中的元素和标准流中的行内块级元素很像

• 定位流排版方式

• 浮动元素的脱标

• 什么是浮动元素的脱标？
  脱标：脱离标准流，当某一个元素浮动之后，那么这个元素看上去就像被从标准流中删除了一样，这个就是浮动元素的脱标

• 浮动元素脱标之后会有什么影响？
  如果前面一个元素浮动了，而后面一个元素没有浮动，那么这个时候前面的一个元素就会盖住后面的一个元素

• 浮动元素排序规则

• 浮动元素排序规则

  • 相同方向上的浮动元素，先浮动的元素会显示在前面，后浮动的元素会显示在后面
  • 不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动
  • 浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置来确定
  • 要结合脱标的过程来想

• 浮动元素贴靠现象
  当父元素足够有放下所有浮动元素的宽时，所有浮动元素会并排正常地放，但当父元素宽度不够时，最后一个浮动元素就会向前面元素紧贴着的那个元素贴靠，如果这时父元素宽度够，就搞定，宽度还不够就继续往前一级一级地贴，直到最后无论父元素宽度够不够，都会贴近
  父元素的最左边。

• 浮动元素字围现象
  浮动元素不会盖着不是浮动元素中的文字
  68-70.浮动练习

• 浮动元素高度问题

• 做垂直方向的布局时，用标准流；做水平方向的布局时，用浮动流

• 在标准流中内容的高度可以撑起父元素的高度

• 在浮动流中浮动的元素是不可以撑起父元素的高度的

• 在标准流中，div如果没设置宽度高度，那么宽度和父元素一样，高度为0

• 清除浮动方式一

• 清除浮动方式一

给前面一个父元素设置高度

• 注意点：
  在企业开发中，我们能不写高度就不写高度，所以这种方式<strong>用得很少</strong>

• 清除浮动方式二

• 清除浮动的第二种方式

 给后面的盒子添加clear属性

• clear属性取值

none：默认取值，按照浮动元素的排序规则来排序（）
left：不要找前面的左浮动元素，不要和前面的左浮动同一行
right：不要找前面的右浮动元素，不要和前面的右浮动同一行
both：不要找前面的左浮动元素和右浮动元素（用得最多）

• 注意点：
  当我们给某个元素添加clear属性之后，那么这个属性的margin属性就会失效

• margintop失效的原因

• 如果两个盒子是嵌套关系，那么设置了里面一个盒子的顶部的外边距，外面一个盒子也会被顶下来

• 如果外面的盒子不 想被一起顶下来，那么可以给外面的盒子设置一个边框属性

• 清除浮动方式三
  清除浮动的第三种方式

隔墙法

• 外墙法

1、在两个盒子之间添加一个额外的块级块级元素
2、给这个额外添加的块级元素设置clear:both;属性

• 注意点：

  1. 外墙法可以让第二个盒子使用margin-top属性
  2. 外墙法不可以让第一个盒子使用margin-bottom属性
  3. 一般企业开发中，不设置第一个盒子的margin-bottom和第二个盒子的margin-top属性，而是直接设置额外那个盒子的高度

• 内墙法

• 清除浮动方式四

• 内墙法

1、在第一个盒子中所有子元素的最后添加一个额外的块级块级元素
2、给这个额外添加的块级元素设置clear:both;属性

• 注意点：

外墙法可以让第二个盒子使用margin-top属性
外墙法也可以让第一个盒子使用margin-bottom属性

• 外墙法和内墙法的区别：
  外墙法不能撑起第一个盒子的高度，而内墙法可以撑起第一个盒子的高度

• 在企业开发中<strong>不常用隔墙法</strong>来清除浮动

• 伪元素选择器
  在前端开发中推崇结构和样式分离，html添加语义，CSS代码修改样式
  什么是伪元素选择器

• 作用：给指定标签的内容前面添加一个子元素或者给制定标签的内容后面添加一个子元素

• 格式：

div::before{
                  属性:值;
                  }
含义：给指定标签的内容前面添加一个子元素

div::after{
                  属性:值;
                 }                
含义：给指定标签的内容后面添加一个子元素

例如：

div::before{
    /*指定添加的子元素的内容*/
    content:"爱你";
    /*指定添加的子元素的宽高*/
    width: 50px;
    height: 50px;
    background-color: pink;
    /*指定添加的子元素的显示模式*/
    display: block;
    /*隐藏添加的子元素*/
    visibility: hidden;
                }

• 清除浮动方式五（比较推荐）

div::after{
    /*设置添加的子元素的内容为空*/
    content:"";
    /*设置添加的子元素为块级元素*/
    display: block;
    /*设置添加的子元素的高度为0*/
    height: 0;
    /*设置添加的子元素看不见*/
    visibility: hidden;
    /*给添加的子元素设置clear:both;*/
    clear: both;

因为此方法是CSS3推出的，IE6不支持
需要在CSS里面添加以下内容，就能兼容IE6（box1为第一个盒子的类名）

.box1{
            *zoom: 1;
            }

注：

• 清除浮动方式六（也是比较推荐）
  overflow:hidden; 的作用：
  • 可以将超出标签范围的内容裁剪掉
  • 清除浮动（给第一个盒子添加）
  • 注意点：

因为此方法是CSS3推出的，IE6不支持
需要在CSS里面添加以下内容，就能兼容IE6（box1为第一个盒子的类名）
.box1{
            *zoom: 1;
            }

• 可以通过给外面的盒子设置overflow:hidden;让里面的盒子设置margin-top之后，外面的盒子不被顶下来

• 定位流-相对定位
• 定位流分类

相对定位
 绝对定位
 固定定位
静态定位

• 什么是相对定位？
  就是相对自己<strong>以前在标准流中</strong>的位置来移动。

• 相对定位注意点

• 相对定位是不脱离标准流的，会继续在标准中占用一份空间

• 在相对定位中同一个方向上的定位属性只能使用一个

• 由于相对定位是不脱离标准流的，所以在相对定位中是区分块级元素、行内元素、行内块级元素的；

• 由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对定位的元素设置margin、padding等属性时会影响到标准流的布局，这些属性是给定位前的盒子设置的

• 相对定位应用场景

  • 用于对元素进行微调（比较少）
  • 配合后面学习的绝对定位来使用

• 格式:

.box2{
    background-color: green;
    position: relative;
    top:;
    right:;
    bottom:;
    left:;
          }

• 定位流-绝对定位
• 什么是绝对定位？

就是相对于body来定位

• 格式

.box2{
    background-color: green;
    position: absolute;
    top:;
    right:;
    bottom:;
    left:;
}

• 绝对定位注意点：

  • 绝对定位的元素是脱离标准流的
  • 绝对定位的元素是不区分块级元素、行内元素、行内块级元素，所有元素都能设置宽高！

• 绝对定位-参考点

• 规律

  • 默认情况下所有的绝对定位的元素，无论有没有祖先元素，都会以body作为参考点
  • 如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，那么这个绝对定位的元素就会以定位流的那个祖先作为参考点

1、只要是这个绝对定位元素的祖先元素都可以
2、这里指的定位流是指 绝对定位、相对定位、固定定位
3、定位流中只有静态定位不行

• 如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离他最近的那个定位流的祖先元素为参考点

• 绝对定位、注意点

• 如果一个绝对定位的元素是以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点，而不是以整个网页的宽度和高度作为参考点；

• 一个绝对定位元素会忽略祖先元素的padding

• 绝对定位-子绝父相

• 相对定位的弊端：

相对定位不会脱离标准流，会继续在标准流中占用一份空间，所以不利于布局界面

• 绝对定位的弊端：

默认情况下绝对定位的元素会以body作为参考点，所以会随着浏览器宽度高度的变化而变化

• 子绝父相：

子元素使用绝对定位，父元素使用相对定位

• 绝对定位-水平居中

margin：0 auto；在绝对定位中无效 

如何让绝对定位的元素水平居中（加下面2行代码）

只需要设置绝对定位元素的 left：50%；
然后在设置绝对定位元素的 margin-left：-元素宽度的一半px；

• 绝对定位-团购界面
  企业开发中，发现某个元素盖在另一个元素上面，要第一时间想到定位流；
  而使用定位流的时候一定要想到子绝父相；

• 定位流-固定定位
• 格式：

position: fixed;
left:;
top:;
right:;
bottom:;

• 注意点：

  1. 固定定位的元素是脱离标准流的，不会占用标准流中的空间
  2. 固定定位和绝对定位一样不区分行内/块级/行内块级元素，可以设置 宽高
  3. 背景关联方式可以让背景图片不会随着网页页面的滚动而滚动，而固定定位的元素不会随着网页页面的滚动而滚动

• 定位流- z-index属性

a、IE6不支持固定定位
b、默认情况下就静态定位

• 什么是z-index属性？
  默认情况下所有的元素都有一个默认的z-index属性，取值是0；z-index属性的作用是专门用于控制定位流元素的覆盖关系的

   1.默认情况下，定位流的元素会盖住标准流的元素
   2.默认情况下，定位流的元素，后面编写的会盖住前面编写的
   3.如果定位流的元素设置了z-index属性，那么谁的z-index属性比较大，谁就显示在上面

• 注意点：

  • 从父现象
  • 如果两个元素的父元素都没有设置z-index属性，那么谁的z-index属性比较大谁就显示在上面
  • 如果两个元素的父元素设置了z-index属性，那么子元素的z-index属性就会失效，也就是说谁的父元素的z-index属性比较大谁就会显示在上面

• a标签的伪类选择器

• 通过我们的观察发现a标签存在一定状态
  1.1默认状态，从未被访问过
  1.2被访问过的状态
  1.3鼠标长按状态
  1.4鼠标悬停在a标签上状态

• 什么是a标签的伪类选择器？
  a标签的伪类选择器是专门用来修改a标签不同状态的样式的

• 格式：

a:link{
    color: skyblue;
}
修改从未被访问过状态下的样式

a:visited{
    color: green;
}
修改被访问过的状态下的样式

a:hover{
    color: black;
}
修改鼠标悬停在a标签上的样式

a:active{
    color: pink;
}
修改鼠标长按状态下的样式

• 注意点：
  • a标签的伪类选择器可以单独出现也可以一起出现
  • a标签的伪类选择器如果一起出现，那么有严格的顺序要求，编写的顺序必须严格遵守爱恨原则：love hate
  • 如果默认状态的样式和被访问过状态的样式一样，那么可以缩写，例如：

a{
    color: skyblue;
}

• a标签伪类选择器的练习
• 在企业开发中编写a标签的伪类选择器最好写在标签选择器的后面
• 在企业开发中和a标签盒子相关的属性都写在标签选择器中（显示模式/宽高/高度/padding/margin）
• 在企业开发中和a标签文字/背景相关的都写在伪类选择器中（有开发经验的程序员都是这么写）