CSS知识点

一、体验CSS

通过标签修改样式的缺点：

1、需要记忆哪些标签有哪些属性，如果该标签没有这个属性，那么设置了也没有效果

2、一旦需求发生变化，需要修改大量代码才能满足现有需求

3、HTML只有一个作用就是用来添加语义

二、CSS格式

1.格式：

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

2、注意点

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

三、文字相关属性

1、规定文字样式的属性

格式：font-style：italic;

取值：

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

2、规定文字粗细的属性

格式：font-weight：bold;

单词取值：

• bold：加粗
• bolder：比更粗还要粗
• lighter：细线，默认就是细线

数字取值：100-900之间整百的数字

3、规定文字大小的属性

格式：font-size：30px;

单位： px 像素

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

4、规定文字字体的属性

格式：font-family:“宋体”；

注意点：

• 如果取值是中文，一定要用双引号或者单引号引起来
• 设置的字体必须是用户电脑里面已经安装的字体

四、字体属性补充

1. 如果设置的字体不存在，那么系统会使用默认的字体来显示宋体

2. 如果设置的字体不存在，而我们又不想用默认的字体来显示怎么办？

   答：可以给字体设置备选方案

   格式：font-family:"字体1","备选方案1",....;

3. 如果想给中文和英文分别单独设置字体，怎么办？

   答：但凡是中文字体，里面都包含了英文，但凡是英文字体，里面都没有包含中文；
   也就是说中文字体可以处理英文，而英文字体不能处理中文。

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

五、文字属性的缩写

缩写格式：font：style weight size family;

例如：font：italic bold 10px "楷体"；

注意点：

1. 在这种缩写格式中有的属性值可以省略：style可以省略，weight可以省略
2. 在这种缩写格式中有的属性值是不可以省略的：size不能省略，family不能省略
3. 在这种缩写格式中style和weight的位置可以交换，size和family的位置是不能顺便乱放
   的。size一定要写在family的前面，而且size和family必须写在所有属性之后。

六、文本属性

1、文本装饰的属性

格式：text-decoration：underline;

取值：

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

2、文本水平对齐的属性

格式：text-align：right;

取值：

• left 左
• right 右
• center 中

3、文本缩进的属性

格式：text-indent:2em;

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

七、颜色属性

1、在CSS中如何通过color属性来修改文字颜色

格式：color: 值；

取值：英文单词：一般情况下常见的颜色都有对应的英文单词，但是不是所有的颜色都能通过英文单词来表达（color：red;）

rgb：格式：(color：rgb(0,0,0);)
红色：rgb（255，0，0）；
绿色：rgb（0，255，0）；
蓝色：rgb（0，0，255）；
黑色：rgb（0，0，0）；
白色：rgb（255，255，255）；
rgba：rgba中的rgb与前面的一样，a代表透明度，取值是0-1，取值越小就越透明(color：rgba(255,0,0,1)😉

只要让红色/绿色/蓝色的值都一样就是灰色

而且如果这三个值越小那么就越偏黑色；越大就越偏白色。

2、十六进制的缩写：

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

eg:#FFEE00==#FE0

注意点：

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

八、标签选择器：

作用：根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性

格式：

标签名称{
   属性：值；
}

注意点：

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

九、id选择器（不可重复=身份证#）

作用：根据指定得id名称找到对应得标签，然后设置属性

格式：

#id名称{

  属性：值；

}

注意点：

1. 每个HTML标签都有一个属性叫做id，也就是说每个标签都可以设置id
2. 在同一个界面中id名称是不可以重复的
3. 在编写id选择器时一定要在id名称前面加上#
4. id的名称具有一定规范
5. id名称只能由字母/数字，下划线组成
6. id名称不能以数字开头
7. id名称不能是HTML标签的名称
8. 在企业开发中一般情况下如果仅仅是为了设置样式，我们不会使用id,因为在前端开发中id是留给js使用的

十、类选择器：（.)

作用：根据指定的类名称找到对应的标签，然后设置属性

格式：

