一、CSS简介

网页实际上是一个多层的结构，通过CSS（层叠样式表）可以分别为网页的每一个层来设置样式，而最终我们能看到只是网页的最上边一层，总之一句话，CSS用来设置网页中元素的样式，使用CSS来修改元素样式的方式大致可以分为3种：

① 内联样式（行内样式）

在标签内部通过style属性来设置元素的样式

<p style="color:red;font-size:60px;">内联样式（行内样式）</p>

问题：使用内联样式，样式只能对一个标签生效。如果希望影响到多个元素，必须在每一个元素中都复制一遍；并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便。（注意：开发时尽量不要使用内联样式）
② 内部样式表

将样式编写到head中的style标签里然后通过css的选择器来选中元素并为其设置各种样式可以同时为多个标签设置样式，并且修改时只需要修改一处即可。内部样式表更加方便对样式进行复用

<style>
p{
    color:green; 
    font-size:50px;
}
</style>

问题：我们的内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用

③ 外部样式表

可以将css样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的CSS文件

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

外部样式表需要通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用使样式，可以在不同页面之间进行复用

将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验

CSS 基本语法

语法：选择器 声明块

选择器：通过选择器可以选中页面中的指定元素

比如p的作用就是选中页面中所有的p元素声明块
声明块：通过声明块来指定要为元素设置的样式

声明块由一个一个的声明组成，声明是一个名值对结构
一个样式名对应一个样式值，名和值之间以:连接，以;结尾

h1{
    color: green;
}

二、CSS 选择器

2.1 通配选择器（Universal selector）

• 作用：选中页面中的所有元素
• 语法：*
• 例子：*{}

*{
    color: red;
}

2.2 元素选择器（Type selector）

也叫类型选择器、标签选择器

• 作用：根据标签名来选中指定的元素
• 语法：elementname{}
• 例子：p{}、h1{}、div{}

p{
    color: red; 
}

h1{
    color: green;
}

2.3 类选择器（Class selector）

作用：根据元素的class属性值选中一组元素
语法：.classname
例子：.blue{}

.blue{
    color: blue;
}
.size{
    font-size: 20px;
}

class是一个标签的属性，它和id类似，不同的是class
可以重复使用
可以通过class属性来为元素分组
可以同时为一个元素指定多个class属性

<p class="blue size"> 类选择器（Class selector）</p>

2.4 ID选择器（ID selector）

作用：根据元素的id属性值选中一个元素
语法：#idname{}
例子：#box{}、#red{}

#red{
    color: red;
}

2.5 属性选择器（Attribute selector）
作用：根据元素的属性值选中一组元素
语法1：[属性名] 选择含有指定属性的元素
语法2：[属性名=属性值] 选择含有指定属性和属性值的元素
语法3：[属性名^=属性值] 选择属性值以指定值开头的元素
语法4：[属性名$=属性值] 选择属性值以指定值结尾的元素
语法5：[属性名*=属性值] 选择属性值中含有某值的元素

例子：p[title]{}、p[title=e]{}、p[title^=e]{}、p[title$=e]{}、p[title*=e]{}

p[title]{
    color: red;
}
p[title=e]{
    color: black;
}
p[title^=e]{
    color: yellow;
}
p[title$=e]{
    color: orange;
}
p[title*=e]{
    color: orange;
}

2.6 复合选择器

• ① 交集选择器

作用：选中同时复合多个条件的元素
语法：选择器1选择器2选择器3选择器n{}
注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头

div.red{
    font-size: 30px;
}

.a.b.c{
    color: blue;
}

• ② 并集选择器（选择器分组）

作用：同时选择多个选择器对应的元素
语法：选择器1,选择器2,选择器3,选择器n{}
例子：#b1,.p1,h1,span,div.red{}

h1,span{
    color: green;
}

2.7 关系选择器

父元素：直接包含子元素的元素叫做父元素
子元素：直接被父元素包含的元素是子元素
祖先元素：直接或间接包含后代元素的元素叫做祖先元素；一个元素的父元素也是它的祖先元素
后代元素：直接或间接被祖先元素包含的元素叫做后代元素；子元素也是后代元素
兄弟元素：拥有相同父元素的元素是兄弟元素

