CSS3基础详解与实战应用-优快云博客

本文链接：https://blog.youkuaiyun.com/pinganaaa/article/details/119859502

文章目录

css基础学习

css基础学习

css（cascading style sheet）：层叠式样式表，是给html标签添加样式的语言

1.前端三层

结构层：html

样式层：css

行为层：javascript

css使样式与结构分离

css只管理样式，html只管理结构

2.css选择器

1.选择标签名进行设置，则所有该标签都会设置该样式

2.选择class属性值进行设置，用.+属性值进行设置，则所有该类的标签都会设置该样式

3.选择id属性值进行设置，用#+属性值进行设置。

3.css本质

css没有加减乘除，没有与或非、循环、选择、判断，css不是编程，就是简单直接的罗列样式
背诵css属性是非常重要的，背诵熟练程度决定了做网页的速度

4.css3的书写位置

4.1内嵌式

内嵌式就是直接嵌在css中，在head标签中书写style标签，直接在style标签中书写即可

4.2外链式

可以将css单独存在.css文件，然后使用link标签引入它，用rel声明该link的关系类型，用href指向连接的文件。

优点：一个css样式表可以供多个html页面使用

4.3导入式

导入式是最不常见的样式表。在style中通过@import url（css文件路径）；导入文件。

缺点：页面会先加载html完成后再加载css样式文件，这样就会有几秒钟的素面朝天的时候

4.4行内式

在标签中使用style属性直接添加color等样式属性。

缺点：牺牲了样式表批量设计样式的能力，只能给单个标签设置样式

5.css3的基本语法

选择器的书写方式是选择器名+{}。

{}里边通过属性跟属性名书写一个样式
多个样式之间要用分号隔开
最后一个样式后不需要分号
多个样式可以写在一行，只要用分号隔开

1.选择标签名进行设置，则所有该标签都会设置该样式

2.选择class属性值进行设置，用.+属性值进行设置，则所有该类的标签都会设置该样式

3.选择id属性值进行设置，用#+属性值进行设置。

css注释

css注释用/* */,快捷键是ctrl+/

6.css3选择器

6.1标签选择器

直接使用元素的标签名当做选择器，将选择该页面中所有该类型的标签进行样式设置

无论该标签位置深浅，都会被选择
标签选择器的覆盖面非常大，所以通用在标签的初始化

list-style：none：列表样式没有，功能是去掉无序列表的前缀

text-decoration：none：文本装饰没有，功能是去掉超链接的下划线

6.2id选择器

id属性：标签可以有id属性，是这个标签的唯一标识，所以id属性值不能重复

id的名称只能以字母、数字、下划线、短横构成，且不能以数字开头，字母区分大小写，但一般用小写字母。
同一个页面上不能有同样的id
css选择器使用id需要以井号**#**为前缀，加id名

6.3class选择器

class：类名的意思，通过给标签设置相同的class，是各种标签可以归为同一类

选择器使用**.前缀**+class属性值来定义一类的样式
class的命名规范与id的命名规范相同
多个标签可以为相同的类名
同一个标签可以属于多个类

6.4原子类

在网页项目前，先定义好各种常用的类，如常用字号、文字颜色、行高。外边距等等

当我们在写标签时，只需要通过设置多个类属性值，就能够得到想要的样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L1yIKqLZ-1632064271157)(C:/Users/女朋友/AppData/Roaming/Typora/typora-user-images/image-20210822101242324.png)]

6.5复合选择器

6.5.1后代选择器

后代标签不一定是儿子，也可以是孙子，重孙等等

后代选择器通过空格表示后代

6.5.2交集选择器

交集选择就是定义各条件都相交的部分，就是多个条件全都满足的标签，与关系

6.5.3并集选择器

只要满足一个条件的标签。，或关系

6.6伪类选择器

伪类是添加到选择器的描述性词语，指定要选择的元素特殊状态。

伪类就是不需要添加类名，已经规定好的一些规范类名
在css中冒号表示伪类

6.6.1a标签伪类

a标签伪类书写，要符合爱恨准则的顺序

link->visited->hover->active

6.7关系选择器

a>b:子选择器，就是选择a标签子标签是b的标签，只有子标签，孙子标签不算

a+b：相邻兄弟选择器，就是紧跟在a后面的b标签

a~b：通用兄弟选择器，a后面的同一级b标签都会被选中

6.8序号选择器

表达位置和序号的选择器

6.8.1：first-child

选择第一个子元素，要指定子元素是什么。

6.8.2：last-child

选择最后一个子元素，要指定子元素是什么。

6.8.3：nth-child()

选择任意序号的子元素

6.8.4：nth-of-type()

