HTML是超文本标记语言，用于构建网页的结构，CSS则是用于表现HTML或XML文档的样式语言，负责网页的渲染和美化。CSS选择器包括基础选择器、复合选择器、关系选择器等，用于选取和操作网页元素。盒模型描述了元素的内容、边框、内边距和外边距，影响元素的布局。CSS定位（如相对定位、绝对定位）则允许元素在页面上自由放置。
html的认识
html他是超文本语言（Hyper Text Markup Language）是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
html的基本构成
html是一个网页的架构（类似人体的骨架），在网页中是非常重要的部分，在网页中结构决定着整个网页的一个大体布局。
<html>
<head>
</head>
<body>
</body>
</html>
css的认识
CSS是层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。CSS是一个网页的表现（类似人体穿的衣服打扮）主要用于在网页的一个渲染，添加元素的样式、美化元素让网页看起来更加好看具有观赏性
1、如何使用CSS:
有三种方式可以在HTML文档中引入和使用CSS
1、 行内样式(内联样式) 了解即可
在html中每一个元素身上都存在一个全局属性，style ，通过style属性来设置元素的样式
该方式存在的问题：
使用内联样式的方式，样式只能对一个标签元素生效
如果有需求需要大量的整改页面的样式时，内联样式的修改是很麻烦的一件事情
tyle属性的优先级特别高！不利于后续选择器进行修改！
总结：在开发中切记一定不要使用style属性来设置样式！
2、 内部样式表
在HTML文档中，通过style标签来设置文档相关的css样式属性
存在的问题：
样式的复用率不高，建议开发中尽可能的不要使用该方式，在学习阶段可以使用
3、 外联样式文件 最佳方式
新建一个.css的样式文件，在该文件中编写相应的css样式属性
然后引入到有需要的html文档中进行使用！
html文档中引入css文件是利用link标签进行样式表的引入！link标签位置写于head标签中！
（优点：复用性强、方便统一的更改、利于浏览器缓存的机制）
2、CSS的基本语法规则
css的基本语法规则：
css的语法规则，主要是由两个部分组成： 选择器 声明块
选择器： 通过css所提供的合法的方式进行元素的选择
声明块： 声明块就是{}所包裹的样式属性集合，声明块中的样式属性是可以同时具备多个的！
每个样式属性的格式： 键值对的形式展示 key:value;
3、CSS选择器
（1）CSS的基础选择器
选择器：利用css所提供的各种方式的选择器，对页面中的元素进行选择！要更改一个元素的样式，前提是你要选中对应的元素！
基础选择器：
元素选择器：通过元素的标签名进行选择，该方式会选择页面中所以同名的元素
格式： div p span a h1 等都属于元素选择器
id选择器：通过标签元素的id属性值，来选择对应的元素，注意id属性是唯一的（类似于人的身份证号）
格式: #id值
类选择器： 通过标签元素的class属性值，来选择同类别的元素！
注意：这里的同类别，不是说 div 和 div是同类别（并不是说标签名相同的才是同类别元素）
同类别是指各元素的class值是相同的！
class值不唯一！
div class=demo
span class=demo
格式： .class值
通配符选择器： 选择页面中所以的元素
格式： *
（2）复合选择器
复合选择器：是由两个或多个基础或其他选择器共同构成的！称为复合选择器！
交集选择器: 同时满足多个选择器的元素才能被选中
语法： 选择器1选择器2选择器3 {}
注意：各选择器之间没有任何的符合包括空格
并集选择器： 被选择的元素只需要满足其中一种选择器即可被选中！
语法： 选择器1,选择器2,选择器3 {}
注意：各选择器之间是用,逗号进行分隔
（3）关系选择器
关系选择器：由两个或多个其他选择器组合构成！
元素与元素之间的关系！
元素与元素之间存在哪些关系？
html中各元素，如果通过关系来区分的话，可以大致分为以下几种：
父元素、子元素、祖先元素、后代元素、兄弟元素
父元素： 该元素直接去包含了子元素的元素称为父元素
子元素： 被父元素直接包裹的元素，叫做子元素
兄弟元素： 拥有共同的父元素的元素称为兄弟元素
祖先元素： 包裹着其他元素的元素就是祖先元素，父元素其实也是特殊的祖先元素！二级嵌套或多级嵌套的元素！
后代元素： 被祖先元素的嵌套包裹的元素都可以称为是后代元素，子元素是特殊的后代元素
基于以上的关系，css提供了以下几种，关系选择器！
子代选择器：
格式： 选择器1>选择器2>选择器3...
注意：子代选择器主要是看直接的父子关系！
后代选择器：
格式： 选择器1 选择器2 选择器3 ...
注意：后代选择器主要是看重祖先和后代元素的关系，（父元素和子元素都是特殊的元素）
总结：后代选择器所包含的范围更广！因为子元素也是特殊的后代元素！
子代选择器它只会去看父元素下的子元素！它不会管元素下的其他后代元素！
兄弟选择器:
格式：
- 1. 选择器1+选择器2 选中指定元素后面的第一个兄弟元素
- 2. 选择器1~选择器2 选中指定元素后面的所以兄弟元素
（4）属性选择器
属性选择器: 通过标签元素自身的某个属性来选择元素的
格式: [属性相关语法]
1. [属性名] 选择所有含有该属性的元素
2. [属性名=属性值] 选择所有含有该属性并且值是指定数据的元素
3. [属性名^=属性值] 选择所有含有该属性并且也指定字符开头的元素
4. [属性名$=属性值] 选择所有含有该属性并且也指定字符结尾的元素
5. [属性名*=属性值] 选择所有含有该属性并且属性值中拥有指定的字符的元素
（5）结构伪类选择器
伪类： 不存在的类，是一些特殊的类！代表的是元素的某种状态
在css中可以将伪类进行分类，分成两大类：
结构型伪类：与hmlt结构相关的类
动态伪类： 与用户的交互相互的类
伪类的语法一般是： :伪类名
注意：伪类选择器大多数情况下不会单独进行使用，通常和其他选择器配合使用！
结构伪类（常用的）：
:first-child 父元素下的第一个子元素
:last-child 父元素下的最后一个子元素
:nth-child() 父元素下的第n各子元素
注意：以上这些伪类都是将父元素下的所有子元素进行排序的！包括不同类型的节点！
:first-of-type 父元素下同类型的子元素进行排序中的第一个子元素
:last-of-type 父元素下同类型的子元素进行排序中的最后一个子元素
:nth-of-type() 父元素下同类型的子元素进行排序中的任意的子元素
注意： 以上的三个伪类的功能和之前的三个伪类是类似的，不同点是他们只在同类型元素中进行排序
（6）动态伪类
动态伪类主要是和用户的交互相关
常用的动态伪类：
:link 用来表示没有被访问过的超链接(只能用于a标签)
:visited 用来表示已经被访问过的超链接(只能用于a标签)
:hover 表示鼠标移入到某元素内 （用于任何元素）
:active 表示点击某元素 (用于任何元素)
注意：伪类尽可能的不要单独使用！请配合其他的选择器使用
（7）伪元素选择器
伪元素选择器：
伪元素，是一种假的页面元素！会动态的进行改变！更多是表示页面中一些特殊的位置！
伪元素通常是使用： ::伪元素名
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
注意：以下两个伪元素必须搭配css中的content属性进行使用！
::before 元素的最开始的位置
::after 元素的末尾位置
4、列表标签
列表标签：HTML中将列表类型分为三类，有序列表(ol)、无序列表(ul)、定义列表(dl)
当我们不需要列表前面的默认样式时只需要用选择器选择该元素并设置 list-style: none;即可
1. 有序列表格式：
<ol>
<li></li>
<li></li>
<li></li>
</ol>
1.铅笔
2.橡皮擦
3.文具盒
有序列表在html中的表示是使用ol标签，列表中的每一项是使用li标签来表示
2. 无序列表格式：
<ul>
<li></li>
<li></li>
<li></li>
</ul>
#铅笔
#橡皮擦
#文具盒
无序列表在html中的表示是使用ul标签，列表中的每一项是使用li标签来表示
3. 定义列表 （类似于解释型列表）格式：
<dl>
<li></li>
<li></li>
<li></li>
</dl>
类似于名词解释
xxxx
对xxx进行描述解析
yyyy
对yyy进行描述解释
nnnn
对nnn进行描述解释
5、img标签
img标签（图片标签）：利用img标签向文档内引入外部(网络资源/本地资源)的图片资源
img标签是一个单标签（自结束标签）img标签是行内块元素
img标签的属性：
src属性：外部资源的地址路径
alt属性：对图片的描述属性，文字信息的描述，当图片加载不成功时，alt属性才会发生作用
width属性：调整图片的宽度 单位是px 像素单位
height属性： 调整图片的高度 单位是px 像素单位
注意:调整图片的宽度或者高度时，只需要调整其中一个即可，另一个会自适应调整！
但是，在正常的开发中我们不会使用width属性和height属性！一般在css里面选择这个图片单独给他设置图片的宽高
6、CSS三大属性
（1）层叠性： 该特性是主要解决CSS样式冲突问题 (拉架）
样式冲突： 当一个元素被多个相同的选择器选中时，设置了相同的属性但是属性值不一样！那么css就会
通过层叠性进行解决，层叠性的特点就是选择最后一个（最靠近元素的一个选择器）属性作为该元素的css属性值
注意：层叠性的作用只能体现在权重相同的选择器中，如果选择器的权重被打破，层叠性不再发挥作用！
（2） css的选择器优先级：
优先级：在css的各个基础选择器中，每一个基础选择器的权重是不同！
基础选择器：元素元素选择器、id选择器、类选择器、通配符选择器
权重原则：css权重指向选择器的优先级不同，有两条或多条样式作用于一个元素时，权重高的那条样式才会对元素起作用！
如果权重相同就交给层叠性来处理！
各选择器之间的权重值：从低到高
继承的样式 ： 无限低
通配符选择器： 0，0，0，0
元素选择器： 0，0，0，1
类/属性/伪类选择器: 0，0，1，0
id选择器： 0，1，0，0
行内样式(标签的style属性)： 1，0，0，0
!important 无穷大(注意该方式慎用！)
属性选择器、子代选择器、后代选择器、伪元素选择器这些选择器有没有权重？
以上这些选择器，也有权重问题！他们的权重是通过计算的来的！
总结： 以上各选择器的权重都是基础值，但并不是最终的权重值！如果有多个选择器组合！那么会自动将各基础选择器
的权重值相加得到最终的权重值！但是不管选择器如何组合！它权重的最高位是由其最高的选择器来决定的! 权重的相加是不会进位的！
（3）继承性
继承性：也叫做样式的继承，CSS为了方便开发，不至于相同的样式属性频繁的在元素中书写设置，就可以利用
样式的继承性进行解决，将属性传递下去继承下去!继承只发生在祖先元素和后代元素之间！
注意：css中并不是所有的样式属性都允许被继承，只是特定的一些属性才能够被继承！
可继承的属性： 字体相关的（font-） 文本相关的(text-) 列表相关的(list-) 字体颜色(color) 等等
7、盒模型
盒模型（盒子模块、框模型）：
- css将网页中的所有元素都看作成一个矩形盒子
- 元素设置为矩形的盒子后，对页面的布局就变成了将不同的盒子摆放到合适的位置！
- 每一矩形盒子都是由以下几个部分组成：
1.内容区 （content）
2.内边距 (padding)
3.边框 （border）
4.外边距 (margin)
盒模型-内容区：
盒子模型中的内容区是用于排列所有的子元素以及文本内容的区域，内容区的大小由csss的width和hight决定
内容区的大小也会影响整个盒子的大小
盒模型-边框:
边框属于盒子的边缘部分，边框以内属于盒子内部，超过边框的就是盒子外部区域，边框的大小将会影响到整个盒子的大小
css中设置盒子的边框，由以下三个属性决定：
边框的宽度： border-width
边框的颜色： border-color
边框的样式： border-style
利用css提供的简写属性： border：1px solid red 同时设置了宽度、颜色、样式，这三个值没有顺序关系
- border-width 可以同时指定四个方向的边框宽度，也可以定向指定，根据值的不同
border-width：
值的情况：
四个值： 上 右 下 左 border-width: 10px 20px 30px 40px
三个值： 上 左右 下 border-width： 10px 20px 10px
两个值： 上下 左右 border-width： 10px 20px
一个值： 上下左右 border-width： 10px
- border-color 用法和border-width是一样的
- border-style 边框的样式：
值的情况：
- solid 实线
- dotted 点状虚线
- dashed 虚线
- double 双实线
- none 无边框（默认值）
盒模型-内边距：
- 内边距是指内容区与边框之间的距离
- 每个盒子一共由四个方向的内边距
可以分别通过css属性设置：
padding-top 上内边距
padding-right 右内边距
padding-left 左内边距
padding-bottom 下内边距
大多数情况下使用简写方式： padding：
根据值数量的不同，效果不同：
四个值： 上 右 下 左
三个值： 上 左右 下
两个值： 上下 左右
一个值： 上下左右
注意：内边距的大小设置会影响盒子可见框的大小
盒模型-外边距
- 外边距不在盒模型自身上，
- 外边距不会影响盒子可见框的大小
- 每个盒子具备四个方向的外边距：
margin-top 上外边距 设置正值或者负值
margin-right 右外边距
margin-left 左外边距
margin-bottom 下外边距
除了以上四个属性可以设置外边距之外，还可以利用简写形式margin同时为盒子的四个方向设置外边距
margin属性的用法和padding是一模一样的
html文档中所有的元素（块元素、行内块元素、行内元素）都是一个矩形盒子！
但是，行内元素的盒模型比较特殊！
矩形盒子组成部分 = 内容区 + 内边距 + 边框 + 外边距
单独讨论：
行内元素的盒模型：
- 行内元素不支持设置宽度和高度！
- 行内元素可以设置padding，但是垂直方向的padding不会影响页面，不起作用
- 行内元素可以设置border，但是垂直方向的border不会影响页面的布局
- 行内元素可以设置margin，但是垂直方向的margin不会影响布局
8、文档流
文档流（常规流）：
- 网页是一个多层的结构，一层叠着一层！在整个网页中有各最底层，原始层就是我们的文档流！
所有的在网页中的元素默认都是应该遵循在文档流中排列的规则！
基于文档流这个概念，所有的html元素就会存在两个概念：
1、元素遵循文档流的规则（元素在文档流中的表现）
块元素的特点：
1.块元素会在页面中独占一行（自上而下垂直排列）
2.默认宽度是其父元素的宽度（子元素的宽度默认是填满父元素）
3.默认高度是被自身的内容撑开/或者靠自身的子元素/或者设置一些相关的css属性
行内元素的特点：
1.行内元素不会独占页面的一行，只占自身大小的区域
2.行内元素在页面中是从左往右水平排列的，当一行无法容纳时才会自动换行
3.行内元素的默认宽度和默认高度都是由自身的内容决定的！（行内元素不能设置width和height属性）
行内块元素的特点：
1.可以设置宽高
2.不会独占一行
2、元素不遵循文档流的规则（元素不在文档流中的表现 脱离文档流）
1.元素脱离文档流后，不再占据文档流的实际位置！
2.元素脱离文档流后，元素的层级会自动提高！
3.元素脱离文档流后，将不在区分块元素，行内元素，行内块元素！统一视为一种元素，脱离文档流的元素
4.元素脱离文档流后，默认的宽度和高度由内容决定的！也可以自行设置宽高！
9、元素的溢出
子元素是在父元素的内容区进行排列的
如果子元素的大小超过了父元素，则子元素就会从父元素中溢出
注意：子元素所溢出的部分不会占据文档实际的位置！
处理溢出 通过css的overflow属性处理溢出的子元素部分
可选值：
visible,默认值 子元素从父元素中溢出，在父元素外部的位置显示
hidden，溢出的内容将会被裁剪，不会进行显示
auto 根据溢出的方向生成滚动条，通过滚动条的方式查看子元素所有的内容
10、外边距重叠
垂直方向的外边距重叠（折叠）： 相邻的垂直方向的外边距会发生重叠现象
- 兄弟元素
- 兄弟元素间的垂直外边距会取两者之间的较大值作为两个元素的外边距
兄弟元素之间的外边距折叠是对开发有利的！不需要过度的去处理！
- 父子元素
- 父子元素间外边距，子元素的外边距会传递给父元素，导致父元素也会更改盒子的位置！
- 父子外边距的折叠是不好的，会影响到页面的布局，必须要进行处理
- 处理方式：
1.给父元素开启BFC空间
- BFC特殊的块级领域！不会影响其他元素！
- overflow：hidden
2.设置父元素的padding
3.设置父元素的border
11、元素类型的转换
元素的类型转换，
块元素 ==》 行内元素，行内块元素
行内元素 ==》 块元素，行内块元素
.....
通过css的样式属性，display实现转换
可选值：
inline： 设置为行内元素
block： 设置为块元素
inline-block： 设置行内块元素
table: 设置为表格元素 了解
none： 将元素设置为不显示(是完全不存在于页面，不是简单的隐藏)
对应元素的隐藏设置，可以利用display：none进行切换
还可以visibility属性来设置元素的显示状态
可选值：
- visible 默认值，元素正常显示
- hidden 元素在页面中隐藏 元素不在页面中显示，但是元素依然占据着页面的位置！
12、盒子尺寸大小
盒模型，将所有的元素看作为矩形盒子
盒模型组成 = 内容区 + 边框 + 内边距 +外边距
默认情况下，盒子的可见框大小由：内容区 + 边框 + 内边距 共同决定的
w3c规定了两种盒模型：ie盒模型 ，标准盒模型
标准盒模型大小：内容区 + 边框 + 内边距 共同决定的
ie（怪异）盒模型大小：width + height
通过css的box-sizing属性可以改变盒模型的类型！
可选值：
- content-box 默认值，标准盒模型 内容区 + 边框 + 内边距 共同决定的
- border-box width + height决定可见框大小
13、CSS部分样式小结
字体颜色
color: ;
字体大小
font-size: ;
字体的粗细
font-weight: ;
元素的宽度
width: ;
元素的高度
height: ;
元素的背景色
background-color: ;
元素的外边距设置
margin: ;
上外边距
margin-top: ;
元素的内边距设置
padding: ;
元素的左内边距
padding-left: ;
元素的边框
border: ;
元素的边框
border-left: ;
border-top: ;
border-width: ;
border-style: ;
border-color: ;
元素的透明度
opacity: ;
列表的样式设置 序号圆点
list-style: ;
文本下划线相关的设置
text-decoration: ;
文本的排列模式 left right center
text-align: ;
行间距
line-height: ;
元素的阴影
box-shadow: ;
元素的盒模型转换
box-sizing: ;
元素的类型转换
display: ;
元素的轮廓
outline: ;
元素的圆角设置
border-radius: ;
元素的溢出设置
overflow: ;
元素的隐藏设置
visibility: ;
13、浮动
通过css的浮动属性可以使得一个元素向其父元素的左侧或者右侧进行浮动
使用 float 属性设置元素的浮动情况：
可选值：
none 默认值 元素不浮动
left 元素向左浮动
right 元素向右浮动
浮动属性是我们常用一种布局手段，该方式可以很便捷的将块元素横向摆放！
注意：元素一旦设置了浮动以后，水平布局是非常方便的！但是元素会完全从文档流中脱离！不再占用文档流中的位置！
元素是一种漂浮的状态！其他正常的元素就会自动的补占位置！
浮动元素的特点：
1.浮动元素会完全脱离文档流，不再占据文档流中位置
2.设置浮动以后元素会向其父元素的左侧或右侧移动
3.浮动元素默认情况下是不会脱离父元素的掌控
4.浮动元素向左或向右浮动时，它不会超过它前面的其他浮动元素
5.如果浮动元素的前面是一个没有浮动的块元素，则浮动元素无法上移
清除浮动： clear: both;
14、解决高度塌陷最佳办法
.clearfix::after,
.clearfix::before{
content: '';
display: table;
clear: both;
}
15、定位
定位（position):
- 定位是一种更高级的布局手段
- 通过定位可以将元素摆放到页面的任意位置
- 如何对一个元素开启定位？
通过css中的position属性来设置定位
属性的可选值：
- static 默认值 元素是静止的没有开启定位的模式
- relative 开启元素的相对定位
- absolute 开启元素的绝对定位
- fixed 开启元素的固定定位 （了解，不常用）
- sticky 开启元素的粘滞定位 （了解，不常用）
（1）相对定位：
当元素的position属性值，设置为relative则对该元素开启了相对定位模式！
- 相对定位元素的特点：
1.元素开启了相对定位后，如果不设置偏移量元素是不会发生任何变化的
2.相对定位是参照于元素在文档流中的位置进行定位的 （参照自身原本的位置，为基准）
3.相对定位会提升元素的层级
4.相对定位不会使元素脱离文档流
5.相对定位不会改变元素的性质，块还是块，行内还是行内，....
总结：相对定位是对页面布局影响最小的定位方式！
（2） 绝对定位
- 当元素的position属性值设置为absolute就为元素开启了绝对定位
- 绝对定位元素的特点：
1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化
2.开启绝对定位后，元素会从文档流中脱离
3.绝对定位会改变元素的性质，（脱离文档流的元素）
4.绝对定位会让元素提升层级
5.绝对定位元素是相对于其最近的开启了定位的包含块来定位的
口诀：‘子绝父相’
（3）固定定位：
- 将元素的position值设置为fixed则开启了固定定位
- 固定定位也是一种特殊的绝对定位，所有固定定位的特点基本上和绝对定位的特点的一致！
注意：唯一不同是固定定位永远参照于浏览器的视口进行定位
（4）粘滞定位:
- position设置为 sticky开启粘滞定位
- 粘滞定位和相对定位的特点基本一致
- 不同点是粘滞定位可以在元素到达某个位置时将其固定
- 元素开启了定位后，还需要设置定位的偏移量！如果不设置偏移量元素不会移动的
利用css的4个偏移量属性是设置元素的偏移量！
- top 定位元素和基准点上方向的距离
- left 定位元素和基准点左方向的距离
- right 定位元素和基准点右方向的距离
- bottom 定位元素和基准点下方向的距离
注意：一般情况下并不需要同时设置四个！通过两个即可！
定位元素的层级提升
z-index：；里面跟一个数字 数字越大层级越高，只能给开启定位的元素才能使用
16、表格
表格:
在现实生活中,我们经常是需要使用表格进行数据的展示!
课程表 成绩单.....
在网页中我们是通过table标签来创建一个表格元素!
H5中一个标准的表格组成:
头部 thead
主体 tbody
底部 tfoot
th 表示头部 thead中的单元格
td 表示除头部外的单元格内容
tr 表示行
17、表单
表单:
- 对数据的收集!并且利用表单发送给服务器!
html中使用form标签来创建一个表单!
form的属性:
action 表单要提交的服务器地址 ,填写服务器的地址!
表单的控件元素: input(输入型的控件 根据该控件的type值的不同!所展示的控件形态也不同!)
input:
- type属性:
常见的type属性(常用的):
- text 文本输入框
- password 密码输入框
- radio 单选框
- checkbox 多选框
- button 普通按钮控件
- submit 提交按钮控件
- reset 重置按钮控件
- name属性
注意:数据要想提交给服务器,那么每一个表单控件都应该指定一个name属性值
- value属性
value属性是与name属性进行搭配使用, 一个表单控件 必须存在 name和value
name和value就会构成一种数据格式: name=value
- placeholder属性 用于输入框的提示描述
- disabled 禁用控件 并且数据不能提交给服务器
- readonly 只读控件 数据不能修改但是可以提交给服务器
- 其他的表单控件
按钮 button
下拉列表 select
下拉项 option
- label 标签,该标签的作用是用于绑定输入控件! 利用for属性绑定控件的id值
18、flex弹性盒子
flex (弹性盒)：
- 是css中的又一种高级的布局手段，它主要用来替代浮动的！
- flex可以使得元素具有弹性！让元素可以跟随页面发送变化！
- 弹性容器：为一个元素开启了flex时，该元素就是弹性容器，弹性盒
- 利用css的属性 display 开启
display:flex 将元素设置为块级弹性容器
display：inline-flex 将元素设置为行内块的弹性容器
- 弹性元素（项目元素）：弹性容器下的子元素就称作为，弹性元素！项目元素！
元素一旦开启了flex布局，那么该容器就自动生成两个轴线！
分别是主轴和侧轴
- 主轴：默认情况下，主轴就是横向的x轴，方向是从左往右
- 侧轴：默认情况下，侧轴就是纵向的y轴，方式是从上往下
注意：弹性元素，就会在主轴和侧轴上进行排列！
- css的属性设置
- 弹性容器设置相关的css属性
- 以下这些属性都是设置在弹性容器身上的！
1. flex-direciton 指定容器中的主轴和侧重方向！
可选值：
- row 默认值 主轴是x轴 方向是从左往右 ，侧轴是y轴，方向是从上往下
- column 主轴是y轴 方向是从上往下 ，侧轴是x轴，方向是从左往右
2. flex-wrap 设置弹性元素是否在弹性容器中换行
可选值：
nowrap 默认值 弹性元素不会换行
wrap 元素可以进行换行
3. flex-flow 该属性是 direciton和wrap属性的简写！
4. justify-content 分配主轴上的空白空间
可选值：
flex-start 元素从主轴的起点排列 默认值
flex-end 元素从主轴的终点排列
center 元素居中排列
space-around 空白分布到元素的两侧
space-between 空白均匀分布的元素之间 ，开始元素顶格容器边缘，末尾元素顶格容器的边缘
space-evenly 空白均匀分布到元素
5. align-items 设置元素在侧轴上对齐的方式
可选值：
- streth 默认值， 如果元素未设置高度或者宽度，则将元素沿着侧轴填满
- flex-start 元素不会拉伸，沿着侧轴起点对齐
- flex-end 元素不会拉伸，沿着侧轴终点对齐
- center 侧轴居中对齐
- baseline 文本基线对齐 了解
6. align-content 分配侧轴上的空白空间 ，
注意：该属性只能用于容器开启了换行模式才能生效 flex-wrap：wrap
可选值：
flex-start 所有元素向侧轴的起点对齐
flex-end 所有元素向侧轴的终点对齐
center 所有元素向侧轴的中间对齐
space-around 空白分布到元素的两侧
space-between 空白均匀分布的元素之间
stretch 空白单向向元素一侧分配，产生间隙
- 弹性元素的属性：
1. order 排序 数值越小 排列越靠前 默认为0
2. flex-grow 指定弹性元素的伸展系数 元素的扩充 默认情况元素不会自动扩充
3. flex-shrink 指定弹性元素的压缩 当空间不够时对元素进行压缩 默认压缩系数是1
4. flex-basis 指定元素的初始值大小，元素的宽高属性！ 该属性要优于元素的宽高属性！
5. flex 属性是 flex-grow ， flex-shrink ， flex-basis 的简写
- flex
auto ： 1 1 auto
none ： 0 0 auto
6. align-self 该属性是用来覆盖当前弹性元素上的aline-items属性值的，特殊化的对待
- flex-start
- flex-end
- center
- baseline 了解
- stretch 拉满侧轴
注意： 弹性元素既可以作为某一个弹性容器的弹性元素，也可以作为其他元素的弹性容器！
元素一旦变成弹性元素后，则不再区分行元素，块元素，行内块元素
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