• ① 子元素选择器（Child combinator）

作用：选中指定父元素的指定子元素
语法：父元素 > 子元素

例子：A > B
div.box > p > span{
    color: orange;
}

• ② 后代元素选择器（Descendant combinator）

作用：选中指定元素内的指定后代元素
语法：祖先 后代

例子：A B
div span{
    color: skyblue;
}

2.8 伪类选择器

伪类（不存在的类，特殊的类），伪类用来描述一个元素的特殊状态，比如：第一个子元素、被点击的元素、鼠标移入的元素.…

伪类一般情况下都是使用:开头

• :first-child：第一个子元素
• :last-child：最后一个子元素
• :nth-child()：选中第n个子元素
  • n：第n个，n的范围0到正无穷
  • 2n或even：选中偶数位的元素
  • 2n+1或odd：选中奇数位的元素

以上这些伪类都是根据所有的子元素进行排序的

• :first-of-type：同类型中的第一个子元素
• :last-of-type：同类型中的最后一个子元素
• :nth-of-type()：选中同类型中的第n个子元素

这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序的

• :not()否定伪类，将符合条件的元素从选择器中去除

/* ul下所有li，黑色 */
ul>li {
    color: black;
}

/* ul下第偶数个li，黄色 */
ul>li:nth-child(2n) {
    color: yellow;
}

/* ul下第奇数个li，绿色 */
ul>li:nth-child(odd) {
    color: green;
}

/* ul下第一个li，红色 */
ul>li:first-child {
    color: red;
}

/* ul下最后一个li，黄色 */
ul>li:last-child {
    color: orange;
}

• :link：未访问的链接
• :visited：已访问的链接
  由于隐私的原因，所以visited这个伪类只能修改链接的颜色
• :hover：鼠标悬停的链接
• :active：鼠标点击的链接

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: yellow;
}

/* mouse over link */
a:hover {
  color: green;
}

/* selected link */
a:active {
  color: blue;
}

2.9 伪元素选择器
伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）

伪元素使用::开头

• ::first-letter：表示第一个字母
• ::first-line：表示第一行
• ::selection：表示选中的内容
• ::before：元素的开始
• ::after：元素的最后
• ::before和::after必须结合content属性来使用

/* 段落首字母设置大小为30px */
p::first-letter{
    font-size: 30px;
}

/* 段落第一行设置为黄色背景 */
p::first-line{
    background-color: yellow;
}

/* 段落选中的部分变绿色 */
p::selection{
    background-color: green；
}

/* div前加上内容 */
div::before{
    content: 'BEFORE';
    color: red;
}

/* div后加上内容 */
div::after{
    content: 'AFTER';
    color: blue;
}

实例
html代码：

<div class="box1">
    <img src="./123.jpg">
</div>

css代码

.box1 {
    width: 400px;
    height: 200px;
    position: relative;
}
.box1 img{
    width: 100%;
    height: 100%;
}
.box1::before {
    content:"";
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:rgb(0, 0, 0,0.3)
}
/* 当我们鼠标经过了这个盒子 就让里面的遮罩层显示出来 */
.box1:hover::before{
    /* 经过就让::before 显示出来 */
    display:block;
}

三、样式继承与其他概念

3.1 继承

• 样式的继承，我们为一个元素设置的样式，同时也会应用到它的后代元素上

• 继承是发生在祖先后后代之间的，继承的设计是为了方便我们的开发

• 利用继承，我们可以将一些通用的样式，统一设置到共同的祖先元素上。这样只需设置一次即可让所有的元素都具有该样式

注意，并不是所有的样式都会被继承： 比如背景相关的，布局相关等的这些样式都不会被继承。

3.2 选择器的权重

当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。

发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定选择器的权重

内联样式 > ID选择器 > 类和伪类选择器 >元素选择器>通配选择器>继承的样式
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）

可以在某一个样式的后边添加!important，则此时该样式会获取到最高的优先级，甚至超过内联样式，注意：在开发中一定要慎用！