因为nth-child是按照子标签的顺序进行排序，而3号标签不是p所以该选择器就不会生效

所以我们可以使用nth-of-type(),他会按照前边的类型给子标签排序，这时序号为三的标签就是3号p标签。

6.8.5：nth-last-child和nth-last-of-type

就是不加last他就会从上往下排序号，加了之后就会从下往上排序号

总结

如果子标签前面没有定义是哪个盒子，那么任意盒子中满足条件的子标签都会生效

6.9属性选择器

通过属性选择标签

属性选择器：

alt：所有有alt属性的
=：等于
^=:以什么为开头
$=:以什么为结尾
*=：包含什么
~=:包含由空格隔开的什么
丨=：包含什么-的

6.10css3新增伪类

<html lang="en">
   <head>
       <meta charset="utf-8">
       <meta name="Keywords" content="css学习来啦">
       <meta name="Description" content="css的描述">
       <style>
           p{
               color: hotpink;
               border: 1px solid #000;
               width: 100px;
               height: 100px;
           }
           p:empty{
               border: rgb(130, 0, 61) 1px solid;
           }

           input:focus{
               background-color: lightcoral;
           }
           input:disabled{
               background-color: lime;
           }
           input:enabled{
               background-color: mediumblue;
           }

           .aaa:checked+span{
               color: mediumpurple;
           }





       </style>



   </head>
   <body>


       <div>
           <p></p>
           <p>aaa</p>
           <p>bbb</p>
           <p></p>
       </div>
       

           <form action="">
               <input type="text">
               <input type="text" disabled>
               <input type="text">
               <input type="text">
               <input type="text">

               <p>
                   <input class="aaa" type="checkbox" name="aaa" id=""><span>aaa</span> 
                   <input class="aaa" type="checkbox" name="aaa" id=""><span>bbb</span> 
                   <input class="aaa" type="checkbox" name="aaa" id=""><span>ccc</span> 
                   <input class="aaa" type="checkbox" name="aaa" id=""><span>ddd</span> 
               </p>
           </form>

      
       
       
       
   </body>


</html>

效果

6.11伪元素

::before

::before:在所有符合条件的标签之前加内容，内容需要用引号引出来

::after

::after:在所有符合条件的标签之后添加内容

::selection

::selection:应用于文档中被用户高亮的的位置（使用鼠标圈选的部分），可以设置选中文字的样式。

::first-letter

::first-letter：会选中某元素中（必须是块级元素）第一行的第一个字母

:first-line

:first-line:会选中某元素中第一行全部文字

6.12层叠性和选择器权重计算

层叠性

css全名为：cascading style sheet层叠式样式表，层叠性是他的重要性质

层叠性：多个选择器选择器可以同时作用于同一个标签，效果叠加

层叠性的冲突处理

权重：id选择器>class选择器>标签选择器

复杂选择器的权重计算

复杂的选择器：需要分别计算该选择器中id选择器，class选择器，标签选择器的个数，最终算出一个集合：(id选择器个数，class选择器个数，标签选择器个数)

！important

提升权重，哪个样式属性想要提升他的权重，就在其后边添加一个！important

7.css3文本与字体属性

7.1常用文本样式属性

7.1.1color

color：color属性可以设置文本内容的前景色

color属性主要可以应用英语单词、十六进制、rgb()、rgba()等表示方法。

7.1.1.1十六进制表示法

l代表浅色，b代表深色

color十六进制表示法：#ff0000，前两位表示红的占比，中间两位表示绿色的占比，后两位表示蓝色的占比。

#ff0000:纯红色

#000：黑色

#fff：白色

#ccc：灰色

#333：灰色

#2f2f2f:灰色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4DRekjHt-1632064271189)(C:/Users/女朋友/AppData/Roaming/Typora/typora-user-images/image-20210823205856465.png)]

7.1.1.2：rgb表示法

rgb：red green blue表示法，每个颜色的范围为0-255

表示方式：rgb（255,0,0）

7.1.1.3：rgba表示法

rgba：red

7.1.2font-size

font-size属性用来设置字号，单位默认为px

7.1.3font-weight

font-weight：字体粗细程度，normal默认粗细，bold加粗，lighter更细，bolder更粗

7.1.4font-style

font-style：字体样式

7.1.5text-decoration

text-decoration：文本修饰线

7.2常用字体样式属性

7.2.1font-family

font-family：设置字体样式，比如宋体、黑体、楷体等等

可以用逗号设置多个字体，而网页会自动使用第一个字体，后边的字体作为备用字体

7.2.2定义新字体

1.自定义字体用@font-face在head标签中定义

2.可以到阿里巴巴普惠字体下载

3.复制引用地址

