css基础

CSS样式

css简介

css 是层叠样式表，简单说就是 css样式表

css也是一种标记语言，主要用于设置HTML页面中的文本内容（字体大小，对齐方式等待），图片的外形，以及版面的布局

css就是美化HTML，让页面更加漂亮

• 语法规范：

  css规则由两个主要部分构成：选择器以及一条或多条声明。

---

---

• 😉 选择器用于指定css样式的HTML标签，花括号内是对该对象设置的具体样式

• 🤣 属性和属性值是以 " 键值对 " 的形式出现

• 😇 属性是对指定的对象设置的样式属性，例如字体大小，文本颜色

• 😆 属性和属性值之间用英文 : 分开

• 😋 多个 “键值对” 之间用英文 ; 分开

css的引入方式

css 样式表的引入方式有3种

1. 行内样式表（行内式）

   

2. 内部样式表（嵌入式）

   

3. 外部样式表（链接式） 推荐

   

   <link rel="stylesheet" href="css文件路径">
   

css基础选择器✅

基础选择器包括：

• 标签选择器

• 类选择器

• id选择器

• 通配符选择器

标签选择器

标签选择器（元素选择器）是指的是HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一css样式

语法：

标签名:{
    属性名1 : 属性值1;
    ...
    属性名n : 属性值n;
}

⚠️ 标签选择器有一个缺点，就是只要是css样式表中有对应的标签样式，那么HTML中所对应的标签都会被影响

类选择器🚩

如果想要差异化选择不通过的标签，单独选一个或者某几个标签，可以使用类选择器

语法:

css 样式表中

.类名{
    属性 : 属性值
}

在HTML标签中

<h1 class = "类名">
    我是h1标题
</h1>

⚠️ 给最后一个p段落标签设置了别的颜色，由此可见，样式是可以被覆盖的

⚠️ 一个标签是可以有多个类名的

三个类名如下：mycss abc efg

<h1 class = "mycss abc efg">
    我是h1标题标签
</h1>

1. 类选择器在HTML中以css属性表示，在css中，类选择器以一个点 . 号表示

2. 类选择器使用 . 英文点号进行表示，后面紧跟类名，类名是自定义

3. 可以理解给这个标签起一个名字

4. 类名不要使用纯数字，中文，类名过长可以使用 - 进行连接

id选择器🚩

id选择可以为标有特定id的HTML元素指定的样式

HTML元素以id属性来设置id选择器，css中id选择器以 # 来定义

语法：

css样式表

#mycss{
    属性 : 属性值
}

HTML标签

<h1 id = "mycss">
    我是h1标题标签
</h1>

⚠️ id属性只能在HTML文档中出现一次，就像标签的身份证一样

⚠️ 类选择器和id选择器的区别

① 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。

② id 选择器好比人的身份证号码，全中国是唯一的，不得重复。

③ id 选择器和类选择器最大的不同在于使用次数上。

④ 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用

通配符选择器

在css中，通配符选择器使用 * 定义 ，表示选取页面中的所有元素标签

语法：

*{
    属性 : 属性值
}

• 通配符选择器不需要调用，自动就给所有的元素使用样式
• 特殊情况才使用，一般是给元素清楚内外边距，reset重置标签特有的样式

css字体属性

fonts字体属性用于定义字体系列，大小，粗细和文本样式

font-family字体系列

p{
    font-family:"微软雅黑"
}
div{
    font-family:Arial,"Microsoft Yahei","微软雅黑"
}

• 各个字体之间必须使用英文状态下的逗号隔开

• 尽量使用系统自带的字体，保证所有的浏览器都能正确解析

自定义字体：

1. 下载字体文件保存在项目进行引用

   

2. @font-face 进行定义字体

   @font-face {
       font-family: 'MyCustomFont'; /* 自定义字体名称 */
       src: url('fonts/XingCao.ttf') format('truetype'); /* TTF 文件 */
       font-weight: normal; /* 设置字体粗细 */
       font-style: normal; /* 设置字体样式 */
   }
   

3. 使用font-family进行引用自定义的字体

   p{
       font-family: MyCustomFont;
   }
   

   

font-size字体大小✅

• font-size 属性定义字体的大小

  p{
      font-size: 20px
  }
  

  • px (像素) 大小是我们网页的最常用的单位
  • 谷歌浏览器默认的文字大小为16px
  • 不同浏览器默认显示的字号大小不一致
  • 可以给body指定整个页面文字的大小

font-weight字体粗细✅

• 使用font-weight属性设置文本字体的粗细

格式：

p{
    font-weight:bold;
}

属性值	描述
normal	默认值（不加粗）
bold	定义粗体（加粗）
100-900	400等同于normal，700等同于bold。注意数字后面不跟单位

font-style字体风格

css使用font-style属性设置文本风格

格式：

p{
    font-style:normal;
}

font-style有两个取值：

• normal：默认值，浏览器会显示标准的字体样式
• italic：浏览器会显示斜体的字体样式

字体复合属性

字体属性可以把以上文字样式综合来写

格式：

p{
    font:font-style font-weight font-size/line-height font-family;
}

• 使用font复合属性，必须按照上面格式的顺序，不能更换，并且属性之间以空格隔开
• 不需要设置的属性可以省略（取默认值），但是必须保留font-size和font-family属性，否则font属性不起作用

css文本属性

文本属性可以定义文本的外观、颜色、对齐方式、装饰文本、文本缩进、行间距等

例如：

div{
    color:#000; // 
    text-align:center;
    text-decoration : underline;
    text-indent: 10px;
    line-height: 26px;
}

属性	表示	注意点
color	文本颜色	通常用十六进制，例如：#000
text-align	文本对齐	可以设定文字水平的对齐方式
text-indent	文本缩进	通常用于段落首行缩进2个字的距离 ，text-indent : 2em
text-decoration	文本修饰	下划线 underline , 取消下滑线，none
line-height	行高	控制行与行之间的距离

