保姆级教程 CSS 知识点梳理大全,超详细!!!

保姆级教程 CSS 知识点梳理大全,超详细!!!

✴️大家好,我是王同学,好久不见,趁着假期王同学把CSS 知识点梳理了一遍
✴️如果对你有帮助就给我点个赞吧,这样我们就互不相欠了
✴️星光不负赶路人,所有的幸运都来自于坚持不懈的努力,大家一起加油吧

一、前端三层

保姆级教程 CSS 知识点梳理大全,超详细!!!_第1张图片

二、CSS的书写位置

(一)、内嵌式

  • 内嵌式,顾名思义,内嵌在.html文件中
  • 标签中,书写 标签对,里面书写CSS语句。

保姆级教程 CSS 知识点梳理大全,超详细!!!_第2张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第3张图片

(二)、外链式

  • 可以将CSS单独存为.css文件,然后用link标签引入它

  • 外链式的优点:多个HTML文件,可以共用一个CSS样式表文件

保姆级教程 CSS 知识点梳理大全,超详细!!!_第4张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第5张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第6张图片
在这里插入图片描述

(三)、 导入式

导入式是最不常见的样式表导入方法,使用导入式引入文件,不会等待CSS文件加载完毕,而是会立即渲染HTML结构

保姆级教程 CSS 知识点梳理大全,超详细!!!_第7张图片

(四)、行内式

行内式: 样式可以直接通过style属性写在标签上,行内式牺牲了样式表的批量设置样式的能力,只能给一个标签设置样式,所以不常用。
保姆级教程 CSS 知识点梳理大全,超详细!!!_第8张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第9张图片

三、CSS选择器

首先我们来介绍传统的CSS2.1 选择器

(一)、标签选择器

标签选择器:又称元素选择器,类型选择器,它直接使用元素的标签名当做选择器,将选择页面上所有的标签

保姆级教程 CSS 知识点梳理大全,超详细!!!_第10张图片

标签选择器将选择页面上所有该种标签,无论这个标签所处位置的深浅

保姆级教程 CSS 知识点梳理大全,超详细!!!_第11张图片
标签选择器的覆盖面非常大,所以通常用于标签的初始化
保姆级教程 CSS 知识点梳理大全,超详细!!!_第12张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第13张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第14张图片

(二)、id选择器

  • 标签可以有id属性,它是这个标签的唯一标识
  • id的命名只能由字母、数字、下划线、短横线构成,且不能以数字开头,字母区分大小写,但习惯上一般为小写字母
  • 同一个页面上不能有相同的id标签
  • CSS选择器可以使用#井号选择指定的id标签

保姆级教程 CSS 知识点梳理大全,超详细!!!_第15张图片

(三)、类选择器

  • class属性表示类名
  • 类名的命名规范和id的命名规范相同
  • 我们使用点.前缀来指定class的标签
  • class类名十分灵活,多个标签可以为相同的类名
  • 同一个标签可以同时属于多个类,类名用空格隔开

保姆级教程 CSS 知识点梳理大全,超详细!!!_第16张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第17张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第18张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第19张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第20张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第21张图片

在开发中我们也用到过原子类,这里简单的介绍一下

(四)、原子类

  • 在做网页前、可以将所有的常用字号、文字颜色、行高、外边距、内边距等都设置为单独的类。

  • 在HTML标签就可以“则需选择”它的类名,这样可以非常快速的添加一些常见的样式

保姆级教程 CSS 知识点梳理大全,超详细!!!_第22张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第23张图片

<style>
        .fs18 {
     
            font-size: 18px;
        }
        
        .fs20 {
     
            font-size: 20px;
        }
        
        .fs22 {
     
            font-size: 22px;
        }
        
        .fs24 {
     
            font-size: 24px;
        }
        
        .fs26 {
     
            font-size: 26px;
        }
        
        .color-blue {
     
            color: blue;
        }
        
        .color-red {
     
            color: red;
        }
        
        .color-orange {
     
            color: orange;
        }
        
        .color-pink {
     
            color: pink;
        }
        
        .color-purple {
     
            color: purple;
        }
    </style>
</head>

<body>
    <p class="fs18 color-blue">好好学习 天天向上</p>
    <p class="fs20 color-red">好好学习 天天向上</p>
    <p class="fs22 color-orange">好好学习 天天向上</p>
    <p class="fs24 color-pink">好好学习 天天向上</p>
    <p class="fs26 color-purple">好好学习 天天向上</p>

</body>

保姆级教程 CSS 知识点梳理大全,超详细!!!_第24张图片

(五)、复合选择器

保姆级教程 CSS 知识点梳理大全,超详细!!!_第25张图片

后代选择器

保姆级教程 CSS 知识点梳理大全,超详细!!!_第26张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第27张图片

交集选择器

保姆级教程 CSS 知识点梳理大全,超详细!!!_第28张图片