注意：自定义字体只会生成你输入的文字，没输入的文字不会生效

7.3段落和行相关属性

7.3.1text-indent

text-indent：文本缩进字符

7.3.2line-height

line-height：行高

7.3.3单行文本垂直居中

因为文字会在行里垂直居中，所以将文字的行高设定为与盒子高度一致时，文本就垂直居中了。

text-align：center文本水平居中，缩写tac

7.3.4font属性合写

7.4继承性

与文本相关的属性都具有继承性，只需要给祖先标签设置样式，后代就会继承。

与文本相关的都有：

color
font开头的
list开头的
text开头的
line开头的

因为文字相关属性有继承性，所以那些整体需要整齐划一的属性，就可以通过在body中设置，就能够实现全局统一。

就近原则

在继承的情况下，选择器权重计算失效，遵循就近原则

当有两个选择器，一个选择器是通过继承给另一个标签赋值，另一个选择器是直接指定该标签赋值，这时无论被继承的选择器权重有多大，都会使用第二个选择器，因为他选中该标签
当所有选择器都没指定该标签，而对该标签都只是有继承性的话，就要看该标签离哪个标签近，就继承哪个这就是就近原则。

就近原则，选中该标签就是最近的，不选中就看哪个能继承的选择器离得近
继承选择器的权重可以看做是0，权重远远没有选中的大

情况：

多个选择器指定到一个标签，比权重
一个选择器指定到标签，其他都是继承给标签，选指定
多个选择器都是继承给标签，没有选中的，比就近原则

8.css3盒模型

8.1什么是盒模型

所有的html标签都可以看成矩形盒子，由width、height、padding、border构成，称为“盒模型”

width和height是表示的文本的宽高，不是盒子的宽高

盒子的总宽度是width+左右padding+左右border
盒子的总高度是height+上下padding+上下border

边框border的使用？

border属性的设置：宽度+实线虚线+边框颜色。

8.2padding属性

padding：内边距，padding有上下左右四个方向，四个方向都可以通过小属性来单独设置。

paading-：

top：上边距
right：右边距
bottom：下边距
left：左边距

padding属性同时设置上右下左：

上右下左之间用空格隔开，每个数值是px为单位的。

格式：padding：上右下左

格式二：padding：上左右下

上下分开，中间左右的数值为同一个，即左右padding相同时这样设置。

格式三：padding：上下左右

用两个数值来定义，第一个数值表示的上下的内边距，第二个数值表示左右的内边距。

格式四：padding：上下左右

当上下左右内边距一致时，可以用一个数值来设置

灵活设置padding属性

总结：

padding后面跟的属性值个数？

1个，表示上下左右都为该数值
2个，表示上下为第一个数值，左右为第二个数值
3个，表示上为第一个数值，左右为第二个数值，下为第三个数值
4个，分别表示上右下左的数值

如果用一个padding设置四个数值，哪个方向不想设置内边距，一定要写上0。

在实际工作中，一定要灵活设置属性，如果四个内边距中，三个都一致，可以先将所有的内边距都设置为这个值，再单独拎出不是这个值得边单独设置。

8.3margin属性

margin：外边距，盒子的外边距就是指该盒子到另一个盒子的距离，margin同样有四个小属性：

top：上外边距，“向上踹”
right：右外边距,“向右踹”
bottom：下外边距，“向下踹”
left：左外边距，“向左踹”

8.3.1margin的塌陷

竖直方向：margin有塌陷现象，就是说如果上边盒子的下方有外边距，而下边盒子的上方也有外边距，那么就要对比这两个外边距哪个大，就用大的数值作为两个盒子之间的外边距，而不是两个外边距相加。

8.3.2默认的margin

在网页设计过程中，一些元素有默认的margin，如（body，p，ul等标签），在喀什网页制作时，我们应该将它清除。

通配符*可以选中所有的选择器，但是影响效率

8.3.3盒子的水平居中

盒子的水平居中通过margin属性来设置：

margin：0 auto；就是说盒子上下的外边距是0，左右的外边距自动实现，最终实现根据页面大小自动居中的效果。

总结：

margin有几个小属性：top、right、bottom、left
margin的应用与padding的应用相同也能够用一个margin设置上下左右四个方向的内边距
margin的上下外边距遵循塌陷原则，就是说如果上下两个盒子都有上下外边距的时候，他们两个之间的距离是较大的外边距的距离，而不是两个外边距相加
margin的左右外边距符合相加原则两个盒子的距离是两个外边距的相加。
有些标签在创建时会有默认的margin和padding值，所以在网页创建之前应该先将这些默认值设置为0
margin能够设置盒子水平居中，通过margin：0 auto；属性值设置
文本居中是使用的text-align：center；属性值设置，两者要区分开

