CSS 介绍

大闸蟹~

已于 2022-08-19 14:36:23 修改

阅读量1.4k

点赞数

文章标签： css 前端

于 2022-08-15 17:24:08 首次发布

本文链接：https://blog.csdn.net/YCHH1/article/details/126348942

版权

一、CSS 概述

(1) 介绍

英文全称:Cascading Style Sheet
翻译: 层叠样式表
引入 CSS 的目的: 达到结构与样式的分离(html4.0.1 开始结构与样式分离)
引入 CSS的好处:

内容与表现的分离,可以降低程序的耦合性;
降低开发成本,一套样式可供多个页面使用;
内容和表现分离成单独的两个文件,通过合理得方式加载样式,可以提高页面得加载速度;
CSS相对于 html 标签和属性,可以提高更加丰富得效果
减少一些标签得嵌套,使得代码更加简练,后期维护更加方便.
浏览器对css显得更加友好

二、 CSS 的引入方式

(1) 行内(内联)式

通过 html 的标准属性 style 引入 css 样式
css 样式语法格式 样式:样式值
多个样式之间使用分号隔开

<ul type="square" style="color:red;">
    <li><span style="color:black;font-size:large;font-weight:bold;">阿萨的加减 法撒的撒发射点</span></li>
    <li><span style="color:black;">爱上了对方和</span></li>
    <li><span style="color:black;">阿斯蒂芬撒地方撒旦富士达范德萨发撒</span></li>
    <li><span style="color:black;">阿斯顿发射点发撒撒反对发射点发</span></li>
    <li><span style="color:black;">在徐州宣传宣传v现</span></li>
    <li><span style="color:black;">芦荟胶微软微软</span></li>
    <li><span style="color:black;;font-weight:bold;">啊手动阀啊手动阀手动阀手动阀 </span></li>
</ul>

行内样式优化了:标签嵌套过多,而且使用了废弃标签的问题;使用行内式的契机;浏览器的调试、代码调试时可以使用

但是行内式,维护起来也是很麻烦,修改时也需要修改多个地方;而且并没有达到结构与样式的分离,程序耦合性较高;当样式过多时,浏览器渲染需要大量的时间,这样加载页面的速度会大大降低,不利于用户体验.

(2) 嵌入(内嵌)式

在 head 标签中,使用 style 标签引入 css 样式
html 代码

    <style type="text/css">
        /* 在style标签内，通过css语法来书写样式文本 */
        /* 需要匹配指定的元素，然后再去书写样式 */
        /* 书写格式：选择符{样式:样式值;}*/
        /* id选择符 #id名 */
        #list2 {
            /* 设置文本的颜色未红色 */
            color: red;
        }

        /* 后代选择符 祖先 后代 */
        #list2 span {
            color: blue;
        }

        /* 类选择符 .class的值 */
        .ftb {
            /* 设置字体加粗效果 */
            font-weight: bold;
        }

        .fsl {
            /* 设置字体大小 */
            font-size: large;
        }
    </style>
</head>

<body>
    <ul type="square" id="list2">
        <li><span class="ftb fsl">阿萨的加减法撒的撒发射点</span></li>
        <li><span>爱上了对方和</span></li>
        <li><span>阿斯蒂芬撒地方撒旦富士达范德萨发撒</span></li>
        <li><span>阿斯顿发射点发撒撒反对发射点发</span></li>
        <li><span>在徐州宣传宣传v现</span></li>
        <li><span>芦荟胶微软微软</span></li>
        <li><span class="ftb">啊手动阀啊手动阀手动阀手动阀</span></li>
    </ul>
</body>

嵌入式优化了:
维护成本降低,修改一个地方即可;
样式与结构呈现分离,耦合性相对降低很多;
在一些小案例中,不需要写过多的样式,可以使用嵌入式

嵌入式存在的问题:
当样式过多时,浏览器渲染需要大量的时间,这样加载页面的速度就会大大降低,不利于用户体验(因为虽然结构与样式分离,但是 css 样式还是嵌入在 html 文件中,浏览器渲染时,是从上往下一次渲染的,那么如果样式过渡,加载需要大量时间,这个时候还没有解析到 html 结构,那么打开浏览器后,一段时间内可能呈现空白效果,短暂时间过后,显示正常);
它的结构与样式的分离并不是完全的分离,css 和 html 还是具有一定的耦合性.

(3) 外链式

在头部 head 标签中,使用 link 标签引入外部独立的 css 样式文件

<!-- 使用link标签，引入外部独立的CSS文件 -->
<link type="text/css" rel="stylesheet" href="./css/style.css">

链接式的好处:

内容与表现得分离,可以降低程序的耦合性;
降低开发成本,一套样式可供多个页面使用;
内容和表现分离成单独的两个文件,通过合理得方式,可以提高页面得加载速度;
浏览器对 css 显得更加友好(此时样式文件和网页文件是两个单独得文件,在加载时,是并行下载,同时加载,提高了网页得加载速度,从另外一个方面讲,提高了用户得体验.)

(4) 导入式

在头部 head 标签内,在 style 标签内,使用 @import 导入外部独立得样式
和外链式唯一得区别就是引入方式不同,引入方式代码如下:

<!-- 导入式，导入外部独立的CSS文件 -->
<style>
  @import url(./css/style.css);
</style>

导入式一般情况下我们不建议使用,因为它和嵌入式一样,影响页面得加载速度.它在加载时,是一个串行下载,从上往下依次渲染,需要把样式渲染完,才可以继续往下执行,呈现页面效果,也是先闪一下,然后再正常,用户体验较差。

(5) 引入样式得优先级

层叠性体现一: 当设置不同的引入方式时,但是通过同样的选择符进行设置同样的样式,那么遵循 就近原则,谁离着文本内容更近,就显示谁的效果。但是一般情况下,我们不会给出多种书写样式的方式,但是有可能在一个文件中引入多个样式的文件。
层叠性体现二: 当给同一个选择器,设置多个同名样式时,后面的层叠前面的样式
如果一个属性,在规定的情况下,可以添加多个属性值,那么请把这些属性值使用空格隔开,那么他们在浏览器中都会被渲染.

三、CSS 选择器

CSS 选择器包含两个部分,选择符 和声明;
声明是由 key:value 组成,key 样式 value 样式
语法格式 选择符{样式:样式值}

(1) 基本选择器

标签选择器 标签名 {样式:样式值} 给所有匹配的标签元添加样式
类选择器 .类名{样式:样式值} 匹配文档中所有指定类名的元素
注: 一个标签可以有多个类名;一个类名可以被多个元素所共享
id 选择器 id名{样式:样式值;} 匹配指定 id 的唯一元素
注: 标签的 id 就类似于人的身份证,具有唯一性.
全局选择器 (通配符) *{样式:样式值}
注: 通配符一般写在整个样式的最上面,去格式化具有默认效果的标签;目前来讲,使用下面 main 写法即可 *{margin:0;padding:0;}

(2) 高级选择器

交集选择器 匹配同时符合所有符合条件的元素举例:既是 div 元素,id又是box,且 class 的值是 con1、con,代码如下:

div#box.con.con1{样式:样式值;}

并集(群组)选择器 使用逗号隔开的选择符,只要满足其中一个选择符,既满足条件

selector1,selector2,......,selectorN{样式:样式值;}

在这里插入图片描述

后代选择器 使用空格隔开,后代选择器发生在具有嵌套关系的元素上,可以匹配所有后代元素 selector selctor2{样式:样式值}
子代选择器 使用大于号隔开,子代选择器发生在具有嵌套关系的元素上,只能匹配下一级元素 selector>selector2{样式:样式值}

(3) 动态伪类选择器

:link 初始状态
:visited 访问后状态
:hover 鼠标悬停状态
:active 激活状态
注: 上面四个在使用时,有一定顺序.遵循原则: 爱恨准则爱 LOVE 恨 HATE

(4) 选择器的优先级