<style>
    #box1{
        background-color: orange;
    }
    div{
        background-color: yellow;
    }
    .red{
        background-color: red;
    }
</style>

<div id="box1" class="red" style="background-color: skyblue;">选择器的权重</div>

3.3 长度单位

• 像素

我们先来看下某度上关于像素（pixel，缩写px）的介绍

像素是指由图像的小方格组成的，这些小方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子。
可以将像素视为整个图像中不可分割的单位或者是元素。不可分割的意思是它不能够再切割成更小单位抑或是元素，它是以一个单一颜色的小格存在 [1] 。每一个点阵图像包含了一定量的像素，这些像素决定图像在屏幕上所呈现的大小

也就是说，显示器屏幕实际上是由一个一个的小点（单位色块，即像素）构成的

• 屏幕分辨率

例如，屏幕分辨率是1920×1080，则该屏幕水平方向有1920个像素，垂直方向有1080个像素

不同屏幕的像素大小是不同的，也就是说像素大小不像我们现行的长度单位（如米/m）那样有着固定的国际标准
所以同样的像素大小在不同的设备上显示效果是不一样的，像素越小的屏幕显示的效果越清晰

• 图像分辨率

例如，一张图片分辨率是300x200，则该图片在屏幕上按1:1缩放时，水平方向有300个像素，垂直方向有200个像素点

图片分辨率越高，1:1缩放时面积越大
图片分辨率越低，1:1缩放时面积越小
同一台设备像素大小是不变的，那把图片放大超过100%时占的像素点就多了，但是图像也会变得模糊

• 百分比

也可以将属性值设置为相对于其父元素属性的百分比，可以使子元素跟随父元素（暂且先理解成父元素，后面会详细说）的改变而改变

em

em是相对于元素的字体大小来计算的，1em = <self>.font-size * 10，也就说em值会根据元素本身的字体大小的改变而改变

rem

rem是相对于根元素的字体大小来计算，1rem = <root>.font-size * 10，也就说rem值会根据根元素的字体大小的改变而改变

<style>
    * {
        font-size: 24px;
    }
    
    .box1{
        width: 200px; 
        height: 200px;
        background-color: orange;
    }

    .box2{
        width: 50%; 
        height: 50%; 
        background-color: aqua;
    }
    
    .box3{
        font-size: 20px;
        width: 10em;
        height: 10em;
        background-color: greenyellow;
    }
    
    .box4 {
        font-size: 20px;
        width: 10rem; /*当时用rem时，不管怎么改本元素的font-size都是不会变的。需要定义root元素的font-size才可以 */
        height: 10rem;
        background-color: red;
    }
</style>

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

<div class="box3"></div>

<div class="box4"></div>

3.4 浏览器的默认样式

通常情况，浏览器都会为元素设置一些默认样式。

默认样式的存在会影响到页面的布局，通常情况下编写网页时必须要去除浏览器的默认样式（PC端的页面）。我们可以尝试编写css样式，以去除浏览器的默认样式，如：

body {
    margin: 0;
}

完美解决方案：引入外部样式reset.css和normalize.css

四、盒模型

4.1 盒子模型

网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。

这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

image.png

• margin(外边距)：清除边框外的区域，外边距是透明的
• border(边框)：围绕在内边距和内容外的边框
• padding(内边距)：清除内容周围的区域，内边距是透明的
• content(内容) ：盒子的内容，显示文本、图像、图标等
  ① 内容区（content）

内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型

元素中的所有的子元素和文本内容都在内容区中， width和height设置排列内容区的大小

.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}

② 边框（border

边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部。注意：边框的大小会影响到整个盒子的大小。

• border-width 边框的宽度：默认3px
  • border-top-width 上边框的宽度
  • border-right-width 右边框的宽度
  • border-bottom-width 下边框的宽度
  • border-left-width 左边框的宽度

• border-color 边框的颜色：默认使用color的颜色值
  • border-top-color 上边框的颜色
  • border-right-color 右边框的颜色
  • border-bottom-color 下边框的颜色
  • border-left-color 左边框的颜色