8.4盒模型计算

我们在标签css属性中定义的宽度和高度，是留给内容的宽度，就是留给孩子们的面积。

父盒子里能够放多个子盒子
需要注意的是所有子盒子占用的空间不能超过父盒子提供的空间
子盒子的占用空间计算为：
- 占用的宽：width+左右padding+左右border+左右margin
- 占用的高：height+上下padding+上下border+上下margin

8.5box-sizing

box-sizing：border-box；属性。

在没有设置box-sizing：border-box；属性时，我们设置完width和height后，是盒子中的文本宽高，再增加border和padding，是向外扩展的。
设置了box-sizing：border-box；属性后，设置的长宽是盒子本身的长宽，再设置border和padding，会内缩。

主要区别：

没设置前：
- width和height设置的是盒子内的可使用宽高
- 设置padding和bolder会在width/height的基础上扩张
设置后：
- width和height设置的是盒子的真实宽高
- 设置padding和bolder会在width/height的基础上收缩，width减去padding和bolder值才是剩下的真正内可用空间

8.6display

区别

行内元素：

多元素可共占一行
设置宽高无效
width和height随着内容自动收缩

块级元素：

各元素独占一行
能设置宽高
width自动撑满整行

行内块：

也称为特殊的行内元素
多个行内块能够在同一行
行内块还可以设置宽高

8.6.1行内元素和块级元素的转换

display：inline：将元素转为行内元素
display：block：将元素转为块元素
display：inline-block：将元素转为行内块元素

使用场景：

display：inline不常用

display：block：当行内元素想要设置宽高，且让他独占一行时，可以使用block

display：inline-bloock：当行内元素设置padding影响到其他元素时，就可以转为行内块元素

9.css浮动与定位

9.1浮动

浮动的最本质功能：用来实现并排。

使用float属性，可以设置浮动的方向，上右下左。

要浮动的都浮动，不能只浮动某一个
想要实现并排，父盒子必须有足够的宽度，否则就会有子盒子掉到下一行

9.2浮动的顺序贴靠特性

浮动的顺序贴靠特性：

如果一个盒子并排浮动到前一个盒子的后面，会超出父盒子的宽度，那么它就会找兄弟盒子的再前面一个盒子，看再前面的盒子后面是否能放下他，如果能放下就在这个盒子后面，如果放不下，就再往前找。

float属性后的标签就区分区块元素和行内元素了
span、a标签这些元素本来是不能设置宽度和高度的，但是当它设置了浮动样式属性后，它就能设置宽度和高度了。

9.3right和left

float：left：就是盒子序号从前往后向左贴靠

float：right：就是盒子序号从前往后向右贴靠，前边的先贴靠

9.4浮动实现网页布局

注意事项：

垂直显示的盒子，不设置浮动，并排显示的盒子，才设置浮动
大盒子带着小盒子跑，大盒子之间的浮动不代表这两个大盒子中的小盒子也互相浮动
每个大盒子之间又可以划分很多小盒子

盒子划分代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 初始化页面 */
    *{
        margin: 0;
        padding: 0;
    }
    ul,ol{
        list-style: none;
    }
    header{
        width: 600px;
        height: 70px;
        margin: 0 auto;
        
    }
    section{
        width:600px;
        height: 400px;
        margin: 0 auto;
        margin-top: 20px;
    }
    footer{
        width:600px;
        height: 100px;
        background-color: #333;
        margin: 0 auto;
        margin-top: 20px;
    }
    .logo{
        float: left;
        width: 200px;
        height: 70px;
        background-color:antiquewhite;
    }
    .login{
        float: right;
        width: 150px;
        height: 20px;
        background-color:rgb(128, 101, 66);
    }
    nav{
        float: right;
        width: 350px;
        height: 30px;
        background-color:indianred;
        margin-top: 20px;
    }
    .mainleft{
        float: left;
        height: 400px;
        width: 200px;
        background-color: khaki;

    }
    .mainright{
        float: right;
        height: 400px;
        width: 380px;
    }
    .pics{
        height: 300px;
        width: 380px;
        background-color: lightseagreen;
    }
    .rol{
        height: 90px;
        width: 380px;
        margin-top: 10px;
        background-color: magenta;
    }
    ul li{
        float: left;
        width: 85px;
        height: 90px;
        background-color: mediumvioletred;
        margin-right: 10px;
    }
    li:last-child{
        width: 95px;
        margin-right: 0;
    }

    
    </style>