注: 这也是样式的层叠性体现
针对同一个元素来讲,权值越大,优先级越高
在这里插入图片描述
注: 重要性 !important 用法 selector{样式:样式值!important;}
注意: CSS 中有些属性可以继承有些则不可以
具有嵌套关系的不同元素,设置相同样式:就近原则
如果涉及到一些高级选择器(后代、子代、交集、并集等),那么情况会比较复杂,依次展开描述
① 匹配到最内层元素

1. 首先比较选择符中 id 的数量,数量大的 优先级越高
2. 如果 id 数量一致,那么比较 class 的数量,数量到优先级最高
3. 如果 class 数量也一致,那么比较 标签的 数量,数量大的优先级最高
4. 如果 id 、class 、 标签的数量都一样,那么就按照就近原则,后面覆盖前面

② 没有匹配到最内层元素
如果没有匹配到最内层元素,首先看所有的里面,离着最内层元素最近的那一个元素,如果有则按照就近原则:
如果所有选择符距离最内层元素的距离一致,那么按照以下方式进行优先级比较:

1. 首先比较选择符中 id 的数量,数量大的 优先级越高
2. 如果 id 数量一致,那么比较 class 的数量,数量到优先级最高
3. 如果 class 数量也一致,那么比较 标签的 数量,数量大的优先级最高
4. 如果 id 、class 、 标签的数量都一样,那么就按照就近原则,后面覆盖前面

注: 最内层元素指的是包裹文本那一层元素

四、CSS 的样式

CSS 样式语法格式样式:样式值;
CSS 样式,也叫 CSS 属性
CSS 样式用来给 html 元素标签添加修饰
CSS 样式可以提供更加丰富的效果,浏览器更加友好
CSS 样式的语法格式: 样式:样式值;
多个样式之间使用分号隔开
在 CSS 样式中,单位必须添加如: 像素单位 px 角度单位 deg 字符单位 em

(1) 可继承样式

① 文本相关的样式

color 设置文本字体颜色
font-size 设置文本字体大小;属性值 large larger x-large normal small smaller x-small 还可以是像素值
font-family 设置文本的字体如果设置多个字体,请使用逗号隔开;当浏览器渲染时,会依次在用户电脑查找指定字体,前面的有则用,没有依次向后查找,找到后则使用

/* 设置字体颜色 */
color: blue;
/* 设置字体的大小 */
font-size: 24px;
/* 设置字体 */
font-family: Arial, Helvetica, sans-serif;

font-style 设置字体的风格属性值 italic 斜体字 normal 正常的字体
font-weight 设置字体粗细属性值 lighter normal bold bolder 还可以设置 100-900 之间的整百数
text-decoration 设置文本修饰效果属性值 underline 下划线 overline 上划线 line-through 删除线 none 清除文本样式
② 排版相关的样式
text-index 首行缩进例如: 2em
text-align 设置文本的水平对齐方式,属性值 left center right justify(分散对齐)
line-height 设置行高;属性值可以是单位值、可以是百分比、也可以是倍数

/* 设置首行缩进两个字符 */
text-indent: 2em;
/* 设置行高  设置单位 */
/* line-height: 2em; */
/* line-height: 32px; */
/* 使用百分比  相对于当前字体高度 */
/* line-height: 200%; */
/* 使用倍数 */
line-height: 2;

letter-spacing 设置文字与文字之间的距离
word-spacing 设置单词与单词之间的距离,识别的其实是空格

(2) 不可继承样式

① 盒子相关的属性

width 设置盒子的宽度
height 设置盒子的高度
margin 设置盒子的外边距
⭐ 按照值的多少分类
1. 单值法 margin: 10px; 设置上下左右外边距都是 10 个像素
2. 双值法 margin:10px 20px; 设置上下外边距为 10 个像素左右外边距为 20 个像素
3. 三值法 margin:10px 20px 30px; 设置上外边距为 10 个像素,左右外边距为 20 个像素下边距为 30 个像素
4. 四值法 margin:10px 20px 30px 40px; 从上面开始,按照顺时针(上右下左) 分别设置外边距为 10 、20 、 30 、40 个像素
⭐ 按照设置的方向分类
1. margin-top 距离顶部元素
2. margin-right 距离右边元素
3. margin-bottom 距离下边元素
4. margin-left 距离左边元素
padding 设置盒子的内填充
⭐ 按照值得分类
1. 单值法 padding:10px; 上下左右的内填充都是 10 像素;
2. 双值法 padding:10px 20px; 上下内填充为 10px,左右内填充为 20px
3. 三值法 padding:10px 20px 30px ; 设置上内填充为 10 个像素,左右内填充为 20 个像素,下内填充为 30 个像素
4. 四值法 padding:10px 20px 30px 40px; 从上面开始,按照顺时针 (上右下左) 分别设置内填充为 10、20、30、40 个像素
⭐ 按照方向分类
1. padding-top 上内填充
2. padding-right 右内填充
3. padding-bottom 下内填充
4. padding-left 左内填充
border 设置边框
⭐ 按照后缀分类
1. border-style 设置边框的类型; 属性值 solid 实线 doblue 双实线 dotted 点线 dashed 虚线
2. border-width 设置边框的厚度
3. border-color 设置边框的颜色
⭐ 按照方向分类
1. border-top-
2. border-right-
3. border-bottom-
4. border-left-
简写方式: border: style width color;

盒子模型包括四个部分: 外边距、边框、内填充、内容部分

上面所讲的叫做标准盒,标准盒元素的宽高分别如下:

元素的宽 = 左外边距 + 左边框 + 左内填充 + 内容宽度 + 右内填充 + 右边框 + 右外边距
元素的高 = 上外边距 + 上边框 + 上内填充 + 内容的高度 + 下内填充 + 下边框 + 下外边距

五、列表相关的属性

(1)list-style-type 设置列表项目符合类型,属性值如下

disc 默认实心圆
circle 设置为空心圆
square 设置为实心方块
decimal-leading-zero 呈现效果 01,02,03…
decimal 呈现效果 1,2,3,4…
upper-alpha/lower-alpha 大小写英文字母
upper-roman/lower-roman 大小写罗马数字
lower-greek 小写希腊
cjk-heavenly-stem 天干: 甲乙丙丁
cjk-earthly-branch 地支:子丑寅卯

(2) list-style-image 设置列表项目符号为图片

(3) list-style-position 设置列表项目符号位置

默认值 outside 还可以设置为 inside

(4) list-style 上面所有属性的简写方式,一般用来清除列表项目符号

list-style:none;

注: 在 CSS 中,不区分有序和无序列表的样式了,可以混着使用

六、css 中颜色的表示方式

(1) 英文关键字

red green blue orange white black

(2) 十六进制

描述: 十六进制数是由 0-9,a-f 组成,颜色表示时一般使用六位十六进制数,每两位代表一种颜色
#FF0000 红色 #00FF00 绿色 #0000FF 蓝色 #000000 黑色 #FFFFFF 白色
注: 如果每两位十六进制数一样,那么可以简写为三位十六进制数, 如: #FF0000 简写为 #F00

(3) RGB 表示法

R-red G-green B-blue

使用 0-255 之间的数字
rgb(255,0,0) 红色 rgb(0,255,0) 绿色 rgb(0,0,255) 蓝色 rgb(0,0,0) 黑色 rgb(255,255,255) 白色
使用百分比
rgb(100%,0,0) 红色 rgb(0,100%,0) 绿色 rgb(0,0,100%) 蓝色

七、css 中存在的问题和方法

(1) 宽度剩余法

在书写样式的时候,左内边距是确定的。右内边距会根据内容的不同内边距不确定。
利用宽度剩余法,直接给盒子一个足够的宽度(目前需要的最大的宽度大)。右侧会根据内容的不同,自动分配剩余的空间。

(2) margin 塌陷的问题

两个元素之间存在上下外边距的重合,值为其中较大的值.(水平方向累加)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 200px;
      height: 200px;
    }

    /* 外边距控制的是元素和元素之间的距离 */
    .box1 {
      background-color: purple;
      margin-top: 50px;
      margin-bottom: 50px;
    }

    .box2 {
      background-color: orange;
      margin-top: 100px;
    }
  </style>
</head>

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

