CSS笔记

一、什么是CSS

css 称为层叠样式表也叫级联样式表，是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

二、样式分类和语法

我们可以根据CSS代码所在的位置分成三类样式：内联样式，内部样式表，外部样式表。

使用频率：外部样式表>内部样式表>内联样式

2.1内联样式

内联样式：也叫行内样式。将样式写在元素的开始标签里的style属性中。

语法：style = " 属性 : 值 ; 属性 : 值 ; ……"

例如：

div：宽度 ：默认是撑满父元素的内容区宽度。高度： 默认自己的内容区的文字撑起来的高度。

    也可以自定义div的宽与高   属性分别是吧width和height。

扩展：插件live server的使用，live server是一个简易的服务器插件，端口号默认是5500，

          该插件可以使用浏览器打开HTML等文件，并且自动的实时刷新。

2.2内部样式表

内部样式表：将样式写在head的子元素style里，此时需要使用选择器来定位你要设置样式的元素。

语法：选择器{

            属性:值;

            ......

         }

例如：使用id选择器，设置样式时要在id值前面写#。

2.3外部样式表

外部样式表：将样式单独放入到一个文件中，文件的扩展名是.css，然后使用link标签，将样式文件引入到该html页面中。其中，rel指定文件类型，herf指定文件的位置。

语法：和内部样式表语法一样，只不过将其写在了单独的css文件中，直接写，不需要写style属性。（样式文件扩展名是css，该文件中可以设置无数种样式。）

下图为css文件中设置样式的代码：

下图代码写在html文件boby下：

三、选择器

3.1基本选择器（4种）

3.1.1标签选择器

通过标签名，找到页面中所有的这类标签，设置样式。

语法：写在head下的style元素中。标签名{属性名：属性值；}

注意：标签选择器选择的是一类标签，而不是单独的一个。无论嵌套关系有多深，都能够找到对应的标签。

 属性值：

 border-inline-xxx：xxx可以是width，color，style  设置左右边框的大小，颜色，线条

 border-block-xxx：设置上下边框的大小，颜色，线条

 常用的线条： soild：实线

                       dotted：点虚线

                       double：双线条

3.1.2类选择器

通过类名，找到页面中所有的带有这个类名的标签，设置样式。

语法：以小圆点开头的样式选择器，小圆点后面是具体的class名。在style属性下写，.类名{属性名：属性值；}

注意：1.每个元素都可以有class属性，不同元素的class的值可以相同。

           2.表示同一类的元素的class的值可以有多个，使用空格隔开。

           3.类名可以由数字，字母，下划线，中划线组成，但是不能以数字开头或者中划线开头。

例如：

3.1.3id选择器

通过id属性值，找到页面中带有这个id属性值的标签，设置样式。

语法：在style属性下写， #id属性值{属性名：属性值;}

必须使用#作为开始符号，紧跟着id的具体值，id值相当于身份证号，因此id的值是不可以重复的，具有唯一性。

id与class的区别：

 1.在属性上的区别：class的值可以重复，id的值不可以重复，一个标签里面只能有一个id属性值。

 2.在选择器上的区别，class选择器以.开头，id选择器以#开头。

页面展示如下：

3.1.4通配符选择

         通配符选择器就是*选择器，表示所有的元素都被选中,一般用于规定默认样式 。

语法：在style元素下写，*{属性名：属性值；}

可见所有元素字体都是20px

3.2复合选择器

3.2.1交集选择器

对多个选择器共同选择的标签进行样式设置，标签选择器要写在最前面。

语法：多个选择器并排写：选择器1选择器2选择器3.....{属性名：属性值；....}

可见只有段落一的字体大小和颜色改变了。

3.2.2并集选择器

只要含有选择器中的任意一个选择器，就可以应用设置的样式。

语法：多个选择器之间用，隔开：选择器1，选择器2，选择器3，...{属性名：属性值；}

3.3关系选择器

四种：父子选择器，后代选择器，兄+弟选择器，兄~弟选择器。

 父子选择器：通过父亲选中儿子

                语法：父>子{}

    后代选择器：通过祖先选中后代

                语法：祖先 后代{}

    兄+弟选择器：通过兄长选中紧邻的弟弟

                语法：兄+弟{}

    兄~弟选择器：通过兄长选择符合条件的所有弟弟

                语法：兄~弟{}

注意：由于浏览器是自上而下解析的，因此，后面的样式会覆盖掉前面的样式。

3.4属性选择器