</head>
<body>
    <!-- 顶部盒子底色 -->

    <header>
        <div class="logo"></div>
        <div class="login"></div>
        <nav></nav>

    </header>
    <!-- 内容盒子 -->
    <section>
        <div class="mainleft"></div>
        <div class="mainright">
            <div class="pics"></div>
            <div class="rol">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>

    </section>
    <!-- 底部盒子 -->
    <footer>

    </footer>
</body>
</html>

9.5BFC规范

BFC（Box Formatting Context）：块级格式化上下文

当父盒子没有形成bfc时，如果父盒子不设置高度，子盒子浮动时，就会产生fu盒子高度为0的状况。

如何创建BFC？

将父盒子也设置不是none的float值
将父盒子转为inline-block元素
用postion：absolute使盒子形成定位
设置overflow：hidden

9.6Overflow属性

Overflow：hidden；溢出隐藏属性，溢出盒子边缘的内容将被隐藏，

overflow：hidden是非常好用的让盒子实现BFC的方法
当盒子里的内容溢出到盒子边框外时，就会被隐藏，注意是边框外，不是内边距外。

9.6浏览器差异

9.7清除浮动

浮动一定要封闭到一个盒子中，否则会对后续元素产生影响

清除浮动方法：

让内浮动的盒子的父盒子形成BFC，使用overflow：hidden；属性
给后面的父盒子设置clear：both，清除浮动对自己的影响，both是左右都清除
给每个大盒子添加一个类名，通过类名+::after属性设置clear：both；并且保证这些大盒子都是块级元素
在两个盒子之间隔一个墙，这个墙属性中包含clear：both属性，而设置两个盒子的间距，需要用墙作为这个间距，不能使用margin

9.8相对定位

**相对定位：**盒子可以相对自己原来的位置进行位置调整，称为相对定位

position：relative；定位相对，

top：从上向下移动的位置
left：从左向右移动的位置
bottom：从下向上移动
right：从右向左移动

值可以是负数，就是往规定的方向相反移动

9.8.1相对定位的性质

相对定位会在老家留坑，新位置可以看做只是原位置的影子

9.8.2相对定位的用途

相对定位用来微调元素位置

相对定位的元素，可以当做绝对定位的参考盒子

9.9绝对定位

绝对定位：盒子可以在浏览器中以坐标进行位置的精准描述，拥有自己的绝对位置。

使用position：absolute；属性做绝对定位

绝对定位与相对定位不同的是：

relative：存在上下左右四个属性可以定位

absolute：以两个方向决定一个二维坐标轴的起始点

绝对定位会丢弃原来的位置，真正的位置是新位置，相对定位不会扔掉原来的位置，相对的位置指示原来位置的影子。

9.9.1绝对定位脱离标准文档流

9.9.2绝对定位的参考盒子

子绝父相：当子盒子中有绝对定位时，他会先去寻找他父元素是否有相对定位属性，如果有的话，就以父盒子边框点作为坐标轴，如果没有，就再去找上一级，如果发现祖先盒子都没有相对定位，才会找网页作为坐标轴。
父盒子不需要相对定位的位置属性，只需要设置position：relative；就可以了。

9.9.3绝对定位的盒子垂直居中

绝对定位的垂直居中非常实用

position：absolute；
top：50% ：就是向下移动父盒子高度的一半
margin-top：-自己高度的一半；上边移动的一半是以子盒子顶部移动的，所以还需要向上调自己高度的一半。
left：50%：水平居中，同上同理
margin-left：-自己宽度的一半，同上同理
使用了绝对定位垂直居中后，就不能使用margin：0 auto水平居中了，因为盒子已经脱离了文档流，呈现在比之前更高一层的层级上

9.10堆叠顺序属性

z-index：数值越大的盒子就越显示到上面，就是将网页看成一种层级关系的页面，一层叠一层。

在html中如果两个属性出现交叠关系，那么默认的就是后出现的标签盒子会盖住先出现的标签盒子，子标签盒子会盖住父标签盒子。
通过使用z-index设置数值大小后就能够决定哪个盒子在上边，改变默认的层级关系。

9.11固定定位

不管页面如何卷动，都永远固定在那里。

固定定位只能以页面为参考点，没有子固父相这个概念
固定定位脱离标准文档流。
固定定位的用途，返回顶部，楼层导航等
固定定位的盒子应该放在其他盒子中，否则无法显示出来。

10.css边框与圆角

10.1边框的三要素

border：边框，由三个要素组成

线宽度
线颜色
线型
- solid：实线
- dashed：虚线
- dotted：点状线

-width:线宽度

-style：线形式

-color：线颜色

单一小属性的权重比大属性的权重高，可以帮助你层叠大属性。

-top：上边框

-right：右边框

-bottom：底部边框

-left：左边框

none：去掉一方的边框

四个边框每个又可以划分为三要素的小属性。一共可以细分为12个小属性。