</html>

在这里插入图片描述

(3) 居中

文本居中: text-align:center

块状元素水平居中:margin:0 auto
auto 表示自动,即左右平均分配,auto 只适用于左右

margin: 0 auto;
0: 上和下 margin-top 和 margin-bottom 为 0
auto: 左和右 margin-left 和 margin-right 为 auto

(4) 子元素 margin-top 的问题(边界重合问题)

当子元素和父元素的上边界重合了,子元素设置 margin-top,不会让子元素在父元素的内部位置改变,而是会导致父元素跟子元素一块下移
解决办法: 不让子元素和父元素的边界重合-----给父元素设置border

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .container {
      width: 500px;
      height: 500px;
      background-color: pink;
    }

    .box {
      width: 200px;
      height: 200px;
      background-color: orange;
      margin-top: 150px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>

</html>

在这里插入图片描述

(5) 标准文档流

概述: 标准文档流类似于 word 文档流,书写顺序自上而下,自左向右,光标的位置决定了书写的位置。前面的字会变大,后面的字和图片会下移。
浏览器的解析顺序为: 自上而下,自左向右
特点:

空白折叠现象: 多个空格当做一个空格来处理,换行当做空格来处理
文字内容高矮不一,对齐方式为底部对齐
文本内容超出边框会进行自动换行(汉字非常好分,英文按照单词划分)

八、标签的分类

按照标签的功能分类

容器级标签
文本级标签
功能标签

按照标签的盒模型分类(是否可以设置宽度和高度、是否会自动换行)

块状元素: block
行内元素: inline
行内块元素: inline-block

(1) 块状元素(div)

独占一行,默认列宽度为父元素的 100%
可以设置宽度和高度
margin-top 和 margin-bottom 是生效的

(2) 行内元素(span)

行内元素并排显示(不会自动换行)
行内元素不能设置宽度和高度,行内元素的大小都是由内容决定的
行内元素设置 margin-top 和 margin-bottom 不生效 (margin-left 和 margin-right 生效的)

(3) 行内块(img)

拥有行内元素和块状元素的特点

不会换行,会并排显示
可以设置宽度和高度,不写则有内容撑起
margin-top 和 margin-bottom 可以使用

(4) display

用于切换标签的状态

(5) 导航条的制作

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      background-color: gray;
    }

    li {
      list-style: none;
      /* 显示成一行，且还能够设置宽度和高度：行内块 */
      /* 不写宽度，宽度将由内容撑起 */
      display: inline-block;
      /* border: 1px solid #000; */
      height: 50px;
      font-size: 18px;
      line-height: 50px;
      margin-right: 1px;
      padding: 0 30px;
    }

    li.active {
      margin-left: 100px;
      color: white;
      background-color: black;
    }

    li:hover {
      color: white;
      background-color: black;
    }
  </style>
</head>

<body>
  <ul class="nav">
    <li class="active">大闸蟹</li>
    <li>味道</li>
    <li>口味</li>
    <li>鲜度</li>
    <li>大小</li>
    <li>制作方式</li>
  </ul>
</body>

</html>

在这里插入图片描述

九、浮动

属性: float
属性值: left 和 right

(1) 浮动会使元素脱离文档流,浮动之后的元素性质类似于 inline-block

浮动的元素会进入浮动层,浮动层位于文档流的上方
无论是块状元素元素还是行内元素浮动之后,都可以设置宽度和高度,并且可以并排显示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      /* 不给块状元素的宽度，默认值为100% */
      /* 元素浮动之后，性质和inline-block类似，宽度由内容撑起 */
      width: 200px;
      height: 200px;
    }

    .box1 {
      background-color: pink;
      /* 浮动 */
      float: left;
      height: 200px;
      width: 150px;
    }

    .box2 {
      background-color: orange;
      height: 300px;
      float: right;
      width: 300px;
    }

    .box3 {
      background-color: cyan;
      height: 350px;
      width: 400px;
    }

    .box4 {
      background-color: purple;
      height: 400px;
    }
  </style>
</head>

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

</html>

在这里插入图片描述

(2) 浮动的特点

浮动层在文档流的上方(浮动层覆盖文档流)
浮动只能左右浮动不能上下浮动
浮动会影响后面的元素,不会影响上面的元素
浮动会覆盖文档流,但是不会覆盖文档流中的文字
浮动元素的宽度不再是默认的 100% ,浮动元素不设置宽度的时候,宽度由内容撑起
清除浮动使用clear,清除左浮动使用 clear; left 清除右浮动使用 clear:right, 通用的方法 clear:both

(3) 浮动会形成文字环绕效果

原理: 浮动元素位于文档流的上方,但是不会覆盖文字

(4) 清除浮动

clear:left; 只能清除左浮动
clear:right; 只能清除右浮动
clear:both; 清除所有的浮动

(5) 浮动不能钻盒子

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 50%;
    }

    .box1 {
      background-color: purple;
      height: 500px;
      float: left;
    }

    .box2 {
      background-color: orange;
      height: 300px;
      float: right;
      width: 30%;
    }

    .box3 {
      background-color: cyan;
      height: 100px;
      float: right;
      width: 25%;
    }

    .box4 {
      width: 15%;
      height: 150px;
      background-color: pink;
      /* clear: both; */
      float: left;
      float: right;
    }
  </style>
</head>

<body>
  <!-- 正常的浮动层空间分配 -->
  <div class="box1">50% * 500px</div>
  <div class="box2">30% * 300px</div>
  <div class="box3">25* 150px</div>
  <div class="box4">15% * 150px</div>
</body>

</html>

在这里插入图片描述

(6) 浮动不存在margin 塌陷的问题

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 100%;
      height: 150px;
    }

    .box1 {
      background-color: purple;
      margin-bottom: 100px;
      float: left;
    }

    .box2 {
      background-color: orange;
      margin-top: 50px;
      float: left;
    }
  </style>
</head>

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

</html>

在这里插入图片描述

十、防止浮动元素父元素的高度塌陷

父元素本身没有设置高度,高度是由子元素的高度撑起的,当子元素浮动的时候,因为浮动脱离了文档流,导致父元素的高度塌陷
为什么防止父元素高度的塌陷?
子元素的浮动,导致父元素高度塌陷,会影响后面的元素

(1) 给父元素设置高度

给父元素足够的高度,能够支撑起浮动的内容,(高度需要计算的)

ul {
  list-style: none;
  border: 1px solid red;
  /* 给父元素设置高度，该高度足够支撑起浮动元素 */
  height: 50px;
}

(2) 清除浮动

让浮动元素后面的元素清除浮动(clear:both), 后面的元素不会受浮动的影响.不能支撑起父元素的高度

.box {
  width: 100%;
  height: 200px;
  background-color: pink;
  /* 让浮动的元素后面的元素清除浮动 */
  clear: both;
}

(3) 外墙法

清除浮动的升级版本,专门设置一个元素用于清除浮动,在浮动元素的后面添加该元素即可
在这里插入图片描述

(4) 内墙法

跟外墙法实现的方式相同,只是将元素放入到父元素的末尾.好处,可以支撑起父元素的高度
在这里插入图片描述

(5) 内墙法的升级

使用::after 添加伪类元素取代元素

/* 在ul的内部最后面添加内容 */
ul::after {
  /* content: 属性表示要插入的内容 */
  content: '';
  /* 显示为块状元素 */
  display: block;
  /* 可以不设置高度，因为高度默认为0，写成0方便你的理解 */
  height: 0;
  /* 清除浮动 */
  clear: both;
}

(6) overflow:hidden

overflow:hidden; 超出的部分隐藏
scroll: 滚动条
overflow: 会先计算内容是否超出了元素,会导致浮动元素撑起父元素

ul {
  list-style: none;
  border: 5px solid black;
  /* 添加属性 */
  overflow: hidden;
}

十一、 CSS 的背景

(1) 背景颜色

属性名: background-color
属性值: 颜色

颜色的表述方式