.类名{

      属性：值；

}    

注意点：

1. 每个HTML标签都有一个属性叫做class，也就是说每个标签都可以设置类名
2. 在同一个界面中class名称是可以重复的
3. 在编写id选择器时一定要在class名称前面加上.
4. 类名的命名规范和id名称的命名规范一样
5. 类名就是专门用来给某个特定的标签设置样式的
6. 在HTML中每个标签可以同时绑定多个类名（<p class="para1 para2 ..">我是段落</p>）

十二、id和class的区别

1、id和class的区别

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

2、id选择器和class选择器的区别

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

3、在企业开发中如何选择

id一般是给js使用的，无特殊情况不要用。

十三、后代选择器

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

格式：

标签名称1 标签名称2{
     属性：值；
}

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

注意点：

• 后代选择器不许用空格隔开
• 后代不仅仅是儿子，也包括孙子/重孙子
• 后代选择器不仅仅可以使用标签名称，还可以使用其他选择器

十四、子元素选择器（>）

作用：找到指定标签中所有特定的直接子元素，然后设置属性

格式：

标签名称1>标签名称2{
        属性：值；       
}

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

注意点：

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

十五、后代选择器和子元素选择器

十六、交集选择器

十七、并集选择器

十八、兄弟选择器

十九、序选择器

二十、属性选择器

一、继承性

作用：给父元素设置一些属性，子元素也可以使用

注意点：

1. 并不是所有属性都可以继承，只有以color/font-/text-/line开头的属性才可以继承
2. 在CSS的继承中不仅仅是儿子可以继承，只要是后代都可以继承
3. CSS继承性中的特殊性：a标签中的文字颜色和下划线是不能继承的；h标签的文字大小是不能继承的

用途：一般用于设置网页上的一些共性信息，例如网页的文字颜色，字体，文字大小等

二、层叠性

作用：层叠性就是CSS处理冲突的一种能力

注意点：层叠性只有在多个选择器选中"同一个标签"，然后又设置了"相同的属性"，才会发生层叠性

三、优先级

作用：当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠就由优先级来决定

优先级判断的三种方式：

1. 是否直接选中（间接选中就是指继承）：如果是间接选中就是谁离目标标签比较近就听谁的
2. 是否是相同的选择器：若均为直接选中，且为同类型，那么谁写在后面就听谁的
3. 不同选择器：id>类>通配符>继承>浏览器默认

四、important

作用：用于提升某个直接选中标签的选择器中的某个属性的优先级的，可以将被指定的属性的优先级提升为最高

注意点：

1. 只能用于直接选中，不能有用间接选中
2. 通配符选择器选中的标签也是直接选中的
3. !important只能提升被指定的属性的优先级，其他的属性的优先级不会被提升
4. !important必须写在属性值的分号前面
5. !important前面的感叹号不能省略

五、优先级的权重问题

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

计算规则：

1. 首先计算选择器中有多少个id，id多的选择器优先级最高
2. 如果id的个数一样，那么再看类名的个数，类名个数多的优先级最高
3. 如果类名的个数一样，那么再看标签的个数，标签个数多的优先级最高
4. 如果id的个数一样，类名的个数也一样，标签名称个数也一样，那么此时谁写在后面听谁的

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

一、div和span

1、div

作用：一般用于配合css完成网页的基本布局（整个）

2、span

作用：一般用于配合css修改网页中的一些局部信息

3、div和span有什么区别

• div会单独占领一行，但span不会
• div是一个容器级的标签，而span是一个文本级的标签

4、容器级的标签和文本级的标签的区别

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

5、注意点：

哪些标签时文本级的哪些标签是容器级的，我们可以不用去记忆，在企业开发中一般情况下要嵌套都是嵌套在div中忙活着按照组标签来嵌套

二、CSS元素的显示模式

在HTML中HTML将所有的标签分为两类，分别是容器级和文本级

在CSS中CSS也将所有的标签分为两类，分别是块级元素和行内元素

容器级的标签：div h ul ol dl li dt dd ...