border-top-color：上边框颜色
border-right-color：右边框颜色
border-bottom-style：下边框的样式
border-left-width：左边框宽度

如何用边框做三角形？

1.将边框设置一个较大的宽度。

2.使盒子的宽高均为0。

3.使用transparent透明色替代之前border设置的颜色。

3.用border-方向-color：显示一方的边框。这样三角形就做出来了

10.2border-radius

border-radius：边框半径，用来设置边框角变圆的程度

-radius：半径，属性值单位为px

百分比如：20%：相当于按照每条边长度的20%
50%：如果盒子是正方形则表现为圆形，如果盒子是长方形则表现为椭圆形。

-top-left-radius：左上角半径

-top-right-radius：右上角半径

-bottom-left-radius：左下角半径

-bottom-right-radius：右下角半径

设置一个值：四个边框变圆程度相同

设置四个值：分别表示左上，右上，左下，右下的角的变圆程度

10.3box-shadow

box-shadow：盒子阴影。

当盒子有四个值时：box-shadow：10px 20px 30px rgb（0,0,0，.5）

第一个值：x偏移量
第二个值：y偏移量
第三个值：模糊量
第四个值：字体的颜色

阴影延展

当盒子有五个值时：box-shadow：10px 20px 30px 40px rgb(0,0,0,.5)

在第三个值和第四个值之间再加一个值，这个值就是延展值，延展值会向四周扩散阴影。

内阴影

在初始阴影的基础之上，添加一个inset标签。

多阴影

box-shadow属性值可以用逗号隔开多个，表示携带多个阴影。

11.css背景颜色

11.1background-color

背景颜色：background-color：

1.盒子的padding和内容区域会被背景颜色渲染。

11.2background-img

背景图片：background-img：url（）

背景图片的内容可以是相对路径，也可以是http://开头的绝对路径
如果样式表是外链的，那么url内的相对路径是从css触发到图片的路径，而不是从html触发的路径。
当盒子大小大于图片后，图片就会产生平铺的现象。

11.3背景图片的重复模式

background-repeat：背景图片的重复模式

repeat：x、y方向均平铺（默认的）
repeat-x：x平铺
repeat-y:y平铺
no-repeat：没有平铺

11.4background-size

background-size：

宽度高度：指定盒子的宽度和高度
%50 auto：宽度为盒子的%50，高度等比例自动调整
contain：将图片智能改变尺寸以容纳到盒子中
cover：将图片智能改变尺寸以撑满盒子

11.5背景裁切

background-clip：

border-box：裁切到边框区域
padding-box：裁切到padding区域
context-box：裁切到内容区域

11.6背景固定

background-attachement：背景附属

fixed：固定，
scroll：滚动
local:本地

11.7背景图片定位

background-position：背景定位

100px 150px：说明背景图片出现在盒子距左100px，距上150px的位置
center center：背景图片出现在盒子水平、垂直都居中的盒子位置
bottom center：背景图片出现在盒子垂直向下、水平居中的盒子位置

background-position属性有五个方位值：上下左右中，可以通过两两搭配实现五个方位的定位

11.8css精灵技术

css精灵：将多个小图标合并制作到一张图片上，使用background-position属性单独显示其中一个，这样的技术叫做css精灵技术，也叫作css雪碧图

css精灵可以减少http请求数，加快网页显示速度。

**缺点:**不方便测量、后期改动麻烦。

应用：

一个图片中存放多个图标，用图片处理工具得到一个图标的位置以及宽高，在html中通过background-position：来进行图片定位。

首先通过宽高能够获取该图片左上脚的一片区域
然后通过-左值 -距离上方的值，注意必须是-值。
为什么是负值呢以为background-position：两个值分别表示的是图片距离边框的左边框和上边框的值，所以两个值是图片在边框中的移动，图片向右移是正值，向下移也是正值，反之向左，上移就需要负值。

11.9background综合属性

一些常用的背景相关小属性，可以合写到一个属性中。

background：white url（images/archer.png） no-repeat center center;

11.10线性渐变

background-image：

linear-gradient：线性渐变

linear-gradient：（toright,blue，red）:从左到右，从蓝变红

linear-gradient：(toright, blue, yellow %20,red):黄色出现在%20的位置

linear-gradient：(45deg,blue,red):45度角从左到右，从蓝色渐变为红色

11.11浏览器私有前缀

不同的浏览器有不同的私有前缀，用来实验性质的css加以标识。

11.12径向渐变

background-image：

radial-gradient():镜像渐变

radial-gradient（50% 50%，red，blue）

12.css变型

12.1css旋转变型

css旋转变型使用transform属性，将transform属性值设为rotate，后面可以跟旋转角度。

