浮动

一行多列

1. 设置浮动：每一项设置float: left;。
2. 设置宽度：通常采用百分比设置。比如：一行五列，设置宽度为20%。
3. 设置为怪异盒子：为了方便布局，每一项设置属性box-sizing: border-box;
4. 空出间隙：使用内边距空出项与项之间的间隙。

使用浮动-提升元素类别

1. 使用浮动之后，可以让元素“提升半个”元素级别：块级元素和行内元素，都将“块级化”，但实际上是拥有行内块的特性。
   使用了浮动之后，块级元素不会独占一行，行内元素可以设置宽和高。
2. 使用float属性设置元素的浮动：
   • float: left;：左浮动。
   • float: right;：右浮动。
   • float: none;：不浮动。

弹性盒子

弹性布局

---

• flex:
  • 弹性布局是后面新增的一种布局方式，是一种“万能”、“灵活”、”方便“的布局方式，它可以完全替代掉浮动布局，制作出浮动布局的一行多列、左中右等布局效果。
  • 弹性盒子使用思想：把项目放入盒子中，设置项目在主轴（默认水平方向）和次轴（默认垂直方向）的排列对齐方式

概念

1. 容器： 任何一个盒子都可以成为弹性盒子的容器 使用display:flex 可以让一个盒子变成弹性盒子 成为弹性盒子之后,该盒子拥有自己独立的一套布局计算方式(触发BFC)
2. 项目 容器的直接儿子就是弹性盒子的项目
3. 主轴 弹性盒子的主要轴线，默认水平方向从左向右 main start和main end
4. 交叉轴 弹性盒子的次要轴线，与主轴垂直,从上向下
5. 容器属性 设置在容器上的属性一共有6种,后面具体解释
6. 项目属性 设置在项目上的属性,一共有6种，后面具体解释

CSS基础

CSS简介

1. CSS全称 Cascading Style Sheets ，即层叠样式表
2. CSS的作用：
   • 让网页变得更好看：可以设置字体大小、颜色、元素的边框、背景色、阴影等等。
   • 布局：设置元素大小，内外边距、定位、浮动等等。可以进行像素级的位置调整。
3. CSS的优势：
   • 内容与表现分离，CSS代码独立于HTML标签。
   • 网页的表现统一，容易修改。

盒子模型

1. 标准文档流: HTML语言由标签构成，浏览器的程序会对标签进行解析，每解析一个标签，就会在浏览器窗口中将它“画”出来，即完成元素的布局。
   一个元素，浏览器会把它认为是一个矩形。浏览器会将矩形从左向右，从上向下按照顺序完成对元素的布局，这个顺序流就是标准文档流
2. 盒子模型: 所有文档元素都生成一个矩形框，描述一个元素在文档布局中所占的空间大小，称为元素盒子(element box)。
   每个框影响着其他元素框的位置和大小，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。
   盒子模型定义了盒的每个部分：margin（外边距）, border（边框）, padding（内边距）, content（内容，width+height）。它们合在一起就可以创建我们在页面上看到的内容。