五种：（写在style属性下）

           1. [属性名]：选中所有具有指定属性名的元素。

           2. [属性名=属性值] ： 选中指定属性名等于某属性值的元素。

           3. [属性名^=指定值] ： 选中指定属性名的属性值是以指定值开头的元素。

           4. [属性名$=指定值]： 选中指定属性名的属性值是以指定值结尾的元素。

           5. [属性名*=指定值]： 选中指定属性名的属性值是以包含指定值的元素。

3.5 伪元素选择器

五种：1.p::first-letter  对段落的首字符设置样式

           2.p::first-line    对段落的首行设置样式

           3.p::selection   对段落中被鼠标选中的文字设置样式

            4.p::before      对每一个段落中的第一个字符的前面设置样式,可以理解为向段落的第一个字符之前插入内容

             5.p::after        对每一个段落中的最后一个字符后面设置样式,可以理解为向段落的最后一个字符之后插入内容

3.6 伪类选择器(11种)

用来描述一个元素的特殊状态，比如：第一个子元素，被点击的元素等，一般情况下使用：开头。

3.5.1 元素选择伪类选择器（6种）

冒号前有空格代表从子类开始数，无空格代表从所在级数开始。

:first-child    第一个子元素被选中

      、      

 :last-child     最后一个子元素被选中

       、      

 :bth-child(n)   第n个子元素被选中。 n的值可以从1到正无穷

                 2n表示偶数位的元素被选中，也可以使用单词even

      、        

                 2n+1表示奇数位的元素被选中，也可以使用单词odd

  

                 注意：使用上述三种伪类选择器时，注意空格的问题。优先使用带空格的形式。

 :first-of-type: 同类型中的第一个元素

 :last-of-type:  同类型中的最后一个元素

 :nth-of-type(n):同类型中的第n个元素   2n表示偶数位的元素被选中，也可以使用单词even

                                     2n+1表示奇数位的元素被选中，也可以使用单词odd

 

注意：上述三个伪类选择器冒号前面，不要加空格！！！

3.5.2 否定伪类选择器（1种）

语法