文本级标签：span p buis stong em ins del ...

块级元素：p div h ul ol dl li dt dd

行内元素：span buis stong em ins del

所有的容器级标签都是块级元素

除了p以外的文本级标签都是行内元素

1、什么是块级元素，什么是行内元素？

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

2、块级元素和行内元素的区别？

块级元素：独占一行
如果没有设置宽度，默认和父元素一样宽
如果设置了宽高，那么就按照设置的来显示

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

3、行内块级元素

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

行内块级元素：img input select textarea button

三、CSS元素显示模式转换

1、如何转化CSS元素的显示模式？

设置元素的display属性

2、display取值

• display：block;块级
• display：inline;行内
• display：inline-block;行内块级

3、快捷键

• di display：inline;
• db display：block;
• dib display：inline-block;

一、边框属性

作用：就是环绕在标签宽度和高度周围的线条

格式：

1、连写（同时设置四条边的边框）：border：边框的宽度 边框的样式 边框的颜色；

注意点：

• 连写格式中颜色属性可以省略，省略以后默认就是黑色
• 连写格式中样式不能省略，省略以后就看不到边框
• 连写格式中宽度可以省略，省略后可以看到边框
  eg:

<style>
    .box{
        width: 500px;
        height: 500px;
        background-color: red;
        border:5px solid blue;
    }
</style>

2、连写（分别设置四条边的边框：按方向）：

• border-top：边框的宽度 边框的样式 边框的颜色；
• border-right：边框的宽度 边框的样式 边框的颜色；
• border-left：边框的宽度 边框的样式 边框的颜色；
• border-bottom：边框的宽度 边框的样式 边框的颜色；

注意点同上。

3、连写（分别设置四条边的边框：按元素）

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

eg:

<style>
    .box{
        width: 500px;
        height: 500px;
        background-color: red;
        border-width: 5px 10px 15px 20px;
        border-style:solid dashed dotted double;
        border-color:blue purple pink green;
    }
</style>

注意点：

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

• 上 右 下 左>上 右 下>左边的取值和右边的一样
• 上 右 下 左>上 右>左边的取值和右边的一样，下边的取值和上边一样
• 上 右 下 左>上>右下左边取值和上边一样

4、非连写（方向+要素）

• border-left-width：20px;
• border-left-style：double;
• border-left-color：pink;

一、盒子模型

作用：仅仅为一个形象的比喻

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

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

内边距：填充物 padding

边框：手机盒子自己 border

外边距：盒子和纸盒之间的间隙 margin

二、盒子模型宽度和高度

1、内容的宽度和高度：

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

2、元素的宽度和高度：

宽度=左边框+左内边距+width+右内边距+右边框

高度 同理可证

3、元素空间的宽度和高度：

宽度=左外边距+左边框+左内边距+width+右内边距+右边框+右外边距

高度 同理可证

元素宽高=边框+内边距+内容宽高

规律：

• 增加了padding/border之后元素的宽高也会发生变化
• 如果增加了padding/border之后还想保持元素的宽高。那么就必须减去内容的宽高

三、盒子的box-sizing属性

1. CSS3中新增了一个box-sizing属性，这个属性可以保证我们在给盒子新增padding和boeder之后，盒子元素的宽度和高度不变
2. box-sizing取值：
   content-box:元素宽高=边框+内边距+内容宽高（默认）
   border-box：元素的宽高=width属性（增加不改变）

四、盒子模型练习

需求：
有一个大盒子，元素的宽高是500
有一个小盒子，元素的宽高是200
要求将小盒子放在大盒子中，并且小盒子在大盒子中水平垂直居中

方法：

1. 给大盒子设置内边距，将小盒子挤下来（2种方法：用/不用box-sizing）
2. 给小盒子设置外边距

注意点：

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

注意点：

• 在嵌套关系的盒子中，我们可以利用margin:0 auto;的方式来让里面的盒子在外面的盒子中水平居中
• margin:0 auto;只对水平方向有效，对垂直方向无效；垂直方向只能通过像素来控制：margin:150px auto;