单词
rgb 或者 rgba
十六进制
hsl 和 hsla

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      float: left;
      margin: 0 20px;
    }

    .box1 {
      background-color: pink;
    }

    .box2 {
      background-color: rgb(255, 124, 5);
    }

    .box3 {
      background-color: #553322;
    }

    .box4 {
      background-color: hsl(210, 100%, 50%);
    }
  </style>
</head>

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

</html>

(2) 背景图片

属性名: background-image:url(属性值)
属性值: 图片的地址

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      /* background-image: url(./imgs/1.jpg); */
      background-image: url('./imgs/1.jpg');
      /* 背景图片的重复方式： 区域大于背景图 */
      /* 不重复 */
      background-repeat: no-repeat;
      background-repeat: repeat-x;
      background-repeat: repeat-y;
    }
  </style>
</head>

<body> </body>

</html>

(3) 背景的重复方式

属性名: background-repeat
属性值:

repeat: 重复(默认值)
no-repeat:不重复
repeat-x: x 轴重复
repeat-y: y 轴重复
space: 尽可能多放,不会进行缩放,保证每一张图片都完整的显示
round: 尽可能多放,会进行图片的缩放

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 700px;
      height: 400px;
      border: 1px solid #000;
      margin: 10px;
      float: left;
      background-image: url('./imgs/1.png');
    }

    .box1 {
      background-repeat: space;
    }

    .box2 {
      background-repeat: round;
    }
  </style>
</head>

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

</html>

(4) 背景图片的定位

属性名: background-position:x y;
属性值:

px
关键字:
x 轴: left center right
y 轴: top center bottom

注意: 图片区域大于背景区域,首先必须设置背景图片不重复

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 400px;
      height: 400px;
      border: 1px solid #000;
      background-image: url('./imgs/1.png');
      margin: 0 auto;
      background-repeat: no-repeat;
      /* x轴和y轴都居中 */
      background-position: center;
      /* 左下角 */
      background-position: left bottom;
      /* 可以用，不建议使用 */
      background-position: 50% 20%;
      /* 像素值 */
      background-position: 100px 200px;
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

(5) 背景图片定位的应用—精灵图(雪碧图)

精灵图的实现: 将多张图片做成一张图片,利用 background-position 调节位置控制显示的图片

精灵图的好处: 每一张图片都是一个请求,将多张图片做成一张图片,减少了 http 请求的此时.让网站相应速度提升,减少服务器的压力。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul {
      margin: 100px auto;
      border: 1px solid #000;
      list-style: none;
      width: 130px;
      padding: 10px;
    }

    li {
      overflow: hidden;
      border-bottom: 1px solid gray;
    }

    li span {
      float: left;
    }

    .a,
    .b,
    .c,
    .d,
    .e,
    .f,
    .g,
    .h {
      width: 25px;
      height: 25px;
      /* background-color: pink; */
      margin-right: 15px;
      background-image: url('imgs/sidebar.png');
    }

    .a {
      background-position: 0 0;
    }

    .b {
      background-position: 0 -24px;
    }

    .c {
      background-position: 0 -48px;
    }

    .d {
      background-position: 0 -73px;
    }

    .e {
      background-position: 0 -95px;
    }

    .f {
      background-position: -43px -23px;
    }

    .g {
      background-position: -39px -95px;
    }

    .h {
      background-position: 0 -169px;
    }
  </style>
</head>

<body>
  <ul>
    <li><span class="a"></span><span>服装饰品</span></li<>
    <li><span class="b"></span><span>鞋包饰品</span></li>
    <li><span class="c"></span><span>运动用品</span></li>
    <li><span class="d"></span><span>首饰饰品</span></li>
    <li><span class="e"></span><span>数码产品</span></li>
    <li><span class="f"></span><span>家用电器</span></li>
    <li><span class="g"></span><span>装饰饰品</span></li>
    <li><span class="h"></span><span>婴儿用品</span></li>
  </ul>
</body>

</html>

(6) 背景图片的固定

属性名: backgroud-attachment
属性值:

scroll 滚动
fixed 固定

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      height: 200px;
      background-color: orange;
      border-bottom: 50px solid #fff;
    }

    body {
      background-image: url('./imgs/bg3.jpg');
      background-size: 100%;
      background-repeat: no-repeat;
      background-attachment: fixed;
    }

    .show {
      background-color: transparent;
    }
  </style>
</head>

<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="show"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>

</html>

(7) 上面方法的简写形式

background:attachment color image position repeat;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 100%;
      height: 2000px;
      background: fixed pink url('./imgs/bg.jpg') center no-repeat;
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

在这里插入图片描述

(8) 背景的尺寸(CSS3)

属性名: background-size
属性值:

px
%
关键字:
cover: 按照最大的比例进行放大,按照最小的比例进行缩小,图片有可能显示不完整,不会存在空白
contain: 放大的时候按照小的比例放大,缩小的时候,按照最大的比例缩小,图片完整显示,有时存在空白

(9) 背景的起源

属性名: background-origin
属性值:

padding-box: 内边距盒(默认值)
border-box: 边框盒
content-box: 内容盒

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 300px;
      height: 300px;
      border: 40px solid rgba(0, 0, 0, .2);
      padding: 50px;
      margin: 0 auto;
      float: left;
      margin: 10px;
      background-image: url('imgs/bg.jpg');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      font-size: 40px;
      line-height: 300px;
      color: red;
      text-align: center;
    }

    .box1 {
      /* 背景起源 */
      background-origin: padding-box;
    }

    .box2 {
      /* 内容盒 */
      background-origin: content-box;
    }

    .box3 {
      /* 边框盒 */
      background-origin: border-box;
    }
  </style>
</head>

<body>
  <div class="box1">padding-box</div>
  <div class="box2">content-box</div>
  <div class="box3">border-box</div>
</body>

</html>

在这里插入图片描述

(10) 背景的裁剪

背景起源控制背景在哪里开始渲染,背景裁剪控制背景在哪里显示
属性名: background-clip

属性值:

padding-box: 内边距盒(默认值)
border-box: 边框盒
content-box : 内容盒

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 300px;
      height: 300px;
      border: 40px solid rgba(0, 0, 0, .2);
      padding: 50px;
      margin: 0 auto;
      float: left;
      margin: 10px;
      background-image: url('imgs/bg.jpg');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      font-size: 40px;
      line-height: 300px;
      color: red;
      text-align: center;
      /* 边框盒 */
      background-origin: border-box;
    }

    .box1 {
      /* 背景裁剪 */
      background-clip: border-box;
    }

    .box2 {
      background-clip: padding-box;
    }

    .box3 {
      background-clip: content-box;
    }

    .box4 {
      /* 浏览器的新的属性 */
      -webkit-background-clip: text;
      /* 设置颜色为透明色 */
      color: transparent;
      /* 字体加粗 */
      font-weight: 900;
    }
  </style>
</head>

<body>
  <div>默认状态</div>
  <div class="box1">border-box</div>
  <div class="box2">padding-box</div>
  <div class="box3">content-box</div>
  <div class="box4">text-content</div>
</body>

</html>

在这里插入图片描述

(11) 总结:

背景 : background
背景颜色: background-color
背景图片: background-image
背景固定: background-attachment:fixed
背景重复: background-repeat: no-repeat、repeat-x、repeat-y、space、round
背景尺寸: background-size: px 、% 、cover 、 contain
背景定位: background-position
背景起源: background-origin: border-box、padding-box、content-box
背景裁剪: background-clip: border-box、padding-box、content-box、text(浏览器的前缀,颜色为 transparent)

十二、定位

流式布局: display:block、inline-block、inline
浮动布局:float:left、right; 清除浮动 clear: left 、 right 、 both;
层级布局:脱离文档流、进入定位层、位置随意放置

(1) 定位:position

属性值:

state:默认值,相当于没有定位
relative: 相对定位,相对于自己原来在文档流中的位置进行定位,不会脱离文档流,但是可以存在压盖效果
absolute: 绝对定位,如果父元素存在定位时,则相当于父元素进行定位,如果父元素不存在定位,则会查找父元素的父元素,直到找到对应的定位父元素或者 body。相对于定位父元素进行定位。脱离文档流。
fixed: 固定定位,相对于浏览器窗口(视口)进行定位,脱离文档流
sticky: 粘性定位,根据自身的位置相关,不会脱离文档流