• text-align的可取值是 ✅
  • left 左对齐
  • center 居中对齐
  • right 右对齐
• text-decoration 的可取值是
  • none 默认，没有装饰线。常用 ✅
  • underline 下划线。比如超链接 a 标签自带下划线
  • overline 上划线，
  • line-through 删除线

---

css复合选择器✅

复合选择器是建立在基础选择器之上，对基础选择器进行组合而成

• 复合选择器可以更准确，更高效的选择目标元素
• 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成
• 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

后代选择器

后代元素又称为包含选择器，可以选择父元素里面的子元素。写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

语法

元素1 元素2 {
    属性 : 属性值
}

表示给元素1里面的所有元素2设置样式

ul li{
    color: red;
}

• 元素1和元素2中间用空格隔开
• 元素1是父级，元素2是子级，最终选择的是元素2
• 元素2可以是儿子，也是可以是孙子，只要是元素1的后代即可
• 元素1 和 元素2可以是任意的基础选择器

子选择器

子选择器只能选择作为父级元素最近的一级子元素，简单理解就是选亲儿子。

语法：

元素1 > 元素2 {
    属性 : 属性值
}

上述表示，选择元素1里面的所有直接后代（子元素）元素2

例如：

div > p{
    color:red;
}

• 元素1和元素2中间用 > 隔开
• 元素1 是父级，元素2是子级，最终选择的是元素2
• 元素2必须是亲儿子，其子孙，重孙之类都无法选取

并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的css样式，通常用于集体声明

并集选择器是各个选择器通过英文逗号 （ ， ） 连接而成，任何形式的选择器都可以作为并集选择器的一部分

语法：

元素1, 元素2 {
    属性 : 属性值
}

上述表示，给元素1和元素2设置css样式

ul , div {
    color:red;
}

• 元素1和元素2中间用逗号隔开
• 逗号可以理解为 “ 和 ” 的意思
• 并集选择器通常用于集体声明

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果
	比如给链接添加特殊效果，或选择第一个，第n个元素

伪类选择器书写的最大特点是用冒号 : 表示 ，例如  :hover  表示鼠标经过 ， :first-child 第一个元素

伪类选择器有很多，比如有链接伪类、结构伪类等

• 链接伪类选择器

  • :link
  • :visited
  • :hover
  • :active

  开发中常用的是 ：hover 鼠标经过

  /* 表示鼠标经过，文本颜色改成红色 */
  a:hover{
      color : red;
  }
  

• ：focus 伪类选择器，用于选取获取焦点的表单元素

  焦点就是光标，一般情况input表单元素才能获取光标

  input:focus{
      background-color:yellow;
  }
  

• :fist-child 选择第一个元素标签

  h3:first-child{
      color: red;
  }
  

  

css元素显示模式

html标签元素分为块元素和行内元素

块元素

常见的块元素： div 是典型的块元素

<h1> ~ <h6>  、 <p> 、<div> 、 <ul> 、<ol> 、<li>

特点：

1. 自己独占一行
2. 高度、宽度、外边距以及内边距都可以控制
3. 宽度默认是容器(父级宽度)的100%
4. 是一个容器盒子，里面可以放块元素和行内元素

注意：

• 文字类的元素内不能使用块级元素
• < p > 标签主要用于存放文字，因此 < p > 里面不能放块元素
• < h1> ~ < h6> 也是主要存放文字，也不能放其他块元素

行内元素

常见的行内元素：

<a> 、 <strong> 、<b> 、 <em> 、 <i> 、<span>

特点：

1. 相邻行内元素在一行上，一行可以显示多个
2. 高宽直接设置无效
3. 默认宽度就是它本身的宽度
4. 行内元素只能容纳文本或其他行内元素

注意：

• 超链接元素里面不能再放超链接

行内块元素

行内块元素有：

<img/> 、<input/> 、<td> 

它们同时具有块元素和行内元素的特点

特点：

1. 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
2. 默认宽度就是它本身的宽度（行内元素特点）
3. 高度、行高，外边距和内边距都可以控制（块级元素特点）

模式转换

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一中模式的特性，比如想要增加 超链接 a 标签的触发范围

• 转换为块元素

  元素{
      display:block;
  }
  

• 转换为行内元素

  元素{
      display:inline;
  }
  

• 转为为行内块元素

  元素{
      display:inline-block;
  }
  

单行文字垂直居中

css背景

通过设置css背景属性，可以给页面元素添加背景样式

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

background-position

利用background-position属性可以改变图片在背景中的位置

div{
    background-position:x y;
}

参数代表的意思是：x坐标和y坐标。可以使用方位名词或者精确单位

参数值	说明
length	百分数|浮点数
position	top | center | bottom | left | right （方位名称）

例如：设置图片在背景的左下角位置

1. 参数是方位名词
   • 如果指定两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
   • 如果只指定了一个方位名词，另一个省略，则第二个默认居中对齐
2. 参数是精确单位
   • 如果参数值是精确坐标，那么第一个肯定是x坐标，第二个是y坐标
   • 如果只指定一个数值，那么改数值一定是x坐标，另一个默认居中
3. 参数是混合单位
   • 如果指定两个值是精确单位和方位名称混用，则第一个值是x坐标，第二个值是y坐标

background-attachment

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动

background-attachment后期可以制作视差滚动效果

语法

元素{
    background-attachment: scroll | fixed;
}

• scroll 背景图像是随着对象内容滚动
• fixed 背景图像固定

复合写法

设定元素的背景时，可以使用background复合写法，类似字体设置的复合写法font

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

元素{
    background:red url(a.jpg) no-repeat fixed top left;
}

背景色半透明

css3提供背景色半透明效果

元素{
    background: rgba(0,0,0,0.5);
}