五、盒子居中和内容居中

1.text-align:center;和margin:0 auto;区别

text-align:center作用：设置盒子中存储的文字/图片水平居中

margin:0 auto作用：让盒子自己水平居中

六、清空默认边距

1、为什么要清空默认编剧

在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等，所以在企业开发中，编写代码之前的第一件事情就是清空默认的边距。

2、如何清空默认的边距

*{
padding :0;
margin: 0;
}

通配符选择器默认选中当前界面中所有的标签

3、注意点

通配符选择器会遍历当前界面中所有的标签 ，故而性能不好，企业开发中可以从这个网址中拷贝

http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css

4、改进

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}

七、行高和字号

1、什么是行高

在CSS中所有的行都有自己的行高

注意点：行高（line-height）和盒子高(height)不是同一个概念，行高是指某一行内容的高度，盒子的高是指标签的高度

默认情况下，行高等于盒子高，盒子的高被内容撑起来了

规律:

1. 文字在行高中是默认垂直居中的
2. 在企业开发中我们经常将行高和盒子高设置为一样的，那么就可以保证一行文字在盒子的高度中是垂直居中的（（line-height）=height）
3. 在企业开发中，如果一个盒子中有多行文字，那么我们就不能使用设置行高等于盒子高来实现让文字垂直居中，只能通过设置padding来让文字居中

注意点：

1. 在企业开发中，如果一个盒子存储的是文字，那么一般情况下我们会以盒子左边的内白那句为基准，不会以右边的内边距为基准，因为右边的内边距有误差
2. 因为右边如果放不下一个文字，那么文字就会换行显示，所以文字和内边距之间的距离就有了误差。
3. 由于每行文字都有行高，所以顶部的内边距是由边框的底部到行高的顶部，而不是直接到文字顶部的距离。

八、文章界面（如何根据设计师提供的设计图片完成网页）

1、清空所有的边距

2、从外向内，从上至下的编写网页

一、网页的布局方式

1、什么是网页的布局方式：

网页的布局方式其实就是指浏览器是如何让对网页中的元素进行排版的

2、常见的排版方式

标准流（文档流/普通流）排版方式：其实浏览器默认的排版方式为标准流的排版方式

在CSS中将元素分为三类，分别是块级元素/行内元素/行内块级元素

在标准流中有两种排版方式，一种是垂直排版，一种是水平排版，如果元素是块级元素就会垂直排版；如果元素是行内元素/行内块级元素，那么就会水平排版

浮动流排版方式：

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

注意点：

• 浮动流没有居中对齐；也就是没有center取值。
• 在浮动流中是不可以使用margin：0 auto;

特点：

• 在浮动流中是不区分块级元素/行内元素/行内块级元素的，无论是块级元素/行内元素/行内块级元素都可以水平排版
• 在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高

综上所述，浮动流中的元素和标准流中的行内块级元素很像
float:left 与其父元素左对齐

定位流排版方式

3、标准流元素分类：

• 块级元素：独占一行，可以设置宽高；如果不设置宽高，默认情况下，与其父元素的宽度一致；设置display:block;可以将元素转换为块级元素
• 行内元素：不会独占一行，不能设置宽高，元素的宽度就是他包含的文字或者图片的宽度，不可以改变；设置display：inline可以将块状元素转化为行内元素
• 行内块级元素：不会独占一行，但能设置宽高，块级元素->行内块级元素：display:inline-block;(使块级元素既能水平排版又能设置宽高)

二、浮动元素的脱标

1、什么是浮动元素的脱标？

脱标：脱离标准流

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

2、浮动元素脱标之后会有什么影响

如果前面一个元素浮动了，而后面一个元素没有浮动，那么这个时候前面的一个元素就会盖住后面的一个元素

三、浮动元素的排序规则

1. 相同方向上的浮动元素，先浮动的元素会显示在前面，后浮动的元素会显示在后面
2. 不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动
3. 浮动元素浮动之后的位置，有浮动元素浮动之前在标准流中的位置来确定（浮动的元素是不会盖住浮动的元素的，浮动的元素只会盖住标准流中的元素）