transform：变型

rotate：旋转

transform：rotate（45deg）；旋转角度，正数顺时针旋转，负数逆时针旋转。

transform-origin

transform-origin：旋转原点，如果不设置该值默认是中心为原点旋转，设置了该值，通过长度和宽度的百分比来定位。

transform-origin：0 0；左上角为原点

transform-origin：0 100%；左下角为原点

12.2css缩放变型

transform：scale（）；缩放变型属性

scale里面跟的是一个没有单位的数值

当数值大于1时是放大图片，小于一时是缩小图片。

12.3css斜切变型

transform：skew（）；斜切变型

skew：斜切

12.4css位移变型

transform：translate（）；位移变型

100px 200px：向下位移100px，向右位移200px

12.5 3D旋转

3d旋转使盒子有xyz三个方向

rotateX：按盒子高度一半的横轴为x中心轴进行图片的旋转
rotateY：按盒子宽度一半的竖轴为y中心轴进行图片的旋转
rotateZ：与rotate功能相同，以盒子中点为圆点进行旋转，实际是2D旋转

注意：如果想实现图片的3D旋转，就需要将图片放到一个父盒子中，父盒子需要设置一个perspective：透明强度属性，属性值为px，表现为盒子的立体强度。

13.css过渡

13.1transition

transition:过渡

过渡可以为一个元素在不同样式之间变化自动添加补间动画
只需要定义开始状态和结束状态，补间动画会被自动添加

13.2兼容性

过渡从IE10开始兼容，移动端兼容良好
曾经，网页上的动画特效基本是由javaScript定时器实现的，现在逐步改为使用css3过渡
优点：动画更细腻，内存开销小

13.3transition属性的基本使用

transition属性的4个要素
- 第一个值：什么属性要过渡，比如width、height、border等等。
- 第二个值：转换动画的时长，比如1s、5s。
- 第三个值：变化速度和曲线
  - linear：匀速
- 第四个值：延迟时间，动画经过多少秒的秒数才开始，0s就是立即开始，单位s不能不写。

13.4哪些属性可以参与过渡

所有数值类型的属性的，都可以参与过渡，比如：

height、left、top、border-radius
属性值含有英语单词的属性不能够参与过渡
背景颜色和文字颜色都可以过渡
所有变形（2D变形，3D变形）都可以被过渡

13.5all属性

如果想让所有的属性都参与过渡，就将第一个值写成all既可。

13.6过渡的四个小属性

过渡存在四个小属性：transition：过渡

-property：属性，哪个属性需要过渡

-duration：动画时间，就是过渡过程的时长

-timing-function：动画变化曲线（缓动效果），比如匀速还是先快后慢

-delay：延迟时间，几秒后开始

13.7过渡的速率

transition-timing-function：

linear：线性，匀速
ease：两头慢，中间快
ease-in：开始慢，越来越快
ease-out：开始快，越来越慢
ease-in-out：两头慢，中间快，比ease平缓

14.css3动画

14.1动画的定义

@keyframes：用来定义动画，keyframes表示关键帧，在项目上下前要补上@-webkit-这样的私有前缀。

动画定义过程：

首先要在style标签中定义一个@keyframes + 动画名的选择器
用form定义动画的起始状态
用to定义动画的结束状态

14.2动画的调用

动画的定义结束后，我们可以使用animation，animation是动画定义的意思，

animation与transition属性同样有四个值，但是含义稍微有所不同。

想要在哪里调用，就在哪个盒子选择器中定义该属性即可。

第一个值：动画的名字
第二个值：动画执行的时间
第三个值：动画执行的速率
第四个值：动画执行前的延迟时间
第五个值：动画的执行次数，数值不需要单位
- infinited：无限的运行动画
第六个值：动画的执行方向
- alternate：无限运行的动画偶数次自动逆向执行

如果想让动画停止在结束状态而不是按原路返回，就加上forwards

14.3多关键帧动画