• 最后一个值是alpha透明度，取值在 0 ~ 1 之间
• 习惯把0.3 写成 .3 ，例如 background ：rgba(0,0,0,.3) ，但是还是推荐写成 0.3 ，可读性好

注意：

​ 背景半透明是指的盒子背景半透明，盒子里面的内容不受到影响

css三大特性✅

css 有三个特性：层叠性，继承性，优先级

层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突

的问题

层叠性原则：

 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式

 样式不冲突，不会层叠

前提：

​ 前面已经设置过css样式

​ 如果权重相同，重新给元素设置相同的样式，会进行覆盖之前的

继承性

子标签会继承父标签的某些样式，如文本的颜色，字号；可以理解为子承父业

• 子元素可以继承父元素的样式（text- , font - , line - 这些属性开头可以继承，以及color属性）
• 继承性口诀：龙生龙，凤生凤，老鼠的孩子会打洞

⚠️ 行高的继承性

body{
    font:12px/1.5 "微软雅黑";
}

• 行高可以跟单位也可以不跟。

  • font-height: 15 px 设定行高为15个像素
  • font-height: 1.5 设定行高为当前元素的font-size像素的1.5倍

• 由于body设定了行高，如果子元素没有设定行高，则会继承父元素的1.5倍行高。

  • 行内元素和行内块元素可以设置行高，典型的就是文本标签 如：h1 ~ h6 标题 ，p段落

• 此时子元素的行高是：当前子元素文字大小的 1.5倍

• body行高1.5，这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

优先级

当一个元素指定多个选择器，就会有优先级的产生。

• 选择器相同，则执行层叠性
• 选择器不同，则根据选择器权重执行

选择器	选择器权重
继承 或者 *	0000
元素选择器	0001
类选择器，伪类选择器	0010
id选择器	0100
行内样式 style = “”	1000
!important 最重要的	无穷大

⚠️注意：

1. 权重是有4位数字组成，但是不会有进位
2. 可以理解类选择器永远大于元素选择器，id选择器永远大于类选择器
3. 等级判断从左向右，如果某一位数值相同，则判断下一位数值
4. 可以简单记忆：继承和通配符权重为0，标签选择器位1，伪类或类选择器位10，id选择器位100，行内样式1000，!important无穷大
5. 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

⚠️权重叠加

如果是复合选择器，则会有权重叠加，需要计算权重

• div ul li ------> 0 0 0 3
• .nav ul li -------> 0 0 1 2
• a:hover ------> 0 0 1 1
• .nav a -------> 0 0 1 1

盒子模型🚩

📦️盒子模型：

​ 把HTML页面中的布局元素看做是一个矩形的盒子。也就是一个放内容的容器

​ css盒子模型本质上是一个盒子，封装周围的HTML元素，包括：边框、外边距、内边距、内容

border边框

border可以设置元素的边框，边框有三部分组成，边框宽度（粗细），边框样式，边框颜色

语法：

border:border-width | border-style | border-color;

1. border-width 顶一个边框粗细，单位px
2. border-style 边框样式
   • 边框样式有如下：
     • none：没有边框，默认值
     • solid ：边框为单实线（常用）
     • dashed：边框为虚线
     • dotted：边框为点线
3. border-color 边框颜色

• 边框简写

  border:1px solid red; 
  

• 边框分开写

  border-top: 1px solid red; // 只设定了上边框
  

🎯实践：请给一个 200*200 的盒子，设置上边框为红色，其余边框为蓝色（提示：一定注意边框的层叠性）

表格的细线边框✅

• border-collapse : 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框

  语法

  border-collapse :collapse;
  

  • collapse 单词是合并的意思
  • border-collapse : collapse ；表示相邻边框合并在一起

• 表格单元格边框没有合并的时候

  

• 使用css进行合并后

  

• 边框会影响盒子的实际大小

  • 测量盒子大小的时候不量边框‘
  • 测量盒子大小如果包含了边框，则需要width / height 减去边框的宽度

padding内边距

padding 属性用于设置内边距，边框到内容之间的距离

padding内边距的4种写法

属性值的个数	说明
padding: 5px ;	1个值，代表上下左右都有5个像素的内边距
padding: 5px 10px;	2个值，代表上下5像素，左右10像素的内边距
padding: 5px 10px 20px;	3个值，代表上5像素，左右10像素，下20像素的内边距
padding:5px 10px 20px 30px;	4个值，代表上5像素，右10像素，下20像素，左30像素 ， （顺时针）

当我们给盒子指定padding之后，发生了2件事：

1. 内容和边框有了距离，添加了内边距
2. padding影响了盒子实际大小

如果盒子已经有了宽度和高度，此时再指定padding内边距，会撑大盒子

解决：

​ 如果 要保证盒子跟之前一样大小，则需要让width / height减去多出来的内边距大小即可。（相应缩小盒子的宽度和高度）

margin外边距

margin属性用于设置外边距，即控制盒子与盒子之间的距离

盒子水平居中

外边距可以让块级盒子水平居中，但是必须满足两个条件：

1. 盒子必须指定了宽度

   1. 盒子左右的外边距都设置为auto

      margin: 0 auto;
      

• 常见的三种写法：
  1. margin-left: auto ; margin-right : auto;
  2. margin: auto;
  3. margin : 0 auto;

注意：以上方法是让块级元素水平据中国，行内元素或者行内块元素水平居中给其父元素添加text-algn:center

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并

主要有两种情况：

相邻块元素垂直外边距的合并

• 当上下相邻的两个块元素，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直距离不是margin-bottom和margin-top之和，而是取决于哪个值大，就使用哪个。

  取两个值中的较大者，这种现象被称为相邻块元素垂直外边距的合并。

  • 

  所以，尽量只给一个盒子添加margin值

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

解决方案：