：not(其他选择器）

注意：1.括号里面不支持复合选择器的传入。

           2. 如果带child关键字的伪类选择器，与其他的伪类选择器共同使用，冒号前面的空格不需要写。

作用：将其他选择器选中的元素排除。

          将所有的p里面的文字都变红，除了第一个和最后一个。

（1）（2）

3.5.3 a链接伪类选择器（4种）

      :link             超链接独有的选择器，表示未访问前的状态

                          

      :visited        超链接独有的选择器，表示访问过的状态

                         注意：网址必须真实存在，才算访问过

                            

      :hover         所有元素都可以使用的选择器，表示鼠标进入该元素时的状态

           

      :active         所有元素都可以使用的选择器，表示鼠标左键点中该元素时的状态

                   

3.7 选择器的权重（优先级）

当我们使用不同的选择器选中了相同的元素，对同一个属性设置了不同的样式， 取决于选择器的优先级，谁的优先级高(也就是权重大)，就使用谁。

    （内联样式 > id选择器 > 类和伪类选择器 > 默认选择器）

可以看出div的背景颜色依旧是蓝色，因为id选择器的权重大于类选择器。

3.8 样式的继承

CSS针对于样式继承的设计，是为了减少开发过程中的代码量，使子元素具有父元素的一些样式。

 父元素设置好的样式，子元素不需要在重复设置。

 比如字体风格，颜色，大小等。

 某些元素无法继承，比如背景，布局相关的样式。

---

3.9 单位的讲解

单位：

        最基本的单位：像素，即屏幕上的分辨率 ，1920x1080，表示整个屏幕上有这些个点

        一个点就是一个像素。

        百分比单位：是子元素针对于父元素的百分比。会随着父元素的属性改变而改变。

        em单位：是一个相对单位，相对本元素的字体大小 1em=1个font-size。

        rem单位:也是一个相对单位，相对的是整个页面的根元素的字体大小。

         rgb 单位：颜色的单位。rgb（0，0，0）三个0分别代表红色，绿色，蓝色的值，以这三个数字创建颜色。范围都是0~255。

四、盒子模型

4.1 盒模型简介

每一个html元素都可以叫做盒模型。页面就是由一个个盒模型堆砌起来的。

这样的优点就是可以将元素放置在任何地方，可以通过调整宽和高来充满整个屏幕。

在CSS中，盒模型（Box Modle）是用来对元素进行设计和布局的，由内到外包含实际内容区、内边距、边框、和外边距四个部分。

1）内容区Content

用来放置文本或者子元素。

2）内边距padding

即内容区与边框的距离。

3）边框border

围绕在内边距外的边框。

4）外边距margin

边框以外的区域。

为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。

4.2 content（内容区）

• content，盒模型的实际内容区。

• 该区域可以放入文本，以及子元素。

• 样式属性width，height，background-color就是对该区域进行设置的。

4.3 padding（内边距）

padding，定义了内容区距离边框的这一片区域，该区域是透明的，没有颜色。

包含上下左右四个内边距：1. padding-top（上内边距）

                                           2. padding-bottom（下内边距）

                                           3. padding-left（左内边距）

                                           4. padding-right（右内边距）

我们在设置内边距的时候，可以使用上述四个属性，分别设置四个内边距。

为了缩短代码，也可以在一个属性中指定所有的值，语法如下：

1.padding：  上    右    下    左

2.padding：  上      左右      下

3.padding：    上下       左右

4.padding：       上下左右

4.4 border（边框）

 由三个维度的属性来决定样式，宽，颜色，线条。，对应的属性如下：

  1. border-width

  2. borde-color

  3. border-style

 每个属性可以拆成四部分对应的小属性，也就是上下左右边框的宽、颜色、线条。

 属性名格式：border-xxx-width

                       border-xxx-color

                       border-xxx-style ( 上诉三个里面的xxx分别是top，bottom，left，right)

边框的线条样式：- none:  默认无边框
                             - dotted:  点虚线
                             - solid:  实线
                             - double  双线条
                             - dashed  虚线
                             - groove: 定义3D沟槽边框。效果取决于边框的颜色值
                             - ridge: 定义3D脊边框。效果取决于边框的颜色值
                             - inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
                             - outset: 定义一个3D突出边框。 效果取决于边框的颜色值

4.5 marign（外边距）

设置的是元素的周围距离，一般用来决定该元素在页面上的位置。

        外边距由四个方向的属性来控制：

        margin-top

        margin-right

        margin-bottom

        margin-left

        也可以使用一个属性margin来设置四个方向的距离。

        margin： 上      右      下      左

        margin：上      左右     下

        margin：上下    左右

        margin：上下左右

 注意：1. 默认情况下，元素的位置由上边距和左边距决定，因此至少要设置2个值。

            2. 通常情况下，左右可以使用百分比和auto，上下不可以使用。

左右居中：方式1：自己计算

                  方式2：使用auto

4.6 盒模型的水平和垂直布局

4.6.1 盒模型的水平布局

元素在水平方向上的布局必须满足以下等式：

元素的 左右外边距+左右边框宽度+左右内边距+width，必须等于其所在父元素的内容区的width 。

第一种情况：七个属性都是固定值，也就是没有auto值。

如果等式不成立，则右外边距margin-right自动调整数值，使之成立。

 第二种情况： 有auto值。width，marign-right，margin-left这三个属性可以为auto值。

 如果宽是auto值，则自动调整width的值，使等式成立。

 如果宽不是auto值，剩下两个属性，谁是auto，就调整谁。

 如果剩下两个都是auto值，就调整为相同值，使等式成立。

4.6.2 盒模型的垂直布局

盒模型的垂直布局： 只需要设置上下外边距，上下边框的宽，上下内边距以及height即可。子元素在垂直方向上，如果有溢出，可以在父元素里可以使用overflow属性，来设置以下值。

overflow：

                  visible：可见，默认值

                  hidden：溢出部分隐藏

                  scroll：添加滚动条

                  auto：根据是否溢出选择性的自动添加滚动条

4.7 外边距的重叠现象

因为外边距都是独占一行的，因此，左右外边距不可能发生重叠。

只有上下外边距可能发生重叠现象。

 1. 兄弟之间的外边距重叠：

                - 如果两个值都是正值，取较大值。

                - 如果一正一负，取两者的和。 如果负数的绝对值大于整数，那么可见部分一定重叠了。

                - 如果两个都是负数，取绝对值较大的。可见部分一定会发生重叠。

                - 注意： 兄弟之间的外边距的重叠，不是问题。根据情况取设定即可。

  2. 父子之间的外边距重叠：

                -  子元素的上外边距传递给了父元素，使父元素距离他的父元素的上外边距也发生了变化

                    致使父元素的位置发生了改变。因此就出现了问题。 该问题必须要解决。

                -  如何解决?  父元素只需要设置border属性    

、

4.8 行内元素的盒模型

行内元素的盒模型特点：

内容区不能使用width和height属性设置，不生效，内容区的宽度和高度都是文字撑起来的。

padding,border,marign的左右都是生效的，上下不生效。

如果想要行内元素的宽，高或者垂直方向上的样式生效，可以使用display属性将行内元素的样式转为块元素的样式进行显示设置。

display：  可选值如下

          none：隐藏消失。不占用页面的布局空间。

          block：将行内元素当成块元素设置样式。

          inline：将块元素当成行内元素设置样式。

          inline-block：要设置的元素既有行内样式也有块样式。

4.9 默认样式

 通常情况下，所有的HTML标签都有自己的默认样式，比如body的外边距默认是8px。

 因此我们写的标签并不是紧紧的贴着显示器的左边框和上边框。

 换句话说：默认样式可能影响我们自己设计的布局。

 此时，我们需要取消默认样式。但是，每个元素都有自己的默认样式，因此不能使用一个选择器   就是取消所有的默认样式 

 可能有人想到了通配符选择器，比如下面的写法：

         *{

            padding:0;

            margin: 0;

           但是还有太多的其他各种默认样式，写起来太麻烦

          }

此时，可以借助第三方的css样表，进行重置样式。比如

• reset.css： 该文件的作用，是取消几乎所有元素的默认样式。

• normalize.css: 该文件的作用，是设置一些通常的尺寸。

需要哪一个，就使用link 引入即可. link标签应该放置在style标签的上面，避免覆盖掉自定义的样式。

五、元素的浮动

4.1 浮动的特点

浮动的特点：1.浮动元素脱离文档流，可以向左或向右移动，属性float 。可选值

                       - none：不浮动

                       - left：向左浮动

                       - right：向右浮动

                     2.浮动元素不会超出父元素的边框

                     3.元素一旦设置浮动，下面还没有设置浮动的兄弟元素会向上移动。

                     4.浮动元素的哥哥如果没有设置浮动，那么该浮动元素不会浮动到哥哥的左右。

                        如果哥哥也设置了浮动，那么该元素最多和哥哥一样高。

                     5.浮动元素不在满足水平布局的强制成立等式。

4.2 浮动的其他特点

浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围。
哥哥元素设置浮动，弟弟元素里的文字会自动环绕哥哥，而不会被哥哥元素覆盖

元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化。

  -- 块元素：
         1、块元素不在独占页面的一行
         2、脱离文档流以后，块元素的宽度和高度默认都被内容撑开

     -- 行内元素：
        行内元素脱离文档流以后，其特点和浮动的块元素特点一样

        也可以说：脱离文档流以后，不需要再区分块和行内了。

4.3 高度坍塌问题

有的时候，父元素的高度不设置具体值，而是由子元素撑开。这样的好处就是，不会因为子元素的内容减少，而出现大量的空白区域，也不会因为子元素的内容过多发生溢出现象。

如果子元素设置了浮动，那么就会出现父元素高度塌陷的问题。

高度塌陷的问题：
 当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离， 将会无法撑起父元素的高度，导致父元素的高度丢失。父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱。  所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理！

解决父元素的高度坍塌问题，有以下四种方式，第四种是最优解。

            1. 设置父元素的高度， 但是违背了父元素的高度让子元素撑起来的意愿。

            2. 设置父元素的属性overflow:hidden。 原理使用了BFC概念

            3. 在最后一个浮动的子元素后面添加一个空的div并给该元素添加属性

               clear:both,  该方式，添加了一个不该存在的div，代码冗余

            4. 使用父元素的伪元素选择器解决问题。

4.4 clearfix。

clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题。

在父元素的class属性上，添加clearfix.
在style中设置
.clearfix{
    content:"";
    display: table;
    clear: both;
}

六、定位

6.1 相对定位

相对定位的概念：    postition属性的值为relative。

                    1. 如果设置了相对定位，没有改变偏移量，则元素不会移动。

                    2. 相对的位置是元素之前所在文档流的位置。

                    3. 设置了相对定位的元素，不会脱离文档流。

                    4. 设置了相对定位的元素提高了自己的层级。

                    5. 设置了相对定位的元素，本身的性质不会改变， 块依旧是块元素，行内依旧是行内元素。

        偏移量：

           top：     数值是正值，表示向下移动

           bottom：  数值是正值，表示向上移动        一般情况下，top和bottom选择一个即可

           left：    数值是正值，表示向右移动

           right：   数值是正值，表示向左移动        一般情况下，left和right选择一个即可

6.2 绝对定位

绝对定位： 当属性position的值为absolute时，就开启绝对定位。

                    1. 如果设置了绝对定位，不改变偏移量，则该元素不会移动。

                    2. 设置了绝对定位的元素会脱离文档流  如果下面的兄弟没有设置浮动或者定位则向上移动。

                    3. 设置了绝对定位的元素的位置是相对于所在的包含块。

                    4. 设置了绝对定位的元素的性质会发生改变。 行内元素变成块元素， 此时所有的元素宽和高默认都是内容撑开的。

                    5. 设置了绝对定位的元素提高了层级。

包含块：1. 如果设置了绝对定位，那么该元素是相对于距离他最近的设置了相对定位的祖先块元素。

                2.   如果所有的祖先块元素都没有设置定位，那么就是相对html这个根元素来说的包含块尽量设置相对定位，因为相对定位不会脱离文档流。

                            简而言之：最近的设置了相对定位的祖先块称之为包含块。

                            HTML：  是所有元素的初始包含块。

6.3 固定定位

固定定位的学习：当position的值设置为fixed时，就是开启了该元素的固定定位。

固定定位的特点：   1. 固定定位也是一种绝对定位，特点和普通的绝对定位差不多。

                                2. 固定定位的位置是相对于当前浏览器的视口(viewport)来说的。

                                   因此，固定定位的元素不会随着滚动条去滚动。比较适合广告位的设置。

 

6.4 粘滞定位

 当position的值为sticky时，则开启的元素的粘滞定位

 粘滞定位的特点：1. 粘滞定位的特点和相对定位的特点差不多。

                              2. 粘滞定位的不同之处，在于当到达某一个固定位置时，粘住不动。

                              3. 注意：粘滞定位的位置不能超出父元素的范围，否则粘滞效果消失。

6.5 元素的层级

属性:  z-index  是用来设置定位元素的层级的。 值越大，层级越高。元素的层级越高越优先显示。如果元素的层级一样，则优先显示靠下的元素。

兄弟元素： z-index的值越大，层级越高。

父子元素： 父元素的z-index的值再大，也不会覆盖子元素(也不会高过子元素的层级)。

    

下图，可以看出，虽然父元素的层级高于子元素，但并没有覆盖掉子元素。

七、动画

7.1 过渡

transition-property: 指定要执行过渡的属性名多个属性间使用,隔开

transition-duration: 指定过渡效果的持续时间

                       时间单位：s 和 ms  1s = 1000ms

 transition-timing-function: 过渡的时序函数，指定过渡的执行的方式 

                    可选值：

                    ease: 默认值，慢速开始，先加速，再减速

                    linear: 匀速

                    ease-in: 加速

                    ease-out: 减速

                    ease-in-out: 先加速 后减速

                    可以使用transition属性来设置多个属性值，减少代码量，提高可读性

                    语法: 属性，属性，.....duration delay，function

                             duration和delay之间用空格隔开，不加逗号。

       

7.2 动画

设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤，0%相当于from，100%相当于to ，百分比可以是0-100之间任意的整数。

animation-name:用于指定要使用的关键字的名字。

animation-duration:动画执行的整个过程需要的时间。

animation-timing-function:动画是如何运行的。

animation-delay:动画的延迟时间。

animation-iteration-count:动画从初始位置到结束位置执行的次数。

animation-direction:动画的执行方向。

可选值：
                    normal 默认值  从 from 向 to运行 每次都是这样 
                    reverse 从 to 向 from 运行 每次都是这样 
                    alternate 从 from 向 to运行 重复执行动画时反向执行
                    alternate-reverse 从 to 向 from运行 重复执行动画时反向执行

animation-fill-mode: 动画的填充模式
可选值：
                    none 默认值 动画执行完毕元素回到原来位置
                    forwards 动画执行完毕元素会停止在动画结束的位置
                    backwards 动画延时等待时，元素就会处于开始位置
                    both 结合了forwards 和 backwards

可以使用一个属性animation，来设置上述多个属性的值。分别为关键帧的名字 运动时间 运动速度曲线 延迟 次数 运动方向 运动的填充（用空格隔开）。

7.3 变形

动画的变形：即3D转换， 属性是transform。

 对应的属性值有三类：

                  第一类：    平移

                  translateX（像素）：即沿着X轴平移，正值是向右平移，负值向左平移。

                  translateY（像素）：即沿着Y轴平移，正值是向下平移，负值向上平移。

                  translateZ（像素）: 即沿着Z轴平移，正值是突脸，负值远离脸，需要开启视距（脸与屏幕的距离）

                 第二类：    旋转

                  rotateX（度数）： 以X轴为轴心旋转

                  rotateY（度数）： 以Y轴为轴心旋转

                  rotateZ（度数）： 以Z轴为轴心旋转

度数的单位可以是deg（度数）或者turn（圈）

                  第三类：    缩放

                   scaleX（倍数）：水平方向（即X轴方向）缩放

                   scaleY（倍数）：垂直方向上缩放

                   scaleZ (倍数) ：Z轴方向的缩放

                   scale（倍数） 相当于scaleX和scaleY的合并