• border-style 边框的样式：没有默认值，必须指定
  • border-top-style 上边框的样式
  • border-right-style 右边框的样式
  • border-bottom-style 下边框的样式
  • border-left-style 左边框的样式

.box1{
    border-width: 10px;
    border-color: red;
    /* 
        solid  实线 
        dotted 点状虚线 
        dashed 虚线 
        double 双线 
    */
    border-style: solid;
}

不论是border-width、border-color、border-style还是其衍生出来的属性写法，都可以指定每个方向的边框情况。设定几个值就决定了对应方向的宽度、颜色或样式

四个值：上 右 下 左
三个值：上 左右 下
两个值：上下 左右
一个值：上下左右
其实不管设置几个值，只要记住：其顺序是按顺时针方向设置的，剩下的可以由矩形的对称性推导出来。

• border：简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求

  • border-top 上边框的宽度、颜色和样式
  • border-right 右边框的宽度、颜色和样式
  • border-bottom 下边框的宽度、颜色和样式
  • border-left 左边框的宽度、颜色和样式

.box1{ 
    border: 10px red solid;
}

③ 内边距(padding)

内边距，也叫填充，是内容区和边框之间的空间

• padding-top 上内边距
• padding-right 右内边距
• padding-bottom下内边距
• padding-left 左内边距

padding内边距的简写属性，可以同时指定四个方向的内边距，规则和边框中属性值设置一样

<style>
    .outer{
        width: 200px;
        height: 200px;
        border: 10px orange solid;
        padding-right: 100px;
        padding-bottom: 100px;
        padding-left: 100px;
    }

    .inner {
        width: 200px;
        height: 200px;
        background-color: greenyellow;
    }
</style>

<div class="outer">
    <div class="inner"></div>
</div>

image.png

可以看出，当内外div宽度和高度一样时，由于outer设置了一个padding属性，其盒子大小被“撑大了”。

盒子可见框的大小，由内容区、内边距和边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算。

④ 外边距（margin)

外边距，位于盒子的最外围，是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起，是CSS布局的一个重要手段

注意：外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置和占用空间

一共有四个方向的外边距：

• margin-top 上外边距
  设置正值，元素自身向下移动
  设置负值，元素自身向上移动
• margin-right 右外边距
  设置正值，其右边的元素向右移动
  设置负值，其右边的元素向左移动

注意！！！，对于块元素，设置margin-right不会产生任何效果

• margin-bottom 下外边距
  设置正值，其下边的元素向下移动
  设置负值，其下边的元素向上移动

注意！！！对于块元素，会有垂直方向上的边距重叠问题（后面会细说）

• margin-left 左外边距
  设置正值，元素自身向右移动
  设置负值，元素自身向左移动
  元素在页面中是按照自左向右的顺序排列的，所以默认情况下，如果我们设置的左和上外边距则会移动元素自身， 而设置下和右外边距会移动其他元素。

5. 盒子大小

默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定。box-sizing用来设置盒子尺寸的计算方式（设置width和height的作用）。

.box {
    width: 200px;
    height: 200px;
    background-color: yellow;
    border: 10px red solid;
    /* box-sizing: content-box; */
    box-sizing: border-box;
}

可选值：

content-box：默认值，宽度和高度用来设置内容区的大小

image.png

border-box： 宽度和高度用来设置整个盒子可见框的大小

image.png

6.轮廓
outline用来设置元素的轮廓线，用法和border一模一样。轮廓和边框不同点是，轮廓不会影响盒子的布局。

.box {
    width: 200px;
    height: 200px;
    background-color: yellow;
    outline: 10px red solid;
}

/* 实际使用场景*/
.box:hover {
    outline: 10px red solid;
}

7.阴影

box-shadow属性用于在一个元素的框架周围添加阴影效果，你可以设置多个由逗号分隔的效果。一个盒状阴影由相对于元素的X和Y的偏移量、模糊和扩散半径以及颜色来描述

box-shadow用来设置元素的阴影效果，阴影不会影响页面布局。

.box {
    width: 200px;
    height: 200px;
    background-color: yellow;
    box-shadow: 10px 10px orange;
}