(2) 定位调节

所有的定位都是通过四个属性进行位置调节

top(上): 距离参照物顶部的位置
bottom(下): 距离参照物底部的位置
left(左) : 距离参照物左边的位置
right(右) : 距离参照物右边的位置

注意: top 和 bottom 选择一个,left 和 right 选择一个

(3) 相对定位

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      height: 150px;
      background-color: pink;
      margin-bottom: 50px;
      width: 500px;
      text-align: center;
      font-size: 50px;
      line-height: 150px;
    }

    .box {
      /* 相对定位 */
      position: relative;
      /* 调节位置 */
      left: 100px;
      top: -100px;
      background-color: orange;
    }
  </style>
</head>

<body>
  <div>1</div>
  <div class="box">2</div>
  <div>3</div>
  <div>4</div>
</body>

</html>

在这里插入图片描述

(4) 固定定位

相对于浏览器的视口进行定位,一般用于网站的广告、导航

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      height: 150px;
      background-color: pink;
      margin-bottom: 50px;
      width: 500px;
      text-align: center;
      font-size: 50px;
      line-height: 150px;
    }

    .box {
      /* 固定定位 */
      position: fixed;
      background-color: orange;
      width: 200px;
      height: 100px;
      right: 0;
      bottom: 50px;
    }
  </style>
</head>

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

</html>

在这里插入图片描述

(5) 绝对定位

参照物: 选择定位父元素的过程,查找父元素是否存在定位,如果父元素存在定位则父元素为定位父元素。
如果父元素不存在定位方式,则会依次向上查找,直到找到对应的定位父元素或者找到body
脱离文档流
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .container {
      width: 800px;
      height: 400px;
      background-color: orange;
      margin: 0 auto;
      position: relative;
    }

    .carousel {
      width: 600px;
      height: 300px;
      background-color: purple;
      margin: 0 auto;
    }

    .box {
      width: 400px;
      height: 200px;
      background-color: cyan;
      margin: 0 auto;
    }

    .item1,
    .item2 {
      width: 100px;
      height: 100px;
      border: 1px solid #000;
    }

    .item1 {
      background-color: red;
      /* 绝对定位：脱离文档流 */
      position: absolute;
      /* 找参照物 */
      left: 0;
      top: 0;
    }

    .item2 {
      background-color: gray;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="carousel">
      <div class="box">
        <div class="item1">item1</div>
        <div class="item2">item2</div>
      </div>
    </div>
  </div>
</body>

</html>

在这里插入图片描述

(6) 粘性定位

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      height: 200px;
      background-color: orange;
      color: red;
      font-size: 50px;
      line-height: 200px;
      text-align: center;
      margin-bottom: 20px;
    }

    .box {
      background-color: rgba(0, 0, 0, .5);
      position: sticky;
      /* 距离顶部 */
      top: 0;
    }
  </style>
</head>

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

</html>

在这里插入图片描述

(7) 定位的堆叠顺序

文档流和浮动层以及定位层

堆叠顺序: 定位层 > 浮动层 > 文档流

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .a {
      width: 200px;
      height: 200px;
      background-color: orange;
      /* 定位 */
      position: absolute;
    }

    .b {
      width: 300px;
      height: 300px;
      background-color: pink;
      /* 浮动 */
      float: left;
    }

    .c {
      width: 400px;
      height: 400px;
      background-color: purple;
    }
  </style>
</head>

<body>
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</body>

</html>

在这里插入图片描述
定位元素的堆叠顺序

在默认的条件下,后面的元素会覆盖前面的元素,可以通过 z-index 的值进行堆叠顺序的调节.

属性值: 数据类型,数值越大越在上面

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      position: absolute;
      left: 0;
      top: 0;
    }

    .a {
      width: 200px;
      height: 200px;
      background-color: orange;
      z-index: 1;
    }

    .b {
      width: 300px;
      height: 300px;
      background-color: pink;
    }

    .c {
      width: 400px;
      height: 400px;
      background-color: purple;
      z-index: -1;
    }
  </style>
</head>

<body>
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</body>

</html>

在这里插入图片描述

(8) 常用技巧

fixed 定位: 一般用于广告或者导航
sticky 定位: 导航
定位元素的嵌套使用: 父相子绝

	父元素相对定位,子元素绝对定位
	为什么这么做?
		父元素相对定位,父元素不脱离文档流,对后面的元素没有任何布局的影响
		子元素绝对定位,参照物就是父元素,这样可以保证定位属性设置

十三、阴影

(1) 文本阴影

text-shadow: x 轴偏移量 y 轴偏移量模糊程度颜色;
letter-spacing: 字间距

(2) 盒子阴影

box-shadow: x 轴偏移量 y 轴偏移量模糊距离阴影大小阴影颜色阴阳位置;

十四、CSS3 中的边框圆角

border-radio 设置边框圆角

十五、盒子相关

box-sizing 属性值可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)
属性值有两个:

content-box 标准盒设置元素的 width/height 时,元素真实展示的高度与宽度会更大(因为元素的边框与内边框也计算在 width/height 中)
border-box 怪异盒 padding(内边距) border(边框) 也包含在 width 和 height 中

十六、浏览器新特性的使用

格式: 前缀-属性名

谷歌和苹果浏览器: -webkit- 属性名
火狐浏览器: -moz- 属性名
欧朋浏览器: -o- 属性名
IE 浏览器: -ms- 属性名

背景裁剪只有文字部分显示

-webkit-background-clip: text;
-moz-background-clip: text;
-o-background-clip: text;
-ms-background-clip: text;
background-clip: text;

十七、多背景

背景图片支持多张背景图的设置
注意事项: 小图放在前面,大图放在后面.当多张图片出现堆叠效果,显示的是前面的效果

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 80%;
      height: 600px;
      border: 1px solid red;
      margin: 0 auto;
      /* 背景图片支持多张背景图片的设置 */
      /* 将小的图片放到前面，大的图片放到后面 */
      background-image: url('imgs/bg3.png'), url('imgs/bg2.png'), url('imgs/bg1.jpg');
      background-repeat: no-repeat;
      background-position: 650px 200px, 300px 200px, 0 0;
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

在这里插入图片描述

十八、渐变色

线性渐变: linear-gradient

径向渐变: radial-gradient

渐变色属于 css 函数,加变色属于背景图片不属于背景颜色。 属性名必须使用 background-image

CSS 函数
在这里插入图片描述

(1) 线性渐变: linear-gradient (方向,颜色)

方向: 可以使用关键字、可以使用角度