1. 可以为父元素定义上边框
2. 可以为父元素定义内边距
3. 可以为父元素添加overflow:hidden；
4. 浮动、固定，绝对定位的盒子不会有塌陷问题

• 父元素有50px的上外边距，margin-top : 50px, 子元素没有设置上边距

  

• 父元素有50px的上外边距，子元素有25px 的上外边距，可以看到子元素还是紧贴着父元素，上外边距塌陷，直接延伸到外面了

  由于没有父元素的 50 px 大 ，所以看不出来

  

• 父元素有50px的上外边距，子元素有100px 的上外边距，可以看到子元素还是紧贴着父元素，上外边距塌陷，直接延伸到外面了

  由于子元素的上外边距100px > 父元素，直接把整个推下来

  

• 父元素没有上外边距，子元素有20px 的上外边距，可以看到子元素还是紧贴着父元素，上外边距塌陷，直接延伸到外面了

  由于子元素的上外边距20px > 父元素（0），还是直接把整个推下来

  

解决嵌套垂直外边距的塌陷:

• 给父元素设置上边框

  

• 给父元素设置内边距，比如设置0.01px的上内边距，应该不影响布局

  

• 父元素设置溢出隐藏，overflow:hidden

  

• 给父元素设置绝对定位

  

✅ 推荐做法，是父元素使用 overflow ：hidden ; 元素内容溢出隐藏

2.8.4、清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。所以，可以在布局前，给所有的元素清除内外边距。可以使用通配符来清除

*{
    padding:0;  /* 清除内边距 */ 
    margin: 0;  /* 清除外边距 */
}

⚠️ 注意：

行内元素，尽量只设置左右的内外边距，不要设置上下的内外边距。但是转换成块元素或者行内块元素就可以了

看看淘宝的清除，taobao.com 中的main.css

body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul {
    margin: 0;
    padding: 0
}

body,button,input,select,textarea {
    font: 12px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji,BlinkMacSystemFont,Helvetica Neue,Arial,PingFang SC,PingFang TC,PingFang HK,Microsoft Yahei,Microsoft JhengHei
}

h1,h2,h3,h4,h5,h6 {
    font-size: 100%
}

address,cite,dfn,em,var {
    font-style: normal
}

code,kbd,pre,samp {
    font-family: courier new,courier,monospace
}

small {
    font-size: 12px
}

ol,ul {
    list-style: none
}

圆角边框

css3中新增了圆角边框样式，可以是盒子的四个角变成圆角

border-adius属性用于设置元素的外边框圆角

语法

border-radius: length;

• 参数值可以是数值或者百分比的形式
• 如果是正方形，想要设置一个圆，把数值修改为高度或者宽度的一般即可，或者直接写 50 %
• 圆角属性可以简写，可以跟四个值，分别代表左上角、右上角、右下角、左下角
• 分开写的形式：
  • 左上角： border-top-left-radius
  • 右上角： border-top-right-radius
  • 右下角： border-bottom-right-radius
  • 左下角： border-bottom-left-radius

盒子阴影

box-shadow属性为盒子添加阴影

div{
   width: 100px;
   height: 100px;
   border: 1px solid red;
   border-radius: 10px;
   box-shadow: 0 8px 32px 0 rgba(10,10,51,.12),0 0 16px 0 rgba(0,0,0,.04);
}

语法：

box-shadow:h-shadow v-shadow blur spread color inset

属性值	描述
h-shadow	水平阴影的位置，允许负值 （必须）
v-shadow	垂直阴影的位置，允许负值 （必须）
blur	模糊距离。（可选）
spread	阴影的尺寸。（可选）
color	阴影的颜色。（可选）
inset	将外部阴影改成内部阴影（可选）

浏览器提供了很好的调试盒子阴影，简直不要太好了

文字阴影

使用 text-shadow属性将阴影应用于文本

语法

text-shadow: h-shadow v-shadow blur color;

属性值	说明
h-shadow	水平阴影的位置，允许负值（必须）
v-shadow	垂直阴影的位置，允许负值（必须）
blur	模糊距离
color	阴影的颜色

浮动🚩

网页布局的本质----利用css来摆放盒子。把盒子摆放到相应的位置

三种传统布局方式：普通流（标准流）、浮动、定位

标准流

所谓标准流就是标签按照规定好默认方式排列

• 块级元素会独占一行，从上到下顺序排列

• 行内块和行内元素，从左到右顺序排列，碰到父元素边缘自动换行

  

思考：

​ 如何把竖着排列的div变成横向排列？

• 可以把div块元素，使用display:inline-block 进行转换。因为行内块或者行内元素是从左到右水平排列

  

  • 可以看到，把div块级元素转换成行内块元素，确实存在间隙，所以不推荐

• 可以使用浮动，把下面的div块元素，“浮”上来。

  

---

浮动

浮动熟悉感用于创建浮动框，将其移动到一边，直到左边缘或者右边缘触及包含块或另一个浮动框的边缘

语法

选择器{
    float:属性值;
}

属性值可取值：

1. float : none ; 元素不浮动
2. float : left ; 元素向左浮动
3. float : right ; 元素向右浮动

浮动特性

加了浮动之后的元素，会有很多特性

• 浮动元素会脱离标准流（脱标）

• 浮动的元素会在一行内显示并且元素顶部对齐

• 浮动的元素会具有行内块元素的特点

设置浮动的元素的最重要特性：

1. 脱离标准普通流的控制，移动到指定位置

2. 浮动的盒子不再保留原先的位置

可以看到p段落标签，直接冲到了最前面，div由于浮动，不保留原先的位置

注意：

如果浮动的盒子，空间不够，比如宽度不足以放下浮动的盒子，就会另起一行

浮动的元素都是紧挨着的，中间没有空隙

---

浮动元素经常和标准流父级搭配使用

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。开发常用

浮动盒子，只会影响浮动元素后面的标准流

清除浮动

为什么需要清除浮动？