image.png

border-radius用来设置圆角，圆角设置的是圆的半径大小。

border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

box {
    width: 200px;
    height: 200px;
    background-color: yellow;
    border-radius: 50%;
    // border-radius: 20px;

}

image.png

4.2 边距折叠

垂直外边距的重叠（折叠）：相邻的垂直方向外边距会发生重叠现象

① 兄弟元素

兄弟元素间的相邻，垂直外边距会取两者之间的较大值（两者都是正值）

特殊情况：

如果相邻的外边距一正一负，则取两者的和
如果相邻的外边距都是负值，则取两者中绝对值较大的

.box1,.box2{ 
    width:200px; 
    height:200px; 
    font-size:100px;
}

.boxl{
    background-color: #bfa;
    margin-bottom: 100px;
}

.box2{
    background-color: orange;
    margin-top: 100px;
}

image.png

② 父子元素

父子元素间相邻外边距，子元素会传递给父元素（上外边距）

达到下面效果

image.png

代码：

<style>

   .box1 {
       width: 200px;
       height: 100px;
       background-color: aqua;
   }

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

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

实际效果如下：父子外边距的折叠会影响到页面的布局

image.png

解决方式1:

.box1 {
    width: 200px;
    height: 200px;
    background-color: aqua;
    border-top: 1px solid aqua;
}

.box2 {
    width: 100px;
    height: 100px;
    background-color: orange;
    margin-top: 100px;
}

使用了border属性，就让子元素的外边距不去传递给父元素了，这是为什么呢？

如果父盒子没有设置border，那么他的子元素无法利用margin-top来远离父元素的上边框；如果使用了margin-top会使子元素和父元素一起往下移

父不设置border边框则离得是流不是父盒子，使用了border让元素脱离了文档流（margin塌陷）

文档流
网页是一个多层的结构，一层摁着一层。通过CSS可以分别为每一层来设置样式，作为用户来讲只能看到最顶上一层。

这些层中，最底下的一层称为文档流。文档流是网页的基础我们所创建的元素默认都是在文档流中进行排列

对于我们来元素主要有两个状态

• 在文档流中
• 不在文档流中（脱离文档流）

解决方式2:

.box1 {
    width: 200px;
    height: 100px;
    background-color: aqua;
    padding-top:100px;
}

.box2 {
    width: 100px;
    height: 100px;
    background-color: orange;
}

4.3行内元素的盒模型

块元素

• 块元素会在页面中独占一行
• 默认宽度是父元素的全部（会把父元素撑满）
• 默认高度是被内容撑开（子元素）

行内元素

• 行内元素不会独占页面的一行，只占自身的大小
• 行内元素在页面中左向右水平排列（书写习惯一致）
• 如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列
• 行内元素的默认宽度和高度都是被内容撑开

行内元素盒模说明

• 行内元素不支持设置宽度和高度
• 行内元素可以设置padding，但是垂直方向padding不会影响页面的布局
• 行内元素可以设置border，垂直方向的border不会影响页面的布局
• 行内元素可以设置margin，垂直方向的margin不会影响页面的布局

使用display属性

• inline：将元素设置为行内元素
• block：将元素设置为块元素
• inline-block：将元素设置为行内块元素行内块，既可以设置宽度和高度又不会独占一行
• none：元素不在页面中显示

5. 布局

5.1 浮动介绍

通过浮动可以使一个元素向其父元素的左侧或右侧移动。

使用float属性来设置于元素的浮动

• none：默认值，元素不浮动
• left：元素向左浮动
• right：元素向右浮动

注意
元素设置浮动以后，水平布局的等式便不需要强制成立
元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动

浮动的特点

1. 浮动元素会完全脱离文档流，不再占据文档流中的位置
2. 设置浮动以后，元素会向父元素的左侧或右侧移动
3. 浮动元素默认不会从父元素中移出

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: gold;
        float: left;
    }
    .box2 {
        width: 300px;
        height: 300px;
        background-color: green;
    }
</style>

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

image.png

4. 浮动元素向左或向右移动时，不会超过前边的浮动元素（先来后到的顺序）