四、浮动元素的贴靠现象

1. 当父元素的宽度足够放下所有元素时，会并列显示
2. 当父元素的宽度不足够放下所有元素时，那么就会从最后一个元素开始往父元素贴

五、浮动元素字围现象

没有浮动的元素里的文字会给浮动的元素让位，即浮动元素不会盖住没有浮动元素当中的文字

作用：一般用来做图文混排

一般水平方向上的布局都会使用浮动流
一般垂直方向上的布局一般都会使用标准流

六、浮动元素高度问题

1. 在标准流中，内容的高度可以撑起父元素的高度
2. 在浮动流中，浮动的元素是不可以撑起父元素的高度的

七、清除浮动方式

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

注意点：在企业开发中，我们能不写高度就不写高度，所以这种方式用的少

2.给后面的盒子添加clear属性

clear属性取值：

• none:默认取值，按照浮动元素的排序规则来排序（左浮动找左浮动，右浮动找右浮动）
• left：不要找前面的左浮动元素
• right：不要找前面的右浮动元素
• both：不要找前面的左浮动元素和右浮动元素

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

3.隔墙法

外墙法：在两个盒子中间添加一个额外的块级元素（一般加div,p语义太重）；给这个额外添加的块级元素设置clear：both;属性。

注意点：外墙法可以让第二个盒子使用margin-top属性；但是不可以让第一个盒子使用margin-bottom属性。所以一般情况下，直接设置额外添加块级元素的高度

内墙法：在第一个盒子中所有子元素最后添加一个额外的块级元素（一般加div,p语义太重）；给这个额外添加的块级元素设置clear：both;属性。

注意点：内墙法可以让第二个盒子使用margin-top属性；也可以让第一个盒子使用margin-bottom属性。也可以直接设置额外添加块级元素的高度

内墙法外墙法区别：

• 外墙不可以设置第一个盒子的margin-bottom属性，但是内墙可以
• 内墙法可以撑起第一个盒子的高度，而外墙法不可以撑起第一个盒子的高度

注意点：企业开发中不常用隔墙法清除浮动

4、使用伪元素选择器

• 设置添加的子元素的内容为空
• 设置添加的子元素为块级元素
• 设置添加的子元素的高度为0
• 设置添加的子元素看不见
• 给添加的子元素设置clear：both

注意点：ie6不兼容

解决方法：加上*zoom:1;