由于父级盒子，在很多的情况下，不方便设置高度，但是子盒子浮动不占用位置，最后父盒子的高度为0，就会影响下面的标准流盒子。

清除浮动的本质

• 清除浮动的本质是清除浮动元素造成的影响
• 如果父盒子本身有高度，则不需要清除浮动
• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面标准流的排版

语法：

选择器{
    clear:属性值;
}

属性值可取值：

1. clear : left ； 不允许左侧有浮动元素（清除左侧浮动的影响）
2. clear : right ；不许右侧有浮动元素（清除右侧浮动的影响）
3. clear : both ; 同时清除左右两侧浮动的影响

在实际的开发中，几乎只用 clear : both;

清除浮动的方法

1. 额外标签法，也称为隔墙法

   额外标签法也称为隔墙法，是W3C推荐的做法。
   额外标签法会在浮动元素末尾添加一个空的标签。例如<div style=”clear:both”></div>，或者其他标签（如<br/>等）。
     优点：通俗易懂，书写方便
     缺点：添加许多无意义的标签，结构化较差
   注意：要求这个新的空标签必须是块级元素。
   

2. 父级添加 overflow : hidden; 属性

   可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。子不教,父之过,注意是给父元素添加代码
      优点：代码简洁
      缺点：无法显示溢出的部分
   

3. 父级添加 after 伪元素

   ：after 方式是额外标签的升级，也是给父元素添加

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

4. 父级添加双伪元素

   也是给父元素添加

   .clearfix:before,.clearfix:after {
       content:"";
       display:table; 
   }
   .clearfix:after {
       clear:both;
   }
   .clearfix {
       *zoom:1;
   }
   

推荐使用伪元素进行清除浮动，也是实际开发中常用的手段。

什么情况下，需要清除浮动？

1. 父级没有设置高度
2. 子元素浮动了

清除浮动的主要目的就是不影响后面标注流的排版

定位🚩

很多元素，无法通过标准流和浮动进行排版，就需要用到定位。

定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

定位组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子

定位 = 定位模式 + 边偏移

定位模式

​ 用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

边偏移就是定位的盒子移动到最终位置，有top、bottom、left、right

边偏移属性	实例	描述
top	top:80px	顶端偏移量，定义元素相对于父元素上边线的距离
bottom	bottom：80px	底部偏移量，定义元素相对于父元素下边线的距离
left	left：80px	左侧偏移量，定义元素相对于父元素左边线的距离
right	right: 80 px	右侧偏移量，定义元素相对于父元素右边线的距离

静态定位[了解]

静态定位是元素的默认定位方式，无定位的意思

语法：

选择器{
    position: static;
}

• 静态定位按照标准流特性摆放位置，它没有边偏移
• 静态定位，在布局中很少用到

相对定位✅

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的

语法：

选择器{
    position:relative;
}

特点：

1. 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
2. 原来在标准流的位置继续占有，后面的盒子任然以标准流的方式对待它。没有脱离标准流。

• 典型的应用：给绝对位置当爹，就是绝对位置的参照是父元素的相对定位的

绝对定位✅

绝对定位是元素在移动位置的时候，是相对于祖先元素来说的

语法：

选择器{
    position: absolute;
}

特点：

1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
2. 如果祖先元素没有定位（相对、绝对、固定定位），则以最近一级有定位祖先元素为参考点移动位置
3. 绝对定位不再占有原来的位置，脱离标准流

子绝父相

这个“子绝父相”太重要了，是我们学习定位的口诀，是定位中最常用的一种方式这句话的意思是：子级是绝

对定位的话，父级要用相对定位。

① 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

② 父盒子需要加定位限制子盒子在父盒子内显示。

③ 父盒子布局时，需要占有位置，因此父亲只能是相对定位。

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。

总结： 因为父级需要占有位置，因此是相对定位， 子盒子不需要占有位置，则是绝对定位

当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

固定定位✅

固定定位是元素固定于浏览器可视区的位置。

主要使用场景：

​ 可以在浏览器页面滚动的时候元素的位置不会发生改变。

语法：

选择器{
    position: fixed;
}

特点：

• 以浏览器的可视窗口为参照点移动元素
  • 跟父元素没有任何关系
  • 不随滚动条滚动
• 固定定位不再占有原先的位置

固定定位也是脱标的

盒子固定在浏览器右侧小算法

• 让固定定位的盒子 left : 50 % ,走到浏览器可视区（也可以看做版心）的一半位置
• 让固定定位的盒子margin-left : 版心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。

粘性定位[了解]

粘性定位可以被认为是相对定位和固定定位的混合。 Sticky 粘性的

语法：

选择器 { position: sticky; top: 10px; }

粘性定位的特点：

1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）

2. 粘性定位占有原先的位置（相对定位特点）

3. 必须添加 top 、left、right、bottom 其中一个才有效

跟页面滚动搭配使用。 兼容性较差，IE 不支持。

定位叠放次序

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)

语法：

选择器 { z-index: 1; }

特点：

 数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上

 如果属性值相同，则按照书写顺序，后来居上

 数字后面不能加单位

 只有定位的盒子才有 z-index 属性

定位扩展

绝对定位的盒子居中

加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。

① left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。

② margin-left: -100px;：让盒子向左移动自身宽度的一半。

---

绝对定位和固定定位也和浮动类似

1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

---

脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。

---

绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）

但是绝对定位（固定定位）会压住下面标准流所有的内容。

浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素

---

元素显示与隐藏

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！

本质：让一个元素在页面中隐藏或者显示出来。

1.display 显示隐藏

2.visibility 显示隐藏

3.overflow 溢出显示隐藏

display 属性用于设置一个元素应如何显示。

display: none ；隐藏对象

display：block ；除了转换为块级元素之外，同时还有显示元素的意思

display 隐藏元素后，不再占有原来的位置。