<style>
    .box1, .box2, .box3 {
        width: 200px;
        height: 200px;
        float: left;
    }

    .box1 {
        background-color: gold;
    }

    .box2 {
        background-color: green;
    }

    .box3 {
        background-color: red;
    }
</style>

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

image.png

5. 浮动元素不会超过上边的浮动的兄弟元素，最多就是和它一样高

   
   
   dbb89038c1b24896991fae6908fccc78.gif

6. 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移

7. 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果

   
   
   image.png

1. 浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局
2. 元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化

高度塌陷
在浮动布局中，父元素的高度默认是被子元素撑开的

当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失

父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱

cfbb9f9100474d0a9e09179e2b290999.gif

所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们怎么进行处理

终极解决办法

.fahter{
        width: 400px;
        border: 1px solid deeppink;
    }
    .big{
        width: 200px;
        height: 200px;
        background: darkorange;
        float: left;
    }
    .small{
        width: 120px;
        height: 120px;
        background: darkmagenta;
        float: left;
    } 
    .footer{
        width: 900px;
        height: 100px;
        background: darkslateblue;
    }
  .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: ""; /* 在父元素体内的最后生成一个新的空白子元素 */
        display: block; /* 只有块级元素才能使用clear属性 */
        height: 0;
        clear:both; /* 清除前面所有朝两个方向浮动带来的影响 */
        visibility: hidden;
    } 

    <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
    </div>  
    <div class="footer"></div>

5.3 弹性布局- Flex

Flex布局是什么?

Flex是Flexible Box的缩写，意为”弹性布局”，是一种用于按行或按列布局元素的一维布局方法，可以为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

flex布局默认有两条轴，水平的主轴和垂直的交叉轴 :

image.png

Flex布局

主轴 (main size) 是弹性容器的主要轴线，弹性项目(items)是沿着这个轴线布置的。请注意，它不一定是水平的；它取决于flex-direction属性（见下文）。在开始学习之前，我们先确定一下页面（容器）布局：

最外边的容器我们称为container：

image.png

container里面的每个小盒子，我们称为items：

image.png

1Flex布局有哪些属性?

假如现在有一个这样的初始结构:
HTML:

<div class="container">
  <div class="items1">1</div>
  <div class="items2">2</div>
  <div class="items3">3</div>
</div>

css：

.container {
  height: 400px;
  width: 600px;
  background-color: #e1e1e1;
}

image.png

1. display: flex;
想要使用flex布局，我们必须先给外边的container容器加上一个display:flex;属性, 那么容器里面的元素才遵循flex布局:

.container{
   display:flex;
}

2. flex
再给container容器里面的items1 items2 items3一个统一的颜色、边框并添加flex 属性:

.container div {
  background-color: #ffb84d;
  border: 2px solid #666;
}
.items1 {
  flex: 1;
}
.items2 {
  flex: 1;
}
.items3 {
  flex: 1;
}

image.png

如果我们把items1的flex的值改为2：

image.png

image.png

image.png

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。
  4. flex-wrap
  flex-wrap属性作用在container上，决定了当一排items排不下的时候，应该怎么排布。

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

image.png

flex-wrap属性的默认值是nowrap，即不换行(按照宽度比例排列在一行)，当然我们也可以通过改变它的值来进行换行

如果container的属性为：flex-wrap: wrap;

image.png

若改为flex-wrap: wrap-reverse;

image.png

5. justify-content
作用于container上，这个属性定义了项目在主轴上的对齐方式。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

image.png

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center：居中
• space-between：两端对齐，items之间的间隔都相等。
• space-around：每个items两侧的间隔相等。所以，items之间的间隔比items与边框的间隔大一倍。
• justify-content: space-evenly：每个items之间的间隔相等。

6. align-items
定义在container上，决定了items在交叉轴上的对齐方式。

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

image.png

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 以items里第一行文字的基线对齐。
• stretch（默认值）：如果items未设置高度或设为auto，将占满整个容器的高度。

align-self
align-self属性定义在items上，它允许单个items有与其他items有不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

image.png