并集选择器

并集选择器也叫做分组选择器,逗号表示分组

保姆级教程 CSS 知识点梳理大全,超详细!!!_第29张图片

(六)、伪类选择器

伪类是添加到选择器的描述性词语,指定要选择的元素的特殊状态,超级链接拥有4个特殊的状态
保姆级教程 CSS 知识点梳理大全,超详细!!!_第30张图片

a 标签的伪类书写,要按照“爱恨准则”的顺序,否则会有伪类不生效的问题

保姆级教程 CSS 知识点梳理大全,超详细!!!_第31张图片

    <style>
        a:link {
     
              color: rgb(255, 0, 242);
        }
        
        a:visited {
     
            color: red;
        }
        
        a:hover {
     
            color: pink;
        }
        
        a:active {
     
            font-size: 40px;
            color: green;
        }
    </style>
</head>

<body>
    <p>
        <a href="http://www.baidu.com"> 百度</a>
    </p>
    <p>
        <a href=" http://www.jd.com"> 京东</a>
    </p>
    <p>
        <a href="http://www.taobao.com"> 淘宝</a>
    </p>
    <p>
        <a href="http://www.jd.com"> 慕课</a>
    </p>
</body>

![在这里插入图片描述](https://img-blog.csdnimg.cn/866c6e88022c4c288f3ee78a8b74c6e0.png?x-oss-process=image/watermark,type_ZHJ

(七)、元素关系选择器

保姆级教程 CSS 知识点梳理大全,超详细!!!_第32张图片

(七)、子选择器

当使用 >符号分隔两个元素时,它只会匹配那些作为第一个元素的直接后代元素,即两个标签为父子关系

保姆级教程 CSS 知识点梳理大全,超详细!!!_第33张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第34张图片

(八)、相邻兄弟选择器

  • 相邻兄弟选择器(+)介于两个选择器之间,当第二个元素紧跟着第一个元素之后,并且两个元素都是属于同一个父元素的子元素,则第二个元素将被选中。
  • 说白了,a+b就是选择紧跟在a后面的一个b
    保姆级教程 CSS 知识点梳理大全,超详细!!!_第35张图片

(九)、通用兄弟选择器(~)

通用兄弟选择器(~),a~b选择a元素之后所有同层级b元素保姆级教程 CSS 知识点梳理大全,超详细!!!_第36张图片

(十)、序号选择器

保姆级教程 CSS 知识点梳理大全,超详细!!!_第37张图片

(十一)、:first-child

first-child表示选择第一个子元素,比如下面的例子就是表示选择.box盒子中的第一个p
保姆级教程 CSS 知识点梳理大全,超详细!!!_第38张图片

(十二)、:last-child

:last-child表示选择最后一个子元素,比如下面的例子
保姆级教程 CSS 知识点梳理大全,超详细!!!_第39张图片

(十二)、: nth-child()

: nth-child()可以选择任意序号的子元素
保姆级教程 CSS 知识点梳理大全,超详细!!!_第40张图片
:nth-child()可以写成 an+b的形式,表示从b开始每个a选一个

保姆级教程 CSS 知识点梳理大全,超详细!!!_第41张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第42张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第43张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第44张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第45张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第46张图片

 <style>
        .box p:first-child {
     
            color: red;
        }
        
        .box p:last-child {
     
            color: aqua;
        }
        
        .box p:nth-child(3) {
     
            color: orange;
        }
        
        .box p:nth-child(2n) {
     
            color: pink;
        }
        
        .box1 p:nth-child(2n+1) {
     
            color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
    </div>
    <div class="box1">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
    </div>

保姆级教程 CSS 知识点梳理大全,超详细!!!_第47张图片

(十三)、序号选择器的兼容性

保姆级教程 CSS 知识点梳理大全,超详细!!!_第48张图片

(十四)、属性选择器

保姆级教程 CSS 知识点梳理大全,超详细!!!_第49张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第50张图片

<!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>
        /* 
        [alt]  有这个属性
        [alt ="背景故宫"] 精准匹配
        [alt ^="abc"] 开头位置匹配
        [alt $="abc"]  结尾位置匹配
        [alt *="abc"]  任意位置匹配
        [alt |="abc"]    abc-开头
        [alt ~="abc"]  abc为空格分开的独立部分
        
        */
        
        img {
     
            width: 300px;
        }
        
        img[alt^="北京"] {
     
            border: 5px solid purple;
        }
        
        img[alt$="夜景"] {
     
            border: 5px solid rgb(236, 184, 12);
        }
        
        img[alt*="美"] {
     
            border: 5px solid rgb(52, 5, 138);
        }
        
        img[alt |="参赛作品"] {
     
            border: 5px solid rgb(224, 228, 9);
        }
        
        img[alt~="手机拍摄"] {
     
            border: 5px solid pink;
        }
    </style>
</head>

<body>
    <img src="images/bj/0.jpg" alt="北京故宫">
    <img src="images/bj/1.jpg" alt="北京鸟巢">
    <img src="images/bj/2.jpg" alt="北京十七孔桥">


    <img src="images/wx/0.jpg" alt="参赛作品-无锡体育场">
    <img src="images/wx/1.jpg" alt="手机拍摄 无锡太湖">
    <img src="images/wx/2.jpg" alt="无锡美景">
    <img src="images/wx/3.jpg" alt="无锡夜景">

</body>

</html>

保姆级教程 CSS 知识点梳理大全,超详细!!!_第51张图片

(十五)、CSS3新增伪类

保姆级教程 CSS 知识点梳理大全,超详细!!!_第52张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第53张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第54张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第55张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第56张图片
在这里插入图片描述
保姆级教程 CSS 知识点梳理大全,超详细!!!_第57张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第58张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第59张图片
在这里插入图片描述

在这里插入图片描述
保姆级教程 CSS 知识点梳理大全,超详细!!!_第60张图片

在这里插入图片描述
保姆级教程 CSS 知识点梳理大全,超详细!!!_第61张图片

在这里插入图片描述

(十六)、伪元素

CSS3新增了伪元素特性,顾名思义,表示虚拟动态创建的元素
伪元素用双冒号表示,IE8可以兼容单冒号

::before

::after

请添加图片描述

保姆级教程 CSS 知识点梳理大全,超详细!!!_第62张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第63张图片

(十七)、::selection

保姆级教程 CSS 知识点梳理大全,超详细!!!_第64张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第65张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第66张图片

(十八)、::first-letter和::first-line

保姆级教程 CSS 知识点梳理大全,超详细!!!_第67张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第68张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第69张图片

三、层叠性和选择器权重的计算

  • CSS全名叫做“层叠样式表”,层叠性是他很重要的性质
  • 层叠性:多个选择器可以同时作用于同一个标签,效果叠加
    保姆级教程 CSS 知识点梳理大全,超详细!!!_第70张图片
    如果多个选择器的定义有冲突呢?CSS有严密的处理规则

保姆级教程 CSS 知识点梳理大全,超详细!!!_第71张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第72张图片
在这里插入图片描述

复杂选择器的计算

复杂选择器可以通过(ID的个数,class的个数,标签的个数)的形式,计算权重
保姆级教程 CSS 知识点梳理大全,超详细!!!_第73张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第74张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第75张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第76张图片

四、文本与字体属性

(一)、常用的文本字体属性

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

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

  • 用英语单词表示法,比如:color:red;仅仅用于学习时临时设置一下颜色,工作时不用这样的形式,因为追求精确。

(二)、十六进制表示法

十六进制表示法是所有设计软件中常用的颜色表示方法,设计师给我们的设计上面标注的图标颜色,通常为十六进制
保姆级教程 CSS 知识点梳理大全,超详细!!!_第77张图片
在这里插入图片描述

保姆级教程 CSS 知识点梳理大全,超详细!!!_第78张图片

(三)、rgb() 表示法

保姆级教程 CSS 知识点梳理大全,超详细!!!_第79张图片

(四)、rgba()表示法

颜色可以使用rgba() 表示法,最后一个参数表示透明度,介于0-1之间,0表示纯透明,1表示纯实心
保姆级教程 CSS 知识点梳理大全,超详细!!!_第80张图片

(五)、font-size属性

font-size属性用来设置字号,单位为px 后面还会说到em和rem

网页文字正文字号通常是16px浏览器最小支持10px
保姆级教程 CSS 知识点梳理大全,超详细!!!_第81张图片

(六)、font-weight属性

  • font-weight属性设置字体的粗细程度,通常就用normal和bold两个值
    保姆级教程 CSS 知识点梳理大全,超详细!!!_第82张图片

(七)、font-style属性

作用:设置文字的倾斜

保姆级教程 CSS 知识点梳理大全,超详细!!!_第83张图片

(八)、text-decoration属性

text-decoration属性用于设置文本的修饰外观的(下划线,删除线)
保姆级教程 CSS 知识点梳理大全,超详细!!!_第84张图片

(九)、font-family属性

  • font-family属性用于设置字体的属性
  • 字体可以是列表的形式,一般英语字体放到前面,后面的字体是前面的字体的后备字体
  • 字体名称中有空格,必须要用引号来包裹
font-family:" 微软雅黑";
font-family: serif,"Times New Roman","微软雅黑";

保姆级教程 CSS 知识点梳理大全,超详细!!!_第85张图片

中文字体也可以称呼他们的名字

字体通常必须是用户计算机中已经安装好的字体,所以一般来说设置为微软雅黑和宋体的较多,设置成其他字体的较少
保姆级教程 CSS 知识点梳理大全,超详细!!!_第86张图片

问题一:如何设置为用户电脑中没有的字体呢?那就必须自己定义新的字体,这就需要我们有字体文件,当用户加载网页的时候,会同时下载这些字体

定义字体,当我们拥有以下字体文件之后,就可以使用@font-face定义字体

保姆级教程 CSS 知识点梳理大全,超详细!!!_第87张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第88张图片

(十)、阿里巴巴普惠体

阿里巴巴提供了一套免费商用授权的普惠字体,网址 https://www.iconfont.cn/webfont#!/webfont/index

使用阿里巴巴普惠字体也省去了下载的麻烦
保姆级教程 CSS 知识点梳理大全,超详细!!!_第89张图片

使用步骤:

下载字体—使用font-face声明字体—定义使用 webfont 的样式—为文字加上对应的样式

第一步:下载字体

保姆级教程 CSS 知识点梳理大全,超详细!!!_第90张图片

第二步:使用font-face声明字体(注意:在引用的时候要注意引用的路径哦)

保姆级教程 CSS 知识点梳理大全,超详细!!!_第91张图片

第三步:定义使用 webfont 的样式

保姆级教程 CSS 知识点梳理大全,超详细!!!_第92张图片

第四步:为文字加上对应的样式

在这里插入图片描述

保姆级教程 CSS 知识点梳理大全,超详细!!!_第93张图片

(十一)、text-indent属性

保姆级教程 CSS 知识点梳理大全,超详细!!!_第94张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第95张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第96张图片

(十二)、 line-height行高

  • line-height属性的单位可以是px为单位的数值
line-height:30px;
  • line-height属性的单位可以是 没有单位是数值,表示字号的倍数,这是最推荐的写法
line-height:1.5;
  • line-height属性也可以是百分数,表示字号的倍数
line-height:150%;

保姆级教程 CSS 知识点梳理大全,超详细!!!_第97张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第98张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第99张图片

(十三)、单行文本垂直居中

行高等于盒子的高度,设置单行文本垂直居中对齐
保姆级教程 CSS 知识点梳理大全,超详细!!!_第100张图片
设置text-align:center,即可实现文本水平居中

保姆级教程 CSS 知识点梳理大全,超详细!!!_第101张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第102张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第103张图片

(十四)、font合写属性

保姆级教程 CSS 知识点梳理大全,超详细!!!_第104张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第105张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第106张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第107张图片

(十五)、继承性

  • 文本相关的属性普遍具有继承性,只需要给祖先标签设置,即可在后代所有的标签中生效。
  • 因为文字相关的属性都有继承性,所以通常会设置body标签的字号、颜色、行高等、这样就能当做整个网页的默认样式了。

保姆级教程 CSS 知识点梳理大全,超详细!!!_第108张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第109张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第110张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第111张图片

(十五)、继承性的就近原则

在继承的情况下,选择器权重计算失效,就近原则
保姆级教程 CSS 知识点梳理大全,超详细!!!_第112张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第113张图片

五、盒子模型

(一)、什么是盒子模型

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

保姆级教程 CSS 知识点梳理大全,超详细!!!_第114张图片
在这里插入图片描述
保姆级教程 CSS 知识点梳理大全,超详细!!!_第115张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第116张图片

(二)、width属性

  • width属性表示盒子内容的宽度

  • width属性的单位通常是px,移动端开发也会涉及到百分数、rem等单位

  • 当块级元素(div 、h系列、li等)没有设置width属性时,它将自动撑满,但这并不意味着width可以继承
    在这里插入图片描述
    在这里插入图片描述

(三)、height属性

  • height属性表示盒子内容的高度

  • height属性的单位通常是px,移动端开发也会涉及到百分数、rem等单位

  • 盒子的height属性如果不设置的话,它将自动被内容撑开,如果没有内容,默认是0

保姆级教程 CSS 知识点梳理大全,超详细!!!_第117张图片
在这里插入图片描述

保姆级教程 CSS 知识点梳理大全,超详细!!!_第118张图片

(四)、padding属性详解

  • padding属性是盒子的内边距,即盒子边框内壁到文字的距离

  • padding属性如果用四个数值以空格隔开进行设置,分别表示上、右、下、左的padding

  • padding属性如果用数值以空格隔开进行设置,分别表示 上、左右、下的padding

  • padding属性如果要用二个数值以空格隔开进行设置,分别表示上下、左右的padding

保姆级教程 CSS 知识点梳理大全,超详细!!!_第119张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第120张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第121张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第122张图片

(五)、margin属性详解

margin是盒子的外边距,即盒子与其他盒子的距离
保姆级教程 CSS 知识点梳理大全,超详细!!!_第123张图片

margin的塌陷问题

竖直方向的margin有塌陷的现象:小的margin会塌陷到大的margin中,从而margin不叠加,只以大值为准

保姆级教程 CSS 知识点梳理大全,超详细!!!_第124张图片

(六)、一些元素有默认的margin

一些元素(比如body、ul、p等)都有默认的margin,在开始制作网页的时候,要将他们清除

保姆级教程 CSS 知识点梳理大全,超详细!!!_第125张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第126张图片

(七)、盒子的水平居中

将盒子的左右两边的margin都设置为0,盒子将水平居中
文本居中是text-align:center; 和盒子水平居中是两个概念
盒子的垂直居中 我们需要使用绝对定位来实现 后面我们细说
保姆级教程 CSS 知识点梳理大全,超详细!!!_第127张图片
在这里插入图片描述
保姆级教程 CSS 知识点梳理大全,超详细!!!_第128张图片

(八)、盒模型的计算

保姆级教程 CSS 知识点梳理大全,超详细!!!_第129张图片

(九)、box-sizing属性

给盒子添加了box-sizing:border-box属性之后,盒子的width、height数字就表示盒子实际占有的宽高(不包含margin)了,即padding、border变为内缩,不再外扩。

box-sizing属性大量用于移动网页的制作中,因为它结合百分比布局,弹性布局等非常好用,在PC页面中使用较少。
保姆级教程 CSS 知识点梳理大全,超详细!!!_第130张图片

(十)、行内元素和块级元素

保姆级教程 CSS 知识点梳理大全,超详细!!!_第131张图片

(十一)、行内块

img和表单元素是特殊的行内块,他们既能设置宽度和高度,也能够并排显示

保姆级教程 CSS 知识点梳理大全,超详细!!!_第132张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第133张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第134张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第135张图片

(十二)、行内元素和块级元素的相互转换

  • 使用display:block;可以将元素转换为块级元素

  • 使用display:inline;可以将元素转换为行内元素,将元素转换为行内元素的不多见

  • 使用display:inline-block;可以将元素转换为行内块元素
    保姆级教程 CSS 知识点梳理大全,超详细!!!_第136张图片
    保姆级教程 CSS 知识点梳理大全,超详细!!!_第137张图片

(十三)、元素的隐藏

  • 使用display:none;可以将元素隐藏,元素将彻底放弃位置,如同没有写它的标签一样

  • 使用visibility:hidden;也可以将元素隐藏,但是元素不放弃自己的位置
    保姆级教程 CSS 知识点梳理大全,超详细!!!_第138张图片
    保姆级教程 CSS 知识点梳理大全,超详细!!!_第139张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第140张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第141张图片

六、浮动与定位

(一)、浮动

  • 浮动的本质:用来实现并排的效果
  • 浮动使用的要点:要浮动,并排的盒子都实现浮动
  • 父盒子要有足够的宽度,否则子盒子会掉下去

保姆级教程 CSS 知识点梳理大全,超详细!!!_第142张图片

(二)、浮动的顺序贴靠特性

子盒子会按顺序进行贴靠,如果没有足够的空间,则会寻找前一个兄弟元素

如下图所示:3号盒子会掉到2号盒子的下面

保姆级教程 CSS 知识点梳理大全,超详细!!!_第143张图片

(三)、浮动的元素一定能设置宽高

浮动的元素不再区分块级元素、行内元素、已经脱离了标准文档,一律能够设置宽度和高度,即使他是a标签或span标签

保姆级教程 CSS 知识点梳理大全,超详细!!!_第144张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第145张图片

(四)、右浮动

保姆级教程 CSS 知识点梳理大全,超详细!!!_第146张图片

(五)、使用浮动的注意事项

  • 垂直显示的盒子,不要设置浮动、只有并排显示的盒子才要设置浮动

  • “大盒子带着小盒子跑”,一个大盒子中、又是一个小天地,内部可以继续使用浮动

  • div是免费的,不要节约盒子
    保姆级教程 CSS 知识点梳理大全,超详细!!!_第147张图片

(六)、BFC规范

BFC规范(Box-Formatting Context 块级格式化上下文)是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然

观察下面的例子

保姆级教程 CSS 知识点梳理大全,超详细!!!_第148张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第149张图片

出现以上问题的原因

  • 一个盒子不设置height,当内容子元素都浮动时,无法撑起自身

  • 这个盒子没有形成BFC

解决办法

保姆级教程 CSS 知识点梳理大全,超详细!!!_第150张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第151张图片

(七)、如何创建BFC?

保姆级教程 CSS 知识点梳理大全,超详细!!!_第152张图片

(七)、清除浮动

清除浮动:浮动一定要封闭到一个盒子中,否则会对页面后续元素产生影响

举例说明

保姆级教程 CSS 知识点梳理大全,超详细!!!_第153张图片

来猜一下页面中会出现什么样的效果?

大家应该都会说两行两列?然而没有清除浮动就成行显示了!出现以下这种情况是没有清除浮动

保姆级教程 CSS 知识点梳理大全,超详细!!!_第154张图片

清除浮动的方法一:

保姆级教程 CSS 知识点梳理大全,超详细!!!_第155张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第156张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第157张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第158张图片

清除浮动的方法二:

保姆级教程 CSS 知识点梳理大全,超详细!!!_第159张图片
使用方法二的副作用:margin会失效
保姆级教程 CSS 知识点梳理大全,超详细!!!_第160张图片

清除浮动的方法三:

在这里插入图片描述

保姆级教程 CSS 知识点梳理大全,超详细!!!_第161张图片

 <style>
        * {
     
            margin: 0;
            padding: 0;
        }
        
        .clearfix::after {
     
            content: '';
            clear: both;
            display: block;
        }
        
        p {
     
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-right: 20px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div class="clearfix">
        <p></p>
        <p></p>
    </div>

    <div class="clearfix">
        <p></p>
        <p></p>
    </div>

清除浮动的方法四:

保姆级教程 CSS 知识点梳理大全,超详细!!!_第162张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第163张图片

(八)、相对定位

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

保姆级教程 CSS 知识点梳理大全,超详细!!!_第164张图片

位置词描述:值可以是负数,即往规定方向相反移动

在这里插入图片描述
相对定位的性质:相对定位的元素,会在老家留坑,本质上任然是在原来的位置,只不过渲染在新的地方而已,渲染的图形可以比喻成影子,不会对页面元素产生任何影响。

(九)、相对定位的用途

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

  • 相对定位的元素,可以当做绝对定位的参考盒子
    保姆级教程 CSS 知识点梳理大全,超详细!!!_第165张图片
    保姆级教程 CSS 知识点梳理大全,超详细!!!_第166张图片

(十)、绝对定位

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

保姆级教程 CSS 知识点梳理大全,超详细!!!_第167张图片

绝对定位的位置描述词

保姆级教程 CSS 知识点梳理大全,超详细!!!_第168张图片

绝对定位的元素脱离标准文档流

绝对定位的元素脱离标准文档流,将释放自己的位置,对其他元素不会产生任何干扰,而是对他们进行压盖

绝对定位的参考盒子

  • 绝对定位的盒子并不是永远以浏览器作为基点

  • 绝对定位的盒子会以自己祖先元素中,离自己最近的拥有定位属性的盒子,当做基准点,这个盒子通常是相对定位的,所以这个性质也叫做子绝父相

绝对定位的盒子垂直居中

绝对定位的盒子垂直居中是一个非常实用的技术
保姆级教程 CSS 知识点梳理大全,超详细!!!_第169张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第170张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第171张图片

堆叠顺序 z-index属性

z-index属性是一个没有单位的正整数,数值大的能够压住数值小的

保姆级教程 CSS 知识点梳理大全,超详细!!!_第172张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第173张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第174张图片

(十一)、绝对定位脱离标准文档流

绝对定位的元素脱离标准文档流,将释放自己的位置,对其他元素不会产生任何干扰,而是对他们进行压盖

脱离标准文档流的方法:浮动、绝对定位、固定
定位

(十二)、绝对定位的用途

  • 绝对定位用来制作压盖、遮罩的效果
  • 绝对定位用来结合CSS精灵使用
  • 绝对定位可以结合JS实现动画

保姆级教程 CSS 知识点梳理大全,超详细!!!_第175张图片

<!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
        }
        
        .carousel {
     
            position: relative;
            width: 650px;
            height: 360px;
            border: 1px solid #000;
            margin: 40px auto;
        }
        
        .carousel .btn {
     
            position: absolute;
            width: 40px;
            height: 40px;
            margin-top: -20px;
            top: 50%;
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            background-color: rgba(255, 255, 255, .5);
            /* 鼠标变为小手状态 */
            cursor: pointer;
            font-size: 26px;
            font-family: consolas;
        }
        
        .carousel .btn:hover {
     
            background-color: gold;
            color: #fff;
        }
        
        .carousel .leftbtn {
     
            left: 10px;
        }
        
        .carousel .rightbtn {
     
            right: 10px;
        }
        
        .carousel ol {
     
            position: absolute;
            width: 120px;
            height: 20px;
            right: 20px;
            bottom: 20px;
            list-style: none;
        }
        
        .carousel ol li {
     
            float: left;
            width: 20px;
            height: 20px;
            background-color: rgba(255, 255, 255, .5);
            border-radius: 50%;
            margin-right: 10px;
        }
        
        .carousel ol li.current {
     
            background-color: gold;
        }
    </style>
</head>

<body>
    <div class="carousel">
        <img src="images/bj/0.jpg" alt="">
        <a class="leftbtn btn"> &lt;</a>
        <a class="rightbtn btn">&gt;</a>
        <ol>
            <li></li>
            <li class="current"></li>
            <li></li>
            <li></li>
        </ol>

    </div>
</body>

</html>

(十一)、固定定位

固定定位:不管页面如何滚动、他都永远固定在那里

固定定位脱离标准文档流
保姆级教程 CSS 知识点梳理大全,超详细!!!_第176张图片

固定定位的用途:“返回顶部”、“楼层导航”

<!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>
        .box {
     
            position: fixed;
            width: 100px;
            height: 100px;
            right: 0;
            bottom: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <p> <img src="images/bj/0.jpg" alt=""></p>
    <p> <img src="images/bj/0.jpg" alt=""></p>
    <p> <img src="images/bj/0.jpg" alt=""></p>
    <p> <img src="images/bj/0.jpg" alt=""></p>
    <p> <img src="images/bj/0.jpg" alt=""></p>
    <p> <img src="images/bj/0.jpg" alt=""></p>
    <p> <img src="images/bj/0.jpg" alt=""></p>
    <p> <img src="images/bj/0.jpg" alt=""></p>





</body>

</html>

保姆级教程 CSS 知识点梳理大全,超详细!!!_第177张图片

(七)、边框与圆角

(一)、border属性的三要素

保姆级教程 CSS 知识点梳理大全,超详细!!!_第178张图片

(二)、线型

保姆级教程 CSS 知识点梳理大全,超详细!!!_第179张图片

<!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>
        .box1 {
     
            width: 200px;
            height: 200px;
            border: 3px solid #000;
        }
        
        .box2 {
     
            width: 200px;
            height: 200px;
            border: 3px dotted #000;
            margin: 20px 0;
        }
        
        .box3 {
     
            width: 200px;
            height: 200px;
            border: 3px dashed #000;
        }
        
        </style
    </style>
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

</html>

在这里插入图片描述

(三)、边框的三要素小属性

保姆级教程 CSS 知识点梳理大全,超详细!!!_第180张图片

(四)、四个方向的边框

保姆级教程 CSS 知识点梳理大全,超详细!!!_第181张图片

(五)、四个方向边框的三要素小属性

保姆级教程 CSS 知识点梳理大全,超详细!!!_第182张图片

(六)、去掉边框

border-left:none;属性可以去掉左边框,以此类推

(七)、利用边框制作三角形

保姆级教程 CSS 知识点梳理大全,超详细!!!_第183张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第184张图片

(八)、圆角

border-radius属性的值通常为px单位,表示圆角的半径

 border-radius:10px

保姆级教程 CSS 知识点梳理大全,超详细!!!_第185张图片

单独设置四个圆角

保姆级教程 CSS 知识点梳理大全,超详细!!!_第186张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第187张图片

圆角也可以用百分比为单位

border-radius属性的值也可以用百分比为单位,表示圆角起始于每条边的哪里

保姆级教程 CSS 知识点梳理大全,超详细!!!_第188张图片

(九)、盒子阴影—box-shadow属性

保姆级教程 CSS 知识点梳理大全,超详细!!!_第189张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第190张图片

阴影延展

保姆级教程 CSS 知识点梳理大全,超详细!!!_第191张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第192张图片

内阴影

保姆级教程 CSS 知识点梳理大全,超详细!!!_第193张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第194张图片

多阴影

在这里插入图片描述

 box-shadow: inset 2px 2px 10px red, 4px 4px 10px blue, 6px 6px 10px yellow;

保姆级教程 CSS 知识点梳理大全,超详细!!!_第195张图片

(十)、 过渡

transition过渡属性是CSS3浓妆重彩的特性,过渡可以为一个元素在不同样式之间变化添加自动补间动画

保姆级教程 CSS 知识点梳理大全,超详细!!!_第196张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第197张图片
在这里插入图片描述

哪些属性可以参与过渡

  • 背景颜色和文字颜色都可以被过渡

  • 所有变形(包括2D和3D)都能被过渡

  • 所有数值类型的属性,都可以参与过渡,比如width,height,left,top,border-radius

过渡的四个小属性

保姆级教程 CSS 知识点梳理大全,超详细!!!_第198张图片

缓动参数

transition的第三个属性就是缓动参数,也就是变化速度曲线

保姆级教程 CSS 知识点梳理大全,超详细!!!_第199张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第200张图片

(十一)、贝塞尔曲线

官网: https://cubic-bezier.com/

保姆级教程 CSS 知识点梳理大全,超详细!!!_第201张图片
在这里插入图片描述

<!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 {
     
            width: 1200px;
            overflow: hidden;
            margin: 40px auto;
        }
        
        .box ul {
     
            list-style: none;
        }
        
        .box ul li {
     
            position: relative;
            width: 380px;
            height: 210px;
            margin-right: 20px;
            float: left;
        }
        
        img {
     
            width: 380px;
            height: 210px;
        }
        
        .box ul li .info {
     
            position: absolute;
            width: 370px;
            height: 30px;
            color: #fff;
            line-height: 30px;
            padding-left: 10px;
            background-color: rgba(0, 0, 0, .5);
            left: 0;
            bottom: 0;
            opacity: 0;
            transition: opacity 0.5s linear;
        }
        
        .box ul li .info:hover {
     
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li><img src="images/bj/0.jpg" alt="">
                <div class="info">北京的故宫</div>
            </li>

            <li><img src="images/bj/1.jpg" alt="">
                <div class="info">十七孔桥</div>
            </li>

            <li><img src="images/bj/2.jpg" alt="">
                <div class="info">国家大剧院</div>
            </li>

        </ul>
    </div>
</body>

</html>

保姆级教程 CSS 知识点梳理大全,超详细!!!_第202张图片

(十二)、背景固定— background-attachment

background-attachment属性决定着背景图像的位置是在视口内固定,还是随着包含它的区块滚动
保姆级教程 CSS 知识点梳理大全,超详细!!!_第203张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第204张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第205张图片

(十二)— background-position属性

保姆级教程 CSS 知识点梳理大全,超详细!!!_第206张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第207张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第208张图片

background-position属性可以设置背景图片出现在盒子的什么位置

可以用top、bottom、center、left、right描述图片出现的位置
在这里插入图片描述
保姆级教程 CSS 知识点梳理大全,超详细!!!_第209张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第210张图片

(十三)、CSS精灵

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

CSS精灵可以减少HTTP的请求数量,加快网页的显示速度,缺点也很明显:不方便测量,后期改动麻烦

保姆级教程 CSS 知识点梳理大全,超详细!!!_第211张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第212张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第213张图片

(十四)、background综合属性

保姆级教程 CSS 知识点梳理大全,超详细!!!_第214张图片

(十五)、背景裁切

background-clip属性用来设置元素的背景裁切到哪个盒子

保姆级教程 CSS 知识点梳理大全,超详细!!!_第215张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第216张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第217张图片

(十六)、线性渐变

保姆级教程 CSS 知识点梳理大全,超详细!!!_第218张图片

渐变的方向可以写成度数的形式

保姆级教程 CSS 知识点梳理大全,超详细!!!_第219张图片

线性渐变可以有多个颜色值,并且可以使用百分数定义他们出现的位置

保姆级教程 CSS 知识点梳理大全,超详细!!!_第220张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第221张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第222张图片

(十七)、浏览器私有前缀

不同的浏览器有不同的私有前缀,用来对试验性质的CSS属性加以标识

保姆级教程 CSS 知识点梳理大全,超详细!!!_第223张图片

(十八)、径向渐变

保姆级教程 CSS 知识点梳理大全,超详细!!!_第224张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第225张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第226张图片

(十九)、2D变形

旋转变形

保姆级教程 CSS 知识点梳理大全,超详细!!!_第227张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第228张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第229张图片

(二十)、transform-origin属性

保姆级教程 CSS 知识点梳理大全,超详细!!!_第230张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第231张图片

(二十一)、缩放变形

保姆级教程 CSS 知识点梳理大全,超详细!!!_第232张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第233张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第234张图片

(二十二)、斜切变形

保姆级教程 CSS 知识点梳理大全,超详细!!!_第235张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第236张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第237张图片

(二十三)、位移变形

保姆级教程 CSS 知识点梳理大全,超详细!!!_第238张图片

(二十四)、3D旋转

保姆级教程 CSS 知识点梳理大全,超详细!!!_第239张图片

perspective属性

perspective属性用来定义透视的强度,可以理解为人眼到舞台的距离,单位是px
保姆级教程 CSS 知识点梳理大全,超详细!!!_第240张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第241张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第242张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第243张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第244张图片

(二十五)、空间移动

保姆级教程 CSS 知识点梳理大全,超详细!!!_第245张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第246张图片

(二十六)、动画的定义

可以使用 @keyframes来定义动画, keyframes表示关键帧,在项目上线之前,要补上@-webkit-这样的私有前缀

保姆级教程 CSS 知识点梳理大全,超详细!!!_第247张图片

动画的调用

定义动画之后,就可以使用animation属性调用动画

保姆级教程 CSS 知识点梳理大全,超详细!!!_第248张图片

第五个参数就是动画的执行次数,如果想永远执行可以写infinite

保姆级教程 CSS 知识点梳理大全,超详细!!!_第249张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第250张图片
在这里插入图片描述
保姆级教程 CSS 知识点梳理大全,超详细!!!_第251张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第252张图片

(二十七)、多关键帧动画

保姆级教程 CSS 知识点梳理大全,超详细!!!_第253张图片
保姆级教程 CSS 知识点梳理大全,超详细!!!_第254张图片

保姆级教程 CSS 知识点梳理大全,超详细!!!_第255张图片

你可能感兴趣的