后面应用及其广泛，搭配JS 可以做很多的网页特效。

visibility属性用于指定一个元素应可见还是隐藏。

visibility：visible ; 元素可视

visibility：hidden; 元素隐藏

visibility 隐藏元素后，继续占有原来的位置。

如果隐藏元素想要原来位置，就用visibility：hidden

如果隐藏元素不想要原来位置，就用display：none (用处更多重点）

---

overflow 溢出

overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。

但是如果有定位的盒子，请慎用overflow:hidden因为它会隐藏多余的部分。

总结：

1.display 显示隐藏元素但是不保留位置

2.visibility 显示隐藏元素但是保留原来的位置

3.overflow  溢出显示隐藏但是只是对于溢出的部分处理

精灵图

• 为什么使用精灵图？

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送

请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。

因此，**为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，**出现了 CSS 精灵技术（也称

CSS Sprites、CSS 雪碧）。

核心原理：将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。

精灵图技术目的：为了有效减少服务器接收和发送请求的次数，提高页面的加载速度

使用精灵图核心：

• 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。

• 这个大图片也称为sprites 精灵图或者雪碧图

• 移动背景图片位置，此时可以使用background-position 。

• 移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同

• 因为一般情况下都是往上往左移动，所以数值是负值。

• 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

使用精灵图核心总结：

\1. 精灵图主要针对于小的背景图片使用。

\2. 主要借助于背景位置来实现—background-position 。

\3. 一般情况下精灵图都是负值。（千万注意网页中的坐标：x轴右边走是正值，左边走是负值，y轴同理。）

精灵图的目的：
	减少对服务器的请求，节约资源

实现本质：
   通过移动背景图片的位置实现 background-position: x y;

字体图标

字体图标使用场景：主要用于显示网页中通用、常用的一些小图标。

阿里iconfont库：http://www.iconfont.cn

步骤：

1、

2、

3、

4、

最后步骤：

第一步：引入项目下面生成的 fontclass 代码：

<link rel="stylesheet" href="./iconfont.css">

第二步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon-xxx"></span>

" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 “iconfont”。

css三角

网页中常见一些三角形，使用CSS 直接画出来就可以，不必做成图片或者字体图标。

一张图，你就知道CSS三角是怎么来的了, 做法如下：

---

• 给宽高都是 100px的div设置不同颜色的边框，边框1px厚度

• 给宽高都是 100px的div设置不同颜色的边框，边框50px厚度
  

• 给宽高都是 0px的div设置不同颜色的边框，边框50px厚度

• 给宽高都是 0px的div设置边框50px厚度，底部边框蓝色，其他透明

css用户界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。

更改用户的鼠标样式

表单轮廓

防止表单域拖拽

鼠标样式

设置或检索在对象上移动的鼠标指针采用那种方式定义光标形状

语法：

选择器{
    cursor:pointer;
}

属性值	描述
default	默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

轮廓线

给表单添加 outline : 0 ; 或者 outline : none ； 之后，就可以去掉默认的蓝色边框

语法：

input{
    outline:none;
}

防止文本域拖拽

在实际开发中，我们文本域右下角是不可以拖拽的

语法：

textarea{
    resize:none;
}

vertical-align属性应用

css 的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。

只针；对行内或者行内块元素有效

语法:

vertical-align : baseline | top |  middle  | bottom

属性值	描述
baseline	默认。元素放置在父元素的基线上
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐

• 解决图片底部默认空白缝隙的问题
  • 图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐
  • 解决方式：
    1. 给图片添加vertical-align : middle | top | bottom等属性值
    2. 把图片转换为块级元素

溢出显示省略号

• 单行为本溢出显示省略号，必须满足三个条件

  1. 先强制一行内显示文本 ： white-space:nowrap; (默认 normal自动换行)
  2. 超出部分隐藏 ： overflow : hidden;
  3. 文字用省略号替代超出部分 ：text-overflow : ellipsis;

  white-space : nowrap ;`
  overflow : hidden;
  text-overflow :ellipsis;
  

• 多行文本溢出显示省略号

多行溢出文本显示省略号，有较大的兼容性。

语法：

overflow : hidden;
text-overflow : ellipsis;

/* 弹性伸缩盒子模型显示  */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp:2;
/* 设置或检索伸缩盒对象的子元素的排列方式  */
-webkit-box-orient:vertical;

常见布局技巧

1. margin负值的运用

   

   • 让每个盒子margin往左侧移动 -1px，正好压住相邻盒子边框
   • 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置），如果有定位，则加 z-index）
   • 

2. 文字围绕浮动元素

   

3. 行内块的巧妙运用

   ​

4. css三角强化

width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;

css3新特性✅

属性选择器

属性选择器可以根据元素特定属性来选择元素。这样就可以不用借助于类或者id选择器

选择符	描述
E[att]	选择具有att属性的E元素
E[att=“val”]	选择具有att属性且属性值等于val的E元素
E[att^=“val”]	匹配具有att属性且值以val开头的E元素
E[att&=“val”]	匹配具有att属性且值以val结尾的E元素
E[att*=“val”]	匹配具有att属性且值中含有val的E元素

注意：类选择器、属性选择器，伪类选择器，权重为 10

这个最最常见的就是表单控件input框

结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素

选择符	描述
E:first-child	匹配父元素中第一个子元素E
E:last-child	匹配父元素中最后一个E元素
E:nth-child(n)	匹配父元素中的第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

区别：

nth-child对父元素里面所有孩子排序选择（序号是固定的），先找到第n个孩子，然后看看是否和E匹配

---

nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第N个孩子

小结：

• 结构伪类选择器一般用于选择父级里面的第几个孩子

• nth-child对父元素里面所有孩子进行选择（序号是固定的），先找到第n个孩子，然后看看是否和E匹配

• nth-of-type对父元素里面指定子元素进行排序。先去匹配E，然后再根据E找到第N个孩子

• 如果是无序列表，nth-child使用的多

• nth-child(n) , 其中n 是从 0 开始，

• nth-of-type(n) , 其中n是从 1 开始的

伪元素选择器🚩

伪元素选择器可以利用css创建新标签元素，而不需要HTML标签

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

• before和after创建一个元素，但是属于行内元素

• 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素

• 语法， E::before{}

• before和after必须要有content属性

• before在父元素内容的前面创建元素，after在元素在内容的后面插入元素

• 伪元素选择器和标签选择器一样，权重为1

  • 实例：

    p::before {
        position: absolute;
        right: 20px;
        top: 10px;
        content: '\e91e';
        font-size: 20px;
    }
    

伪元素清除浮动

.clearfix:after { 
content: ""; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden; 
}

盒子模型

css3中可以通过box-sizing来指定盒子模型，有两个值：即可指定为content-box,border-box.这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

1. box-sizing:content-box 盒子大小为 width + padding + border （以前默认）
2. box-sizing: border-box 盒子大小为width

如果盒子 模型改成了 box-sizing : border-box ，那么padding 和border 就不会撑大盒子。（前提padding和border不会超过width宽度）

图片模糊

filter css 属性将模糊或颜色偏移等图形效果应用于元素

filter : 函数() ; 例如：filter:blur(5x) ; blur 模糊处理，数值越大越模糊

calc函数

calc() 可以让你的css属性值时执行一些计算

width : calc(100%  - 80 px);

过渡

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或

JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画： 是从一个状态 渐渐的过渡到另外一个状态

可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本） 但是不会影响

页面布局。

我们现在经常和 :hover 一起 搭配使用。

语法：

transition : 要过渡的属性  花费时间  运动曲线  何时开始;

1. 过渡属性：想要变化的css属性，宽度高度，背景颜色，内外边距都可以。如果想要过渡变化所有属性，写一个all就可以
2. 花费时间：单位是秒（必须写单位） 比如 ： 0.5s
3. 运动曲线：默认是 ease（可以省略）
4. 何时开始：单位是秒（必须写单位），可以设置延迟触发时间，默认是 0 s

动画

创建动画序列，需要使用 animation 属性或其子属性，该属性允许配置动画时间，时长以及其他动画细节，但是该属性不能配置动画的实际实现。

动画的实际实现是由 @keyframes规则实现的

animation：

子属性有：

• animation-delay

  • 设置延时，即从元素加载完成之后到动画序列开始执行的这段时间

    • 例如设置延时2秒

    • animation-delay : 2s;
      

• animation-direaction

  • 设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行
  • 可取值：
    • normal 动画在每个循环中正向播放。每次开始动画都将重置状态并从新开始。默认的
    • reverse 动画在每个循环中反向播放。换句话说，每次动画循环，动画将重置为结束状态并重新开始
    • alternate 动画在每个循环中正反交替播放，第一次迭代是正向播放
    • alternate-reverse 动画在每个循环中正反交替播放，第一次迭代是反向播放

• animation-duration 设置动画一个周期的时长

• animation-iteration-count 设置动画重复 次数，可以指定 infinite 无线次重复动画

  • 无限次重复动画 animation-iteration-count : infinite
  • 播放2次动画 animation-iteration-count : 2

• animation-name 指定有@keyframes描述的关键帧名称

  • animation-name : " abc " , 使用@keyframes abc 的动画
  • animation-name : none ；表示禁用动画

• animation-play-state 允许暂停和恢复动画

  • running 当前动画正在运行
  • paused 暂停动画

• animation-timing-function

  • 设置动画速度，通过建立加速曲线，设置动画在关键帧之间是如何变化的
    • ease 默认，在动画中间加速，在结束时减速
    • linear 匀速运动、
    • ease-in 一开始较慢，慢慢加速
    • ease-out 一开始较快，慢慢减速
    • ease-in-out 一开始缓慢，然后加速，最后缓慢
    • cubic-bezier(p1，p2，p3，p4) 贝赛尔曲线

@keyframes

使用@keyframes定义动画系列，一旦完成动画的时间设置，接下来就需要定义动画的表现。

通过使用@keyframes建立两个或者两个以上的关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染

0%表示动画开始的第一个时刻，100%表示动画的最终时刻。因为这两个点十分重要。所以还有特殊的别名:

​ from 和 to

这两个都是可选的，若 from | 0% 或 to | 100% 没有指定，则浏览器使用计算机值开始或结束动画。

2D转换

css转换 (transforms) 允许移动、旋转、缩放、倾斜元素

所谓2d就是在平面上的变化，后面会学习到3D，3d就是空间上的变化。

2D转换语法：

transform : 各种转换属性

translate移动

语法

div{
    transform : translate(100px,50px);
}

上述表示，div元素，在水平（x轴上移动100像素，在y轴上移动50像素）

rotate旋转

语法

div{
    transform : rotate(90deg);
}

上述表示，div元素，顺时针旋转了90度

• 如果要逆时针进行旋转

  div{
      transform : ratate(-90deg);
  }
  

deg 代表的是多少度，角度

scale缩放

scale可以对元素进行大小缩放

• div{
      transform : scale(2,3);
  }
  

  上述代表，宽度放大2倍，高度放大3倍

• div{    
      transform : scale(0.5);
  }
  

  上述表示，宽度高度都缩小1倍

• div{
      transform : scaleX(0.5);
  }
  

  上述表示，宽度缩小1倍

• div{
      transform : scaleY(1);
  }
  

  上述表示盒子高度缩放1，就是不变

skew倾斜

skew可以对元素进行倾斜操作

• div{
      transform : skew(45deg);
  }
  

  表示盒子向左倾斜 45度角 ， 等同与 transform : skew (45deg)

• div{
      transform : skew(-45deg);
  }
  

  表示盒子向右倾斜 45度角 , 等同与 transform : skew (-45deg)

---

虽然对元素进行2d转换操作，但是盒子本身的width 和 height 没有变化，在标准文档流中的位置还在 ，不像浮动脱标

3D转换

父元素开启3D转换空间，子元素在父元素的3d空间内进行3d转换

1. transform 属性

transform 属性用于应用 2D 或 3D 转换。以下是一些常见的 3D 转换函数：

• rotateX(angle)：绕 X 轴旋转元素。
• rotateY(angle)：绕 Y 轴旋转元素。
• rotateZ(angle)：绕 Z 轴旋转元素。
• translateX(tx)：沿 X 轴移动元素。
• translateY(ty)：沿 Y 轴移动元素。
• translateZ(tz)：沿 Z 轴移动元素。
• scaleX(sx)：沿 X 轴缩放元素。
• scaleY(sy)：沿 Y 轴缩放元素。
• scaleZ(sz)：沿 Z 轴缩放元素。

2. perspective 属性

perspective 属性用于设置 3D 元素的透视视图。它定义了观察者与 z=0 平面之间的距离，值越小，透视效果越强。

3. transform-style 属性

transform-style 属性用于指定子元素是否保留其 3D 位置。默认值是 flat，表示子元素不保留 3D 位置。设置为 preserve-3d 可以让子元素在 3D 空间中保持其位置

默认的旋转中心，在父盒子的中心位置

例如实现一个长方体：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D Cube</title>
  <style>
   
    .cube{
        width: 400px;
        height: 200px;
        position: relative;
        transform-style: preserve-3d;
        perspective: 1000px;
        margin: 100px auto;
        transform:rotateY(0deg) rotateX(0deg);
    }
    .face{
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .front{
        background-color: rgba(146, 49, 49,.3);
        transform: translateZ(100px);
    }
    .back{
        background-color: rgba(85, 0, 255,.3);
        transform: translateZ(-100px);
    }
    .right{
        width: 200px;
        height: 200px;
        background-color: rgba(9, 137, 222, 0.3);
        transform:translateX(300px) rotateY(90deg);
    }

    .left{
        width: 200px;
        height: 200px;
        background-color: rgba(255, 55, 0, 0.3);
        transform:translateX(-100px) rotateY(90deg);
    }

    .top{
        background-color: rgba(4, 0, 255, 0.3);
        transform:translateY(-100px) rotateX(90deg);
    }
    .bottom{
        background-color: rgba(255, 238, 1, 0.3);
        transform:translateY(100px) rotateX(90deg);
    }

  </style>
</head>
<body>
    <div class="cube">
      <div class="face front">Front</div>
      <div class="face back">Back</div>
      <div class="face right">Right</div>
      <div class="face left">Left</div>
      <div class="face top">Top</div>
      <div class="face bottom">Bottom</div>
    </div>
</body>
</html>

flexbox弹性布局

flexbox布局的概念

参考：

链接：https://juejin.cn/post/7004622232378966046

Flexbox布局也叫做Flex布局，弹性盒子布局。它的目标是提供一个更好有效布局、对齐方式，并且能够使父元素在子元素的大小未知或动态变化情况下仍能够分配子元素之间的间隙。

主要思想是使父元素能够调整子元素的宽度、高度、排列方式。从而更好的适应可用的布局空间。设定为flex布局的元素能够放大子元素，使之能够尽可能填充个可用空间，也可以收缩子元素使之不溢出。

flex布局更适合小规模的布局，可以简便，完整、响应式的实现各种页面布局。但是，设为flex布局以后，其子元素的float、clear和vertical-align属性将失效。flex弹性盒子模型的优势在于只需要声明布局应该具有的行为，而不需要给出具体的实现方式。浏览器负责完成实际布局。当布局射击到不定宽度，分布对齐的场景时，就要优先考虑弹性盒布局。

flex布局是一个完整的模块，它包括了一套完整的属性。其中采用flex布局的元素，称为flex容器，简称“容器”，它的所有子元素就是容器成员，称为flex项目，简称“项目”

容器默认存在两个轴：水平轴(main axis) 和 垂直轴 （cross axis），项目默认沿主轴排列（水平轴）

父元素的属性

想要使用flex布局，首先需要给父元素指定为flex布局，这样容器内的元素才能实现flex布局：

这里有两种方式可以设置flex布局，使用display: flex;会生成一个块状的flex容器盒子，使用display: inline-flex;会生成一个行内的flex容器盒子。如果我们使用块状元素，比如div标签，就可以使用flex，如果使用行内元素，就可以使用inline-flex。多数情况下，我们会使用display: flex;。

.container{
    
    display:flex | inline-flex;
}

父元素（容器）可以设置以下6个属性：

flex-direction

决定子元素在主轴的排列方式

flex-direction：主轴方向，它决定了容器内元素排列方向，它有四个属性值：

css 体验AI代码助手 代码解读复制代码.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap

控制子元素一行放不下是否换行

有来个属性值，

1.  wrap  意思是一行放不下进行换行展示
2.  nowrap意思是非得挤一挤，都在一行排列上

flex-flow

是flex-direction和flex-wrap属性的简写。默认为flex-flow : row nowrap

.container{
    flex-flow : <flex-direction> < flex-wrap>
}

justify-content

子元素在主轴的对齐方式

.container {    
    justify-content: flex-start | flex-end | center | space-between | space-around; 
}

align-items

元素在交叉轴上的对齐方式

.container {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

子元素的属性

子元素有以下六个属性：

• order

  • 属性用来定义项目的排列顺序。数值越小，排列越靠前，默认为0。使用形式如下：

• flex-grow

• flex-shrink

• flex-basis

• flex

• align-self

使用弹性flex布局，使用里面的子元素水平居中和垂直居中

选择器{
    display: flex;
    justify-content: center;
    align-items: cente;
}