.box1::after{
    content:"";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
.box1{
    *zoom:1;
}

伪元素选择器

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

格式：在style中：指定标签名称

div：：before{
    content:"内容"；(属性名称，值)
 }

(给指定便签内容的前面添加子元素)

指定标签名称：：after{
      content:"内容"；
}

(给指定便签内容的后面添加子元素)

注意点：伪元素选择器中可以直接给其设置长宽颜色等属性值，但是长宽没有效果，此时需要使用display：block;来将其改为块级元素

如果不想让添加的子元素显示出来，此时设置子元素的高度为0，同时设置visibility：hidden;将添加的子元素隐藏起来,使用overflow：hidden；(推荐)

overflow：hidden；作用:

• 可以将超出标签范围的内容裁剪掉
• 清除浮动
• 可以通过overflow：hidden;设置外边的盒子，让里面的盒子设置margin-top之后，外面的盒子不被顶下来

清除浮动用法：给第一个盒子添加overflow:hidden;

特点同内墙法

注意点同伪元素选择器

定位流

定位流分类：

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

一、相对定位

作用：相对于自己以前在标准流中的位置来移动

格式：position：relative;

其他属性：

top:

right:

bottom:

left:

注意点：

• 相对定位是不脱离标准流的，会继续在标准流中占用一份空间
• 在相对定位中同一个方向上的定位属性只能使用一个
• 由于相对定位是不脱离标准流的，所以在相对定位中是区分块级元素/行内元素/行内块级元素的
• 由于相对定位是不脱离标准流的，并且相对定位的元素设置margin/padding等属性的时候会影响到标准流的布局（意思是margin属性不会加给定位之后的盒子，而会加给定位之前的盒子）

应用场景：

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

二、绝对定位

作用：绝对定位就是相对于body来定位

格式：position:absolute;

其他属性:

• top:
• right:
• bottom:
• left:

注意点：

• 绝对注意点的元素是脱离标准流的
• 绝对定位的元素是不区分块级元素/行内元素/行内块级元素的

参考点：

1、默认情况下所有的绝对定位的元素，无论有没有祖先元素，都会以body作为参考点

2、如果一个绝对定位的元素有自己的祖先元素（父亲爷爷都可），并且祖先元素也是定位流，那么这个绝对定位的元素就会以定位流的这个祖先元素作为参考点。

• 只要是这个绝对定位元素的祖先元素都可以
• 指的定位流是指绝对定位/相对定位/固定定位
• 定位流中只有静态定位不行

3、如果一个绝对定位的元素有自己的祖先元素（父亲爷爷都可），并且祖先元素也是定位流，而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离他最近的那个定位流的祖先元素为参考点。

绝对定位注意点：

• 如果一个绝对定位的元素是以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点（第一次看到的屏幕，而不是整个网页）。
• 一个绝对定位的元素会忽略祖先元素的padding

弊端：

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

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

子绝父相：

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

4、如何让绝对定位的元素水平居中

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

三、固定定位

作用：可以让某一个元素不随着滚动条的滚动而滚动

格式：position：fixed;

注意点：

• 固定定位的元素是脱离标准流的，不会占用标准流中的空间；
• 固定定位和绝对定位一样不区分行内/块级/行内块级
• ie6不支持固定定位

四、静态定位

默认情况下一个元素就是静态定位

五、定位流z-index属性

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

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

注意点：

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

一、背景颜色

1、如何设置背景颜色

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

2、取值：

具体单词/rgb/rgba/十六进制

二、背景图片

1、如何设置背景图片

在CSS中有一个叫做background-image：url();的属性，就是专门用于设置背景图片的

注意点：

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

三、背景平铺属性

1、如何控制背景图片的平铺方式？

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

取值：

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

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

四、背景定位属性：

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

在CSS中有一个叫做background-position：属性就是专门用于控制背景图片的位置；

2、格式：background-position:水平方向 垂直方向；

3、取值：具体的方位名词：

• 水平方向：left center right
• 垂直方向：top center bottom
• 具体的像素：eg: background-position：100px 200px;（可以为负值）

4、坐标轴：

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

五、背景尺寸属性

作用：背景尺寸属性是CSS3中新增的一个属性，专门用于设置背景图片大小。

属性：默认情况下：背景图片有多大，显示出来就有多大

• 具体像素：（background-size:200px 100px）背景图片按照设置的宽度和高度显示
• 百分比：（background-size:50% 50%）背景图片的宽度和高度是当前元素（盒子）的百分之多少
• 宽度等比拉伸：（background-size：auto 100px）
• 高度等比拉伸：（background-size：100px auto）
• cover：（background-size：cover）两层含义：图片需要等比拉伸 拉伸至宽度和高度都填满整个元素
• contain：（background-size：contain）两层含义：图片需要等比拉伸 拉伸至宽度或者高度填满整个元素为止

六、规定背景图片的定位区域属性

作用：告诉系统背景图片从什么区域开始显示，默认情况下就是从padding区域开始显示

属性：

• background-origin：padding-box;(从内边距)
• background-origin：border-box;(从边框)
• background-origin：contain-box;(从内容)

七、背景绘制区域属性

作用：告诉系统背景图片从什么区域开始绘制，默认情况下从bord区域er开始绘制背景

属性：

• background-clip：padding-box;(从内边距)
• background-clip：border-box;(从边框)
• background-clip：contain-box;(从内容)

八、多重背景图片

格式：多张背景图片之间用逗号隔开即可

background: url("img/bg.png") no-repeat,url("img/lm1.png");

注意点：

• 先添加的图片会盖住后添加的图片
• 可以使用背景定位属性定位每张图片

background: url("img/bg.png") no-repeat left top ,url("img/lm1.png") right top;

建议在编写多重背景时拆开编写

1. background-image: url(“img/bg.png”) ,url(“img/lm1.png”) ;
2. background-repeat: no-repeat,no-repeat;
3. background-position: left top,right top;

九、背景缩写

1、背景属性缩写的格式：

background：背景颜色  背景图片  平铺方式  关联方式  定位方式；

2、注意点：

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

3、什么是背景关联方式？

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

4、如何修改背景的关联方式？（了解）

在CSS中有一个叫做background-attachment的属性，这个属性就是专门用于修改关联方式的

格式：background-attachment: scroll
取值：

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

十、插入图片和背景图片的区别：

1、插入图片和背景图片的区别：

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

十一、CSS精灵图：

1、什么是CSS精灵图

CSS精灵图是一种图像合成技术

2、CSS精灵图作用

可以减少请求的次数，以及可以降低服务器处理压力

3、如何使用CSS精灵图

CSS精灵图需要配合背景图片和背景定位来使用

总结：

• 浏览器会将换行当为一格来处理
• 遇到导航条，选项卡，用ul+li+浮动
• value是提交给服务器的，标签之间的内容才是用来显示页面的

a标签的伪类选择器：

1、a标签存在一定的状态：

• 默认状态：从未被访问（蓝色）
• 被访问过的状态（紫色）
• 鼠标长按状态（红色）
• 鼠标悬停在a标签上状态

2、什么是a标签的伪类选择器？

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

3、格式：

• a：link{ } 修改从未被访问过状态的样式
• a：visited{ }修改被访问过的状态下的样式
• a：active{ }修改鼠标长按状态的样式
• a：hover{ }修改鼠标悬停在a标签上的状态

4、注意点：

• a标签的伪类选择器可以单独出现也可以一起出现
• a标签的伪类选择器如果一起出现，那么有严格的顺序要求，编写顺序必须遵守爱恨原则（love heat）
• 如果默认状态的样式和被访问过的状态样式相同则可以缩写a{ color:green; }等同于以下写法：a:link{ color:green; } a:visited{ color:green; }
• 在企业开发中编写a标签的伪类选择器最好写在标签选择器的后面
• 在企业开发中和a标签盒子相关的属性都写在标签选择器中（显示模式/宽度/高度/padding/margin）
• 在企业开发中和a标签文字/背景相关的都写在伪类选择器中
• ：hover这个伪类选择器除了可以用在a标签上，还可以用在其他的任何标签
• div:hover{ width:300px }

过渡模块：

1.过渡三要素

• 必须要有属性发生变化
• 必须告诉系统哪个属性需要执行过渡效果（transition-property:width;
• 必须告诉系统过渡效果持续时长(transition-duration:5s)

2.当多个属性需要同时执行过度效果时用逗号隔开即可

transition-property:width background-color;
transition-duration:5s,5s;

3.过渡模块其他属性

transition-delay:2s;

告诉系统延迟多少秒之后才开始过渡动画

transition-timing-function:linear（匀速）/ease（逐渐慢下来）/ease-in（加速）/ease-out（减速）/ease-in-out（先加速后减速）

告诉系统过渡动画的运动速度

4.过渡连写格式

transition:property duration timing-function delay.

缩写格式：
transition：width 5s linear 0s.(一个属性)
transition：width 5s linear 0s,background-color 5s linear 0s;(多个属性）

注意点：

• 和分开写一样，如果想给多个属性添加过渡效果也是用逗号隔开即可；
• 连写的时候可以省略后面的两个参数，因为只要编写了前面的两个参数就已经满足了过渡的三要素
• 如果多个属性运动的速度/延迟的时间。持续时间都一样，那么可以简写为transition：all 0s;
  5、编写过渡效果的思路
• 不要管过渡，先编写基本界面
• 修改我们认为需要修改的属性
• 再回过头去给被修改属性的那个元素添加过渡属性即可

2D转化：

属性：transform

取值：

• 旋转rotate
  ul li:nth-child(2){ /*其中deg为单位，代表多少度*/ transform: rotate(45deg); }
• 平移translate：第一个参数水平方向，第二个参数垂直方向，正数右移，负数左移
  ul li:nth-child(3){ transform: translate(100px 0px); }
• 缩放scale：第一个参数水平方向，第二个参数垂直方向：如果取值为1，代表不变；如果取值大于1，代表需要放大，如果取值小于1，代表需要缩小，如果水平和垂直缩放都一样，可以简写为一个参数
  transform: scale(1.5); ul li:nth-child(4){ transform: scale(1,1.5); }

综合

注意点：
1、如果需要进行多个转化，那么用空格隔开
2、2D转化模块会修改元素的坐标系，所以旋转之后在平移就不是水平平移

ul li:nth-child(5){
    transform: rotate(45deg) translate(100px 0px) scale(1,1.5);
}

属性：形变中心点(transform-origin)

默认情况下，所有的元素都是以自己的中心点作为参考来旋转的，我们可以通过形变中心点属性来修改他的参考点的

transform-origin:水平方向 垂直方向；

注意点：

取值：

像素：

百分比：

特殊关键字：center、left、top等

旋转轴向

默认情况下所有的元素都是围绕Z轴进行旋转

即transform:rotate(45deg);==transform:rotateZ(45deg)

想围绕哪个轴旋转，那么只需要在rotate后面加上哪个轴即可；

X轴：transform:rotateX(45deg)

Y轴：transform:rotateY(45deg)

透视属性：perspective

1. 透视：近大远小
2. 注意点：透视属性必须添加到需要呈现近大远小效果的元素的父元素上面

盒子阴影和文字阴影

1、如何给盒子添加阴影：

box-shadow：水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影；

2、注意点：

• 盒子阴影分为内外阴影，默认情况下就是外阴影
• 阴影如果不设置颜色，默认跟随内容的颜色
• 快速添加阴影只需要编写三个参数即可；box-shadow：水平偏移 垂直偏移 模糊度；

3、如何给文字添加阴影

text-shadow：水平偏移 垂直偏移 模糊度 阴影颜色 ；

注意点：

1. 阴影如果不设置颜色，默认跟随内容的颜色
2. 快速添加阴影只需要编写三个参数即可；box-shadow：水平偏移 垂直偏移 模糊度；

动画模块：

1、过渡和动画之间的异同：

不同点：

• 过渡必须人为的触发才会执行动画
• 动画不需要人为的触发就可以执行动画

相同点：

• 过渡和动画都是用来给元素添加动画的
• 过渡和动画都是系统新增的一些属性
• 过渡和动画都需要满足三要素才会有动画效果

2、动画三要素：

告知系统需要执行哪个动画：animation-name:lnj;
告诉系统我们需要自己创建一个名称叫做lnj的动画

@keyframes lnj {
    from{
        margin-left: 0;
    }
    to{
        margin-left: 500px;
    }
}

告诉系****************n-duration:3s;

3、动画模块其他属性

• animation-delay:2s; 告诉系统多少秒之后开始执行动画
• animation-timing-function:linear;告诉系统动画执行的速度
• animation-iteration-count:3;告诉系统动画需要执行几次
• animation-direction: normal(正常)/alternate（往返动画）;告诉系统是否需要执行往返动画
• animation-play-state:running(默认运动)/paused（暂停）；告诉系统动画是暂停还是运动
• animation-fill-mode:none(不做任何改变)backwards;（让元素等待状态的时候显示动画第一帧的样式）/forwards(让元素结束状态保持动画最后一帧的样式)/both(让元素等待状态的时候显示动画第一帧的样式，让元素结束状态保持动画最后一帧的样式)用来指定等待状态和结束状态的样式；

4、动画三种状态

等待状态 执行状态 结束状态

5、动画模块连写格式

animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画；

6、动画模块连写简写格式

animation:动画名称 动画时长；