颜色: 多个颜色之间使用逗号分隔的,最少为两种颜色.可以设置每个颜色开始的位置,可以在颜色后面添加百分比

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      float: left;
      margin-left: 5%;
    }

    .box {
      width: 40%;
      height: 400px;
      border: 1px solid red;
      /* 线性渐变 */
      background-image: linear-gradient(to right, red, yellow);
      background-image: linear-gradient(to right bottom, red, yellow);
      background-image: linear-gradient(0deg, red, yellow);
      background-image: linear-gradient(235deg, red, yellow);
    }

    .box1 {
      width: 40%;
      height: 400px;
      border: 1px solid red;
      /* 线性渐变 */
      background-image: linear-gradient(to right, red 0%, yellow 30%, pink 50%, purple 80%);
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <div class="box1"></div>
</body>

</html>

在这里插入图片描述

(2) 径向渐变:radial-gradient (设置圆形及圆心的位置,颜色)

设置圆形和圆心的位置:位置由方向确定,图形 : clicle(圆形) 、 ellipse(椭圆)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      float: left;
      margin-left: 5%;
    }

    .box {
      width: 40%;
      height: 400px;
      border: 1px solid red;
      /* 径向渐变 */
      background-image: radial-gradient(circle at center, red, yellow, orange);
      background-image: radial-gradient(ellipse at center, red, yellow, cyan);
    }

    .box1 {
      width: 40%;
      height: 400px;
      border: 1px solid red;
      background-image: radial-gradient(ellipse at left bottom, purple 0%, cyan 50%, yellowgreen 70%);
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <div class="box1"></div>
</body>

</html>

在这里插入图片描述

十九、2D 动画

	缩放、旋转、偏移、倾斜

属性名: transform (变形)
属性值:

缩放: scale
旋转: rotate
偏移: translate
偏移: skew

2D 分为 x 轴和 y 轴, 3D 分为 x 轴、y轴和z轴

(1) 缩放 scale

li:nth-child(1):hover {
  /* 一个值： 代表宽度和高度 */
  transform: scale(1.2);
}

li:nth-child(2):hover {
  /* 两个值： 第一个值代表宽度 第二个值代表高度 */
  transform: scale(1.2, .8);
}

li:nth-child(3):hover {
  /* 指定轴发生变化 */
  transform: scaleX(1.2);
}

li:nth-child(4):hover {
  /* 指定轴发生变化 */
  transform: scaleY(1.2);
}

(2) 旋转 rotate

li:nth-child(1):hover {
  /* 一个值： 代表沿Z轴旋转 */
  /* rotate(参数放置的是要旋转到的角度) */
  transform: rotate(45deg);
}

li:nth-child(2):hover {
  transform: rotateZ(45deg);
}

li:nth-child(3):hover {
  transform: rotateX(30deg);
}

li:nth-child(4):hover {
  transform: rotateY(30deg);
}

li:nth-child(5):hover {
  transform: rotateY(30deg) rotateX(30deg) rotateZ(30deg);
}

(3) 偏移 translate

单位: px 和 %

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      overflow: hidden;
    }

    li {
      list-style: none;
      float: left;
      margin: 20px;
      width: 250px;
      border: 1px solid red;
    }

    img {
      width: 100%;
    }

    li:nth-child(1):hover {
      /* 一个值代表的是x */
      transform: translate(100px);
    }

    li:nth-child(2):hover {
      /* 第一个值代表x，第二个值代表y */
      transform: translate(100px, 200px);
    }

    li:nth-child(3):hover {
      /* 百分比的参照物是自己的宽度 */
      transform: translateX(50%);
    }

    li:nth-child(4):hover {
      /* 相对于自己的高度 */
      transform: translateY(50%);
    }

    /* 定位元素的居中问题 */
    .relative {
      width: 400px;
      height: 400px;
      margin: 20px auto;
      background-color: pink;
      position: relative;
    }

    .absolute {
      width: 200px;
      height: 200px;
      background-color: orange;
      position: absolute;
      /* 定位元素居中 */
      /* 水平居中 */
      /* 此时的left百分比，参照物是父元素的宽度 */
      left: 50%;
      /* 偏移自身宽度的一半 */
      /* transform: translateX(-50%); */
      /* 垂直居中 */
      /* 此时的top百分比，参照物是父元素的高度 */
      top: 50%;
      /* 偏移自身高度的一半 */
      /* transform: translateY(-50%); */
      transform: translate(-50%, -50%);
    }
  </style>
</head>

<body>
  <ul>
    <li><img src="imgs/0.jpg" alt=""></li>
    <li><img src="imgs/1.jpg" alt=""></li>
    <li><img src="imgs/2.jpg" alt=""></li>
    <li><img src="imgs/3.jpg" alt=""></li>
    <li><img src="imgs/4.jpg" alt=""></li>
  </ul>
  <div class="relative">
    <div class="absolute"></div>
  </div>
</body>

</html>

⭐ 定位元素的水平居中

left:50%;
transform:translateX(-50%);

⭐ 定位元素的垂直居中

top:50%;
transform:translateY(-50%);

⭐ 定位元素的垂直水平居中

left:50%;
top:50%;
transform:translate(-50%,-50%);

(4) 倾斜 skew

li:nth-child(1):hover {
  /* 一个值：代表是x */
  transform: skew(30deg);
}

li:nth-child(2):hover {
  /* 第一个值代表x，第二个值代表y */
  transform: skew(30deg, 40deg);
}

li:nth-child(3):hover {
  transform: skewX(30deg);
}

li:nth-child(4):hover {
  transform: skewY(30deg);
}

二十、过渡

过渡是元素从一种样式逐渐改变为另一种的效果

过渡需要触发条件: 如: 鼠标滑过 :hover 获取焦点 :focus

css 的样式的转换,有两种方式,一种为从一个状态直接到达另一个状态,称之为干崩效果,从一个状态到另一个状态是一个渐进的过程,称之为动画的效果

过渡: transition:

属性有:

transition-property: 过渡的属性,all 代表所有属性,必须属性
transition-duration: 过渡的时间
transition-timing0function: 过渡时运动的曲线,支持贝塞尔曲线 值 ease ease-in ease-out ease-in-out cubic-bezier(贝塞尔曲线)
transition-delay: 过渡的延迟时间

简写: transition:property duration delay timing-function;

注意: 不是所有的 css 属性都支持过渡效果,一半为数值类型的都支持,背景图片不支持过渡效果

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 300px;
      height: 300px;
      margin: 200px;
      border: 1px solid red;
      float: left;
    }

    .box1 {
      background-color: pink;
      /* 过渡属性， 过渡时间， 运动曲线， 延迟时间 */
      transition: all 1s linear 1s;
      transition: all 2s;
    }

    .box2 {
      background-color: orange;
      /* 过渡属性 */
      transition-property: width;
      /* 过渡时间 */
      transition-duration: 2s;
      /* 过渡曲线 */
      transition-timing-function: ease-in-out;
      /* 过渡的延迟时间 */
      transition-delay: 1s;
    }

    .box1:hover {
      background-color: cyan;
      width: 400px;
      height: 200px;
      transform: rotate(360deg);
    }

    .box2:hover {
      background-color: purple;
      width: 400px;
      height: 200px;
      transform: rotate(180deg);
    }
  </style>
</head>

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

</html>

在这里插入图片描述

二十一、动画

动画和过渡的区别: 过渡只是一段动画,动画可以多段执行,过渡需要靠一些事件驱动,动画可以自己主动、重复执行

属性: animation

属性值:

animation-name: 动画的名称
animation-duration: 动画的时间
animation-delay: 动画执行的延迟时间
animation-timing-function: 动画的速度曲线,支持贝塞尔曲线
animation-iteration-count: 动画的执行次数, infinite 表示无线循环
animation-direction: 动画的方向
- 属性值:
- 1. normal 正向播放
- 1. reverse 反向播放
- 1. alternate 奇数次正向播放,偶数次反向播放
- 1. alternate-reverse 偶数次正向播放,奇数次反向播放
animation-fill-mode: forwards 可以保留动画最后一帧的效果,动画运行结束那个效果保留

以上所有属性简写的方式
animation: name duration delay timing-function iteration-count direction;

控制动画的播放状态
animation-play-state:paused; 默认是 running 运动 ,设置 paused 停止