在keyframes中的定义，使用百分号设置时间总长的百分比，实现多种状态的跳转。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes rotate{
            from{
                transform:rotate(0deg);
            }
            to{
                transform:rotate(365deg);
            }
        }
        @keyframes translate{
            from{
                transform: translateX(0px);
            }
            to{
                transform: translateX(1000px) ;
            }
        }
        @keyframes moreKeyFrames{
            0%{
                background-color: red;
            }
            20%{
                background-color: orange;
            }
            40%{
                background-color: palegoldenrod;
            }
            60%{
                background-color: palegreen;
            }
            80%{
                border-color: paleturquoise;
            }

        }
        @keyframes changeToCircle{
            from{
                border-radius: 0px;
            }
            to{
                border-radius: 50px;
            }
        }


        .rotate{
            width: 100px;
            height: 100px;
            animation: rotate 2s ease 0s infinite alternate;
            background-color: bisque;
            margin: 50px auto;


        }
        .translate{
            width: 100px;
            height: 100px;
            background-color: burlywood;
            animation: translate 2s ease 0s infinite alternate forwards;
        }
        .moreKeyFrames{
            width: 100px;
            height: 100px;
            
            animation: moreKeyFrames 5s ease 0s infinite alternate forwards;
        }
        .changeToCircle{
            width: 100px;
            height: 100px;
            background-color: peachpuff;
            border: 1px solid #333;
            animation: changeToCircle 3s ease-in-out 0s forwards;
        }
    </style>
</head>
<body>
    
    <div class="rotate">旋转盒子</div>
    <div class="translate">移动盒子</div>
    <div class="moreKeyFrames">多关键帧换色</div>
    <div class="changeToCircle">变成圆</div>
</body>
</html>

15.css字体图标

1.字体图标在阿里巴巴的iconfont.cn网址中

2.选择自己需要的字体

3.下载代码

4.将下载的代码放到项目fonts文件中

5.根据demo中的提示实现使用

16.css常用样式效果

16.1.单行文字超出显示…

溢出隐藏:overflow：hidden;

文字隐藏的方式…:text-overflow:ellipisis;

不让换行：white-space:nowarp;

16.2.多行文字超出显示…

        div{
            width: 50px;
            border: 1px solid red;
            overflow: hidden;
            /* 溢出部分用...显示 */
            text-overflow: ellipsis;
            /* 老版本的flex */
            display: -webkit-box;
            /* 控制截止到哪一行显示。。。 */
            -webkit-line-clamp: 5;
            /* 控制主轴方向是垂直的 */
            -webkit-box-orient: vertical; 
        }

16.3.禁止用户选中文字怎么做？

        body {
            user-select: none;
        }

16.4单词间距如何设置？

letter-spacing：10px；字符与字符之间的距离
word-spacing： 10px; 单词与单词之间的距离，以空格为准
- 如果是中文想让汉字与汉字之间有距离，需要在汉字之间加空格

16.5filter属性相关参数

        img{
            /* 图片模糊度 */
            filter:blur(30px);
            /* 图片明暗程度 */
            /* 全暗 */
            filter: brightness(0);
            /* 全明 */
            filter: brightness(1);
            /* 控制图片灰度 ,1表示全灰，0表示全不灰*/
            filter: grayscale(1);
            /* 控制图片色相饱和度 */
            filter: hue-rotate(45deg);
            /* 取图片反色 ,默认为0,取反色用1*/
            filter: invert(1);
        }

16.6圣杯布局？

三个兄弟盒子，main,left，right,left、right宽度固定,main宽度随着屏幕宽度变化
把main放到最上面，为的是优先加载
给body加padding，左右空出一定的固定内边距
三个盒子全左浮动
给left设margin-left：-100%；相对定位，再向左移固定宽度像素
给right设margin-left:-固定宽度;相对定位，再向右移固定宽度像素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
        .box{
            height: 300px;
            padding: 0 200px;
        }
        .box>div{
            height: 100%;
            float: left;
        }
        .main{
            width: 100%;
            
            background-color: cornflowerblue;
        }
        .left{
            width: 200px;
            background-color: cornsilk;
            margin-left: -100%;
            position: relative;
            left: -200px;
            top: 0;

        }
        .right{
            margin-left: -200px ;
            width: 200px;
            background-color: crimson;
            position: relative;
            left: 200px;
            top: 0;
        }
    </style>
</head>
<body>
    
    <div class="box">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

16.7双飞翼布局？

三个兄弟盒子，main有一个子盒子inner,left，right。main、left、right宽度固定，inner随着宽度变化而变化
把main放到最上面，为的是优先加载
给main加padding，左右空出一定的固定内边距
三个盒子全左浮动
给left设margin-left：-100%；
给right设margin-left:-固定宽度;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .box{
            height: 300px;
        }
        .box>div{
            height: 100%;
            float: left;
        }
        .main{
            width: 100%;
            padding: 0px 200px;
            background-color: crimson;
            box-sizing: border-box;
        }
        .inner{
            width: 100%;
            background-color: darkcyan;
            height: 100%;
        }
        .left{
            width: 200px;
            margin-left: -100%;
            background-color: rgb(40, 184, 11);
        }
        .right{
            width: 200px;
            margin-left: -200px;
            background-color: darkorange;
        }
    </style>
</head>
<body>
    
    <div class="box">
        <div class="main">
            <div class="inner">inner</div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>