动画的声明:
@keyframes 动画的名字 {
  from {
    装填
  }

  20% {
    状态
  }

  30% {
    状态
  }

  ......... to {
    装填
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 50px;
      height: 50px;
      background-color: orange;
      border-radius: 50%;
      position: absolute;
      /* 调用动画 */
      /* animation: name duration timing-function delay iteration-count direction fill-mode; */
      /* 动画名称 */
      animation-name: run;
      /* 动画过渡时间 */
      animation-duration: 5s;
      /* 动画的运动曲线 */
      animation-timing-function: ease-in-out;
      /* 动画的延迟时间 */
      animation-delay: 2s;
      /* 动画运动的次数 */
      /* animation-iteration-count: 3; */
      animation-iteration-count: infinite;
      /* 动画的运动方向 */
      animation-direction: alternate;
      /* 动画状态保存 */
      animation-fill-mode: forwards;
    }

    /* 定义动画 */
    @keyframes run {
      from {
        left: 0;
        top: 0;
      }

      20% {
        left: 500px;
        top: 0;
      }

      30% {
        left: 500px;
        top: 0;
      }

      to {
        left: 500px;
        top: 400px;
      }
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

在这里插入图片描述

二十二、滚动轮播图

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .carousel {
      border: 1px solid #000;
      width: 560px;
      height: 300px;
      margin: 100px auto;
      position: relative;
      overflow: hidden;
    }

    .imgs {
      position: absolute;
      left: 0;
      top: 0;
      list-style: none;
      width: 9999px;
      animation: run 10s infinite;
    }

    .imgs li {
      float: left;
    }

    @keyframes run {
      from {
        left: 0;
        top: 0;
      }

      10% {
        left: 0;
        top: 0;
      }

      20% {
        left: -560px;
      }

      30% {
        left: -560px;
      }

      40% {
        left: -1120px;
      }

      50% {
        left: -1120px;
      }

      60% {
        left: -1680px;
      }

      70% {
        left: -1680px;
      }

      80% {
        left: -2240px;
      }

      90% {
        left: -2240px;
      }

      to {
        left: -2800px;
      }
    }
  </style>
</head>

<body>
  <div class="carousel">
    <ul class="imgs">
      <li><img src="imgs/0.jpg" alt=""></li>
      <li><img src="imgs/1.jpg" alt=""></li>
      <li><img src="imgs/2.jpg" alt=""></li>
      <li><img src="imgs/3.jpg" alt=""></li>
      <li><img src="imgs/4.jpg" alt=""></li> <!-- 添加最后一张图片和第一张图相同，猫腻图 -->
      <li><img src="imgs/0.jpg" alt=""></li>
    </ul>
  </div>
</body>

</html>

二十三、立方体

X 轴: 水平向右
Y 轴: 垂直向下
Z 轴: 垂直 x 轴和 y 轴向外

	知识点:
		图片变形: transform
		属性: 偏移: translateZ 、  旋转:rotateX、 roateY

实现的思路:

父元素必须设置保留子元素的 3D 效果: transform-style:preserve-3d
让子元素默认堆叠在一块,使用父相子绝的定位方式
产生各个方便:进行了 Z 轴的偏移,偏移的值为 translateZ(正负宽度的一半),配和面的旋转
1. 前后面:不需要旋转
2. 上下面:沿 x 轴旋转 90 度
3. 左右面:沿 y 轴旋转 90 度

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 300px;
      height: 300px;
      font-size: 50px;
      line-height: 300px;
      text-align: center;
    }

    .box {
      margin: 100px auto;
      /* border: 1px solid red; */
      /* 相对定位 */
      position: relative;
      /* 立方体： 3D效果的展示必须父元素进行设置子元素保留3D效果 */
      transform-style: preserve-3d;
      /* background-color: rgba(0, 0, 0, .5); */
      /* 让父元素旋转一定角度，方便观看 */
      transform: rotateX(10deg) rotateY(60deg);
    }

    .box div {
      /* 绝对定位 */
      position: absolute;
      left: 0;
      top: 0;
    }

    .forward {
      transform: translateZ(150px);
      background-color: rgba(255, 0, 0, .5);
    }

    .back {
      transform: translateZ(-150px);
      background-color: rgba(0, 255, 0, .5);
    }

    .top {
      transform: rotateX(90deg) translateZ(150px);
      background-color: rgba(0, 0, 255, .5);
    }

    .bottom {
      transform: rotateX(90deg) translateZ(-150px);
      background-color: rgba(0, 255, 255, .5);
    }

    .left {
      background-color: rgba(255, 0, 255, .5);
      transform: rotateY(90deg) translateZ(-150px);
    }

    .right {
      background-color: rgba(255, 255, 0, .5);
      transform: rotateY(90deg) translateZ(150px);
    }
  </style>
</head>

<body>
  <div class="box">

    <div class="forward">前面</div>
    <div class="back">后面</div>
    <div class="left">左面</div>
    <div class="right">右面</div>
    <div class="top">上面</div>
    <div class="bottom">下面</div>
  </div>
</body>

</html>

在这里插入图片描述

(1) 立方体的旋转

鼠标滑过立方体旋转和图片的转动

鼠标离开立方体立方体停止旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 300px;
            height: 300px;
            font-size: 50px;
            line-height: 300px;
            text-align: center;
        }
        .box {
            margin: 300px auto;
            /* border: 1px solid red; */
            /* 相对定位 */
            position: relative;
            /* 立方体： 3D效果的展示必须父元素进行设置子元素保留3D效果 */
            transform-style: preserve-3d;
            /* background-color: rgba(0, 0, 0, .5); */
            /* 让父元素旋转一定角度，方便观看 */
            transform: rotateX(43deg) rotateY(60deg);
            
        }
        .box div {
            /* 绝对定位 */
            position: absolute;
            left: 0;
            top: 0;
        }
        .forward {
            transform: translateZ(150px);
            background-color: rgba(255, 0, 0, .5);
        }
        .back {
            transform: translateZ(-150px); 
            background-color: rgba(0, 255, 0, .5);
        }
        .top {
            transform: rotateX(90deg) translateZ(150px);
            background-color: rgba(0, 0, 255, .5);
        }
        .bottom {
            transform: rotateX(90deg) translateZ(-150px);
            background-color: rgba(0, 255, 255, .5);
        }
        .left {
            background-color: rgba(255, 0, 255, .5);
            transform: rotateY(90deg) translateZ(-150px);
        }
        .right {
            background-color: rgba(255, 255, 0, .5);
            transform: rotateY(90deg) translateZ(150px);

        }
        div img {
            width: 100%;
            height: 100%;
        }
        .box:hover .forward{
            transform: translateZ(200px);
        }
        .box:hover .top{
            transform: rotateX(90deg) translateZ(200px);
        }
        .box:hover .right{
            transform: rotateY(90deg) translateZ(200px);

        }
        .box:hover .back{
            transform: translateZ(-200px);
        }
        .box:hover .bottom{
            transform: rotateX(90deg) translateZ(-200px);
        }
        .box:hover .left{
            transform: rotateY(90deg) translateZ(-200px);
        }
        
        .box:hover {
            animation: zhuan 5s;
        }
        @keyframes zhuan {
            from {
                transform: rotateX(30deg) rotateY(30deg);
            }
            to {
                transform: rotateX(390deg) rotateY(390deg);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="forward"><img src="./imgs/1.jpg" alt=""></div>
        <div class="back"><img src="./imgs/2.jpg" alt=""></div>
        <div class="left"><img src="./imgs/3.jpg" alt=""></div>
        <div class="right"><img src="./imgs/4.jpg" alt=""></div>
        <div class="top"><img src="./imgs/5.jpg" alt=""></div>
        <div class="bottom"><img src="./imgs/6.jpg" alt=""></div>
    </div>
</body>
</html>

二十四、 CSS3D 属性

(1) scale 对正方体的影响

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 300px;
            height: 300px;
            font-size: 50px;
            line-height: 300px;
            text-align: center;
        }
        .box {
            margin: 300px auto;
            /* border: 1px solid red; */
            /* 相对定位 */
            position: relative;
            /* 立方体： 3D效果的展示必须父元素进行设置子元素保留3D效果 */
            transform-style: preserve-3d;
            /* background-color: rgba(0, 0, 0, .5); */
            /* 让父元素旋转一定角度，方便观看 */
            /* transform: rotateX(30deg) rotateY(30deg) scaleX(2); */
            /* transform: rotateX(30deg) rotateY(30deg) scaleY(2); */
            transform: rotateX(30deg) rotateY(30deg) scaleZ(2);
        }
        .box div {
            /* 绝对定位 */
            position: absolute;
            left: 0;
            top: 0;
        }
        .forward {
            transform: translateZ(150px);
            background-color: rgba(255, 0, 0, .5);
        }
        .back {
            transform: translateZ(-150px); 
            background-color: rgba(0, 255, 0, .5);
        }
        .top {
            transform: rotateX(90deg) translateZ(150px);
            background-color: rgba(0, 0, 255, .5);
        }
        .bottom {
            transform: rotateX(90deg) translateZ(-150px);
            background-color: rgba(0, 255, 255, .5);
        }
        .left {
            background-color: rgba(255, 0, 255, .5);
            transform: rotateY(90deg) translateZ(-150px);
        }
        .right {
            background-color: rgba(255, 255, 0, .5);
            transform: rotateY(90deg) translateZ(150px);

        }
        
    </style>
</head>
<body>
    <div class="box">
        <div class="forward"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</body>
</html>

在这里插入图片描述

(2) 背面不可见性

backface-visibility:hidden;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            position: relative;
            width: 400px;
            height: 300px;
            border: 1px solid #000;
            margin: 100px auto;
          
        }
        .box img {
            position: absolute;
            width: 100%;
            height: 100%;
            transition: all 1.5s;
            /* 背面不可见属性 */
            backface-visibility: hidden;
        }
        .box img:last-child {
            transform: rotateX(180deg);
        }
        .box img:first-child {
            z-index: 1;
        }
        .box:hover img {
            transform: rotateX(180deg);
        }
        .box:hover img:last-child {
            z-index: 2;
            transform: rotateX(360deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="imgs/1.jpg" alt="">
        <img src="imgs/2.jpg" alt="">
    </div>
</body>
</html>

在这里插入图片描述

(3) 旋转中心

属性名: transform-origin
属性值:

关键字: left right center top bottom
支持像素值 px
支持百分比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: orange;
            margin: 100px auto;
            transition: all 1s;
            /* 旋转中心的设置 */
            /* 关键字 */
            transform-origin: left top;
            transform-origin: right bottom;
            transform-origin: left center;
            /* px */
            transform-origin: 0px 300px;
            /* 百分比 */
            transform-origin: 100% 50%;
        }
        div:hover {
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在这里插入图片描述

(4) 景深 perspective

值为数字加单位 (px)
景深的实现: 将用户看作为观众,元素则为演员,元素的父元素为舞台.景深就是调节舞台和观众之间的距离。默认情况下,在浏览器展示的景深无论为多少,都是设置值的大小。通过调节 translateZ 来调节演员和观众之间的距离。距离越近看到的图像越大,距离越远看到的图像越小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 499px;
            height: 333px;
            border: 1px solid #000;
            margin: 100px auto;
            perspective: 200px;
        }
        img {
            transform: translateZ(-50px);
        }
    </style>
</head>
<body>
    <div class="box"><img src="imgs/1.jpg" alt=""></div>
</body>
</html>

在这里插入图片描述

二十五、百分比布局

盒模型: width 、 height 、 padding 、 border 、 margin
结论:

边框 border 不能使用百分比
width、padding、margin 参照物父元素的 width (前提该盒子不是一个怪异盒),内容盒的宽度 content-box;
height: 参照物为父元素的高度 height,当前元素的父元素不能为 body

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .carousel {
            width: 800px;
            height: 600px;
            border: 1px solid #000;
            padding: 50px;
            margin: 0 auto;
        }
        .box {
            border: 1px solid red;
            width: 50%;
            height: 50%;
            background-color: orange;
            padding: 10%;
            margin: 20%;
        }
    </style>
</head>
<body>
    <div class="carousel">
        <div class="box"></div>
    </div>
</body>
</html>

父元素
在这里插入图片描述
子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            width: 800px;
            height: 600px;
            background-color: pink;
            margin: 0 auto;
            position: relative;
            padding: 50px;
            border: 10px solid #000;
        }
        .carousel {
            width: 600px;
            height: 300px;
            background-color: orange;
            margin: 0 auto;
            border: 1px solid #000;
        }
        .box {
            width: 50%;
            height: 50%;
            margin: 10%;
            padding: 5%;
            background-color: purple;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="carousel">
            <div class="box"></div>
        </div>
    </div>
</body>
</html>

注意事项: 当元素存在绝对定位的时候,父元素为定位父元素而不是结构父元素

定位之前
在这里插入图片描述
定位之后

定位父元素

定位子元素

在这里插入图片描述
定位父元素相对于时父元素的 padding-box,而不是内容盒 content-box

二十六、面试题

在 body 体内声明一个 div,让 div 的为一个正方形,边长为 body 宽度一半

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            background-color: orange;
            /* width: 50%; */
            /* padding: 25% 0px; */
            border: 1px solid #000;
            /* 默认宽度为100% */
            width: 0;
            padding: 25%;

        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这里插入图片描述

二十七、flex 布局

flex 布局: 弹性布局伸缩布局

(1) display

flex 和 inline-flex 不会影响弹性盒本身,改变当前元素的显示状态。

(2) 构成

容器和项目
只要元素设置为 flex ,则当前元素变成了容器,里面的子元素自动成为了项目.
项目沿着容器的主轴进行排列
容器里面默认会有主轴和 交叉轴 的存在

(3) flex-direction

主轴的方向

row 默认值
row-reverse
column
column-reverse

(4) 项目在主轴上换行

flex-wrap:
属性值:

nowrap
wrap
wrap-reverse

(5) flex-flow

flex-flow:flex-direction flex-wrap;

(6) 项目在主轴的排列方式(存在空白)

justify-content
属性值:

flex-start
flex-end
center
space-around
space-between

二十八、flex 容器属性

(1) align-items

项目在交叉轴的排列方式
在这里插入图片描述
flex-start

flex-end

center

baseline

stretch

(2) align-content

当出现多根主轴线时,多跟轴线的对齐方式。判断是否出现多根轴线,判断项目是否进行了换行。换行出现多个轴线,没有换行不会出现多根轴线
在这里插入图片描述
stretch: 默认值轴线沾满整个高度(不设置项目的高度)

flex-start

flex-end

center

space-between

space-around

二十九、 flex 的项目属性

(1) order

项目的排列顺序,根据 order 值做一个升序排列

.box:nth-child(1) {
    /* order的默认值为0 */
    order: 4;
}

.box:nth-child(3) {
    order: -1;
}

.box:nth-child(4) {
    order: 2;
}

.box:nth-child(2) {
    order: 3;
}

在这里插入图片描述

(2) flex-grow

存在剩余空间项目的放大属性,默认值为 0 表示不放大

.box {
    width: 200px;
    height: 200px;
    background-color: orange;
    font-size: 30px;
    text-align: center;
    line-height: 200px;
    color: red;
    border-radius: 50%;
    flex-grow: 1;
}

.box:nth-child(1) {
    flex-grow: 2;
}

在这里插入图片描述

(3) flex-shrink

空间不足时,元素的缩小,默认值为1,在默认情况下,项目都进行等比例缩放

如果所有项目的flex-shrink 属性都为1 ,当空间不足时,都将等比例缩小。

如果一个项目的 flex-shrink 属性为0,其他项目都为 1,则空间不足时,前者不缩小

.box {
    width: 200px;
    height: 200px;
    background-color: orange;
    font-size: 30px;
    text-align: center;
    line-height: 200px;
    color: red;
    border-radius: 50%;
}

.box:nth-child(1) {
    flex-shrink: 2;
}

.box:nth-child(3) {
    flex-shrink: 0;
}

在这里插入图片描述

(4) flex-basis(了解)

设置项目的宽度

在分配多余空间之前,项目占据的主轴空间(main size) 。

浏览器根据这个属性,计算主轴是否有多余空间.它的默认值为 auto 即项目的本来大小

(5) flex

flex 属性是 flex-grow,flex-shrink和 flex-basis 的简写,默认值为 0 1 auto, 后两个属性可选

flex-grow:2; 等价关系 flex:2;

属性值:

auto: 1 1 auto; 等比例缩放,宽度为自适应
none:0 0 auto; 不进行缩放,宽度为自适应

注意: 官方推荐使用该复合属性取代 flex-grow 和 flex-shrink 和 width 的写法

.box:nth-child(1) {
    flex: auto;
}

.box:nth-child(2) {
    flex: 2 2 auto;
}

.box:nth-child(4) {
    flex: none;
}

在这里插入图片描述

(6) align-self

允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性, 默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch
在这里插入图片描述
注意: flex 布局不能在使用浮动,margin 和 padding 都可以使用。浮动在 flex 布局的时候失效了。