1、CSS 指层叠样式表 (Cascading Style Sheets)
2、优势：内容与表现分离
提高了工作效率
减少网页的代码量
增加网页的浏览速度
提高可读性
3、html和css的关系：
html：结构层，负责结构
css：样式层，负责美化
实例：<div style="color:red;">文字</div>
js：行为层，负责交互
4、css引入：
1)行内（内联）样式:
将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势,请慎用这种方法.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<title>初识css</title>
<!-- <font size="7" color="red">你好呀，芭提雅！</font> -->
<!--html所使用方法-->
<div style="color: red;background-color: bisque;"> <!-- 行内样式 -->
你好呀，芭提雅！
</div>
</body>
</html>
2）内部（内嵌）样式
当单个文档需要特殊的样式时，就应该使用内部样式表,多用于一些演示与案例
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>初识css</title>
<style>
div{
color: red;
background-color: aqua;
font-size: 90px;
}
</style> <--!注意stype-->
</head>
<body>
<div > <!-- 内嵌样式 -->
你好呀，芭提雅！
</div> <--!注意div-->
</body>
</html>
3、外部（链接）样式
新建css文件
div{
color: red;
background-color: aqua;
font-size: 60px;
}
当样式需要应用于很多页面时，外部样式表将是理想的选择，项目必选。
<link rel="stylesheet" type="text/css" href="1.css"/>
stylesheet:样式表；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>初识css</title>
<link rel="stylesheet" type="text/css" href="css/1.css"/> <!-- 外部样式 -->
</head>
<body>
<div>
你好呀，芭提雅！
</div>
<div >
你好呀，芭提雅！
</div>
</body>
</html>
4、导入样式（更多使用链接样式）
新建css文件
div{
color: red;
background-color: aqua;
font-size: 60px;
}
1)导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面， 闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。
2)link功能更强大
3)link无兼容问题
4）link支持js控制样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>初识css</title>
<style type="text/css">
@import url("css/1.css");
</style> <!-- 此处是重点 -->
</head>
<body>
<div>你好呀，芭提雅！</div>
<div >你好呀，芭提雅！</div>
</body>
</html>
16进制表示颜色：
十六进制：0-F
css中：
#000000 表示黑色
#FFFFFF 表示白色
css颜色遵循RGB格式：R（red）G（green）B（blue），分别对应红绿蓝三种颜色，
那么，css的六位表示颜色的值，其中第一二位表示红色，三四位表示绿色，五六位表示蓝色。
#FF0000 表示纯红色
#00FF00 表示纯绿色
#0000FF 表示纯蓝色
以上是六位数表示颜色，也可以使用三位数来表示，例如：
#FF0000=#F00
三位数中第一位表示红色、第二位表示绿色，第三位表示蓝色。
红、绿、蓝为三原色。红色与绿色混合为黄色，红色与蓝色混为紫色，绿色与蓝色混合为青色
红：#FF0000
绿：#008000
蓝：#0000FF
黄：#FFFF00
纯紫：#800080；紫红色#FF00FF
青：#00FFFF
橙：#FFA500
黑：#000000
白：#FFFFFF
rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度
5、css基础语法：
选择器{属性1:值1;属性2:值2;...}
实例：div{
color: red;
background-color: aqua;
font-size: 60px;
}
注意：属性和属性值之间用英文冒号(:)隔开，定义多个属性时，属性之间用英文输入法下的分号(;)隔开。
css注释同c语言：但只有一种注释方法：<*注释*>
6、css选择器：选择器可以选中要添加样式的标签
1）标签选择器：以标签作为选择器
实例：html:<span>文字</span>
css: span{color:red}
text-align: center居中
text-indent:30px; text-indent:2em;text-indent:2rem缩进
list-style:none;去除列表前的项目
font-family:选择字体
font-size:：选择字体大小
background-image: url(../img/beijing10.jpg);网页背景
color:字体颜色
2)类选择器：是对HTML标签中class属性进行选择。
CSS类选择器的选择符是点(“.”)
.类名{属性1:属性值1:...}
实例：html:<span class="one">文字</span>
css: .one{color:red}
3)多类选择器：一个标签同时存在多个类选择器的值
实例：css: .one{color:red}
.two{color:green}
html:<span class="one two">文字</span>
4）id选择器：#id名称{属性:属性值;}
实例：css: #one{color:red}
html:<span id="one">文字</span>
注意：id名称的值页面中是唯一的
5)通配符选择器: *{属性1:值1;...}
6)衍生选择器：由基础选择器组合衍生出来的选择器
1>、交集选择器：同时满足多个选择器同时选中的标签才可以应用样式
实例：css:选择器1选择器2{color:red;}
html:<span class="one">文字</span>或<span id="one">文字</span>
2>、并集选择器：同时满足多个选择器中的一个选中的标签就可以应用样式
实例：css:选择器1,选择器2{color:red;}
html:<span class="one">文字</span>或<span id="one">文字</span>
注意：选择器可以是标签、class名、id名
3>、后代选择器：满足第一个选择器选中的元素中包含后面选择器选中的元素
实例：div span{color：red；}
4>、子代选择器：满足第一个选择器选中的元素中直接包含后面选择器选中的元素
实例：div>span{color：red；}
5>、相邻兄弟选择器：可选择紧接在另一元素后的元素，且二者有相同父元素
实例：div+span{color:red;}
注意：要选择的元素只能在后面
E ~ F E元素后面的兄弟元素
6>、属性选择器：可选中带有相关属性的元素，可以指定具体的属性值
[attr]、div[attr]、div[attr='ok']
实例：li[class="one"]{color:#FF0000;}
1、div[attr] 含有attr属性的元素
2、div[attr='ok'] 含有attr属性的元素且它的值为“ok”
3、div[attr^='ok'] 含有attr属性的元素且它的值的开头含有“ok”
4、div[attr$='ok'] 含有attr属性的元素且它的值的结尾含有“ok”
5、div[attr*='ok'] 含有attr属性的元素且它的值中含有“ok”
7)伪类选择器：
:active向被激活的元素添加样式
:focus向获得焦点的元素添加样式
:hover向鼠标悬浮时的元素添加样式(多用)
:link向未被访问的链接添加样式
:visited向已被访问的链接添加样式
:first-child向元素的第一个子元素添加样式、
:nth-child(2)第二个子元素、
:last-child最后一个元素
:nth-child(2n)偶数标签、
:nth-child(2n-1)奇数标签、
:nth-child(-n+3)从0到3，不包括3
:nth-child(n+3)从3到最后
:nth-last-child(3)倒数第三个
:lang向带有lang属性的元素添加样式
注意：hover 必须被置于 link 和 visited 之后，才是有效的
active 必须被置于hover 之后，才是有效的。
link->visited->hover->active
8)伪元素：
:first-letter向文本的第一个字添加样式
:first-line向文本首行添加样式
:before在元素之前添加内容
:after在元素之后添加内容
注意：first-letter和first-line仅仅应用于作块元素
p:before\before{content:"2021"}
::selection 伪元素匹配用户选择的元素部分。
在 CSS3 中，双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类和伪元素的尝试。
在 CSS2 和 CSS1 中，伪类和伪元素都使用了单冒号语法。
为了向后兼容，CSS2 和 CSS1 伪元素可接受单冒号语法。
提醒，如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不 兼容IE浏览器，还是用CSS2的单冒号写法比较安全
7、css字体样式：
font-size:设置文字大小 18px、12pt、120%、1em
font-family:设置字体
font-weight:设置加粗 normal默认、bold粗体、100px
font-style:设置文字风格 normal默认、italic斜体、oblique倾斜
font-variant:设置文字变化 normal默认、small-caps小体大写字母
font:字体复合写法 大小和字体必须往后放，字体放最后
8、css文本样式
color:颜色
line-height:行高。文本行基线间的距离
text-align:对齐方式
text-docoration:文本修饰 none、underline
text-indent:缩进
direction:文本方向 rtl、lrt
text-transform控制元素中的字母
word-spacing词间距
（（display:none不显示
display:block显示
border:颜色 粗细 实线（solid）必须都要有
border-color: #FF9600 #3366ff #12ad2a #f0eb7a;
border-style: solid;
border-width: 20px;
text-decoration:none 去掉装饰
list-stype:none 去掉列表项
选择器->盒子模型、浮动->定位））
9、css背景
1）背景颜色（background-color)
取值:颜色
十六进制："#ff0000"==>可简写"#f00"
RGB：rgb(255,0,0)
颜色名称:red
透明:transparent(默认)
2）背景图（background-image)
取值: url("url") 或 none(无背景)
3）背景图重复(background-repeat)
取值:
repeat 垂直和水平方向重复(默认) | repeat-x 水平重复
repeat-y 垂直重复 | no-repeat 不重复
4）背景图定位(background-position)
取值如下:
英文: left、right、center、bottom、top
百分比: x% y%
长度: 6px 7px
取值若指定一个值另外一个值则是50%
5）背景是否固定(background-attachment)
取值:
scroll(背景图片随页面的其余部分滚动。默认)
fixed（背景图相对于视口固定）
背景简写(background)
例如: background:颜色 url('smiley.gif') no-repeat 80px 100px;
10、css三大特性
1.继承性：指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性
特殊情况:
1)a标签的字体颜色不能继承父元素。
2)h标签字体的大小也是不能被继承的,也不能继承父元素。
2.层叠性:css处理冲突的能力
层叠性只有在多个选择器选中”同一个标签”, 然后又设置了”相同的属性”, 才会发生层叠性.
3.优先级
当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定
①样式优先级
多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。
一般情况下，优先级如下：
外部样式 <内部样式 < 内联样式(行间)
②选择器优先级
选择器的优先权解释说明：
0.!important权值无穷大。
1.内联样式表的权值 1000。
2.ID选择器的权值为 100。
3.Class类、伪类、属性选择器的权值为 10。
4.标签选择器、伪元素权值为 1。
5.通配符如*、>、+,权值为0000。
6.继承的样式没有权值。
CSS优先级规则：
1.选择器都有一个权值，权值越大越优先。
2.当权值相等时，后出现的样式表设置要优于先出现的样式表设置。
3.创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式。
4.继承的CSS 样式不如后来指定的CSS 样式
5.继承的优先于浏览器自带的
11、模式转换-display属性
将行内元素转换为块级元素： display:block;
将行内元素转换为行内块元素： display:inline-block
将块元素转换行级元素： display:inline
12、盒子模型：每一个可见的html元素都是一个盒子，html元素中包含（嵌套）其他元素。
将HTML页面中的元素看作是一个矩形的盒子，也就是一个容器，由内容（content）、内边距（padding）、
边框（border）和外边距（margin）组成。
1)border边框
border-with:边框宽
border-stype:边框样式
none、hidde、solid、dotted（圆点虚线）、dashed（方块虚线）、double（双线）、
groove(3D凹槽边框:左上外)、ridge(3D凹槽边框:左上内)、inset(3D左上)、outset(3D右下)
border-color:边框颜色
简写：border:宽度 样式 颜色;
border-top:设置上边框样式
border-bottom:设置下边框样式
border-left:设置左边框样式
border-right:设置右边框样式
2）padding内边距
padding:10px 上，下，左，右距离分别是10px
padding:10px 40px 上下10px 左右40px
padding:10px 40px 20px 上10px 左右40px 下20px
padding:10px 20px 30px 40px 上10 右20px 下30px 左40px
padding- 代表方向，left、top、right、bottom
盒子宽度=盒子宽度+左右内边距+边框宽度
3）margin外边距
margin:10px 上，下，左，右距离分别是10px
margin:10px 40px 上下10px 左右40px
margin:10px 40px 20px 上10px 左右40px 下20px
margin:10px 20px 30px 40px 上10 右20px 下30px 左40px
margin- 代表方向，left、top、right、bottom
注意：margin:0 auto水平居中，（需要设置宽度）行级元素不能设置宽度
margin之外边距合并（边距合并问题只发生在块级元素之间。）
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
元素存在包含关系同时设置外边距，最终的外边距取值于较大者
解决方案：
1.给父元素设置边框即可
2.给父元素设置overflow:hidden
margin特点：
块级元素的垂直相邻外边距会合并
行内元素实际不占上下外边距，左右外边距不合并
浮动元素的外边距也不会合并、
不透明度：
语法：opacity: value;【css3属性】
说明: value: 0.0 （完全透明）到 1.0（完全不透明）
轮廓（outline）：是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
outline：在一个声明中设置所有的轮廓属性；
outline-color:颜色
outline-style:样式
outline-width:宽度
注意:轮廓线不占物理空间，边框占物理空间
注意：水平方向的布局
1、margin-left + border-left + padding-left +(内容，也许有很多)+ padding-right + border-right + margin-right= 父元素宽度
以上内容必须满足，等式不成立，则称为过度约束（约束过度使等式不成立），等式会自动调整
2、如果这七个值中没有为auto的情况，则浏览器自动改变margin-right以使等式成立
3、有三个值可以设auto：自动改变auto那个值以使等式成立
1）、内容
2）、margin-left
3）、margin-right
4、如果设置内容和外边距都为auto，则会把内容调到最大，外边距为0
5、margin-left和margin-right都为auto则会平均分配。
margin: atuo;意思是上下左右外边距平分
13、标准流（文档流）：块级元素纵向有序排列，行内块（行内）元素横向有序排列
元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。
脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。
脱离文档流：目前有 浮动和部分定位
浮动核心：浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。
语法：float:left 或 right 或 none
浮动特点：
1：浮动找浮动，不浮动找不浮动
2：浮动只影响后面的元素
3：浮动以元素顶部为基准对齐
4：浮动可以实现模式转换（span 设置浮动可以设置宽高）
5：让块级元素在一行显示
6：浮动元素不会互相重叠
7、浮动元素不会上下浮动
8、行内元素浮动后变为块级元素
14、网页常见布局类型
T字形
国字型
拐角型
15、清除浮动的方式
1. 父级div定义 height
2.结尾处加空div标签 clear:both
3.父级div定义 伪类:after 和 zoom
4.父级div定义 overflow:hidden|auto
5.父级div 也一起浮动
6.父级div定义 display:table
7.结尾处加 br标签 clear:both
16、css初始化：解决css中重复的css样式
清楚解决浏览器默认带的样式
实例（通配符解决）：*{
margin:0px;
padding:0px;
font-size;14px;
color:gray;
list-style:none;
text-decoration:none;
}
17、overflow：规定当内容溢出元素框时发生的事情。
overflow:visible 默认值。内容不会被修剪，会呈现在元素框之外。
overflow:hidden 内容会被修剪，并且其余内容是不可见的。
overflow:scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
overflow:auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
18、定位（好处是不会动其他元素：margin会影响相邻元素）
1）position:static 元素是静止的没有开启定位（默认）
（就是按照标准流的方式显示）注意:标准流加方向词无作用。
3）position:relative 相对定位
相对定位的元素特征
1、若没有设置偏移量则元素不会有任何变化
2、相对定位以元素自身的原始位置为基准进行移动
3、相对定位原始位置保留(未脱离文档流)
4、相对定位会提升元素的层级
5、相对定位不会改变元素的性质，行内块还是行内块
3）position:absolute 绝对定位
绝对定位的元素特征:
1、若没有设置偏移量则元素位置不会有任何变化
2、距离自身最近的有定位的祖先元素为基准进行移动
3、脱离文档流
4、提升元素的层级
5、会提升元素的层级绝对定位可实现模式转换(所有元素一视同仁)，自定义width与height，
（未脱离文档流：元素不设宽高则自动继承父元素）
（脱离文档流：由内容撑开）
包含块：
正常情况下：当前元素最近的"祖先'块'元素";
绝对定位：距离自身"最近的有定位的祖先元素";
4）position:fixed 固定定位
固定定位的特征
1、参照浏览器窗口
2、脱标
5）position:sticky 粘滞定位(兼容性不太好)
粘滞定位和相对定位特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定。
1、针对上层有出现滚轮的元素做定位（极其重要）。
2、不会脱离原本页面空间。
3、父亲离开页面时，子元素会跟着离开。
方向词：top、right、bottom、left
z-index：层叠索引
设置元素的堆叠顺序。取值为整数。
数值越大谁处于堆叠的上方。不设置则后方的元素在前面元素的上方。
默认值：0。可以取负值
注意:若需要给元素设置z-index，则必须先设置为定位元素。
19、boder—radiu：设置元素边角。
按此顺序设置每个的四个值。左上——>右上——>右下——>左下。
如果省略 bottom-left，则与 top-right 相同。
如果省略 bottom-right，则与 top-left 相同。
如果省略 top-right，则与 top-left 相同。
总结就是：下面省略找对角，上面省略找兄弟。
border-bottom-left-radius: 100px 30px;
第一个值是水平半径，第二个值是垂直半径。如果省略第二个值，则复制第一个值。
水平半径的百分比值参考边框盒的宽度，而垂直半径的百分比值参考边框盒的高度。
取值：0%(棱角)~50%（弧线）
20、css阴影
实例：box-shadow（标签，而不是实例）:向右伸缩值 向下伸缩值 模糊程度 阴影大小 颜色
21、长度单位：
1)px：像素
2)%：设置属性值相对于父元素属性的百分比。可以使子元素跟父元素同比例变动。
3)vw——viewpoint width，视窗宽度，1vw等于视窗宽度的1%；
vh——viewpoint height，视窗高度，1vh等于视窗高度的1%；
vmin是两者中较小者，vmax是两者中较大者
4）rem(font size of the root element)是指相对于根元素的字体大小的单位。
5）em
22、cursor：光标
属性：
crosshair： 十字形；
default： 默认光标（通常是一个箭头）；
pointer： 光标呈现为指示链接的指针（一只手）；
24、box-sizing:
content-box：
这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框
我们经常遇到的默认状态
border-box：
为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit：规定应从父元素继承 box-sizing 属性的值。
CSS3
1、css3过渡：transition（参考7-29，transition）
经常与hover连用
1、transition-property 规定应用过渡的 CSS 属性的名称，比如：width height background-color
只要是可以改变的数值都可以
2、transition-duration 设置过渡持续的时间，比如：1s 500ms（默认0）
3、transition-timing-function 设置过渡的运动方式，常用有 linear(匀速)|ease(缓冲运动：默认)
4、transition-delay 设置动画的延迟（默认0）
5、transition: property duration timing-function delay 同时设置四个属性
2、转换transform
1、translate(x,y)设置盒子位移
2、scale(x,y)设置盒子缩放
3、rotate(deg)设置盒子旋转
4、skew(x-angle,y-angle)设置盒子斜切
5、perspective设置透视距离
6、transform-style flat 表示所有子元素在2D平面呈现
transform-style preserve-3d 表示所有子元素在3D空间中呈现
盒子是否按3d空间显示
7、translateX、translateY、translateZ 设置三维移动
8、rotateX、rotateY、rotateZ设置三维旋转
9、scaleX、scaleY、scaleZ设置三维缩放
10、transform-origin设置变形的中心点
11、backface-visibility 设置盒子背面是否可见
3、animation动画
1、@keyframes 定义关键帧动画
2、animation-name 规定 @keyframes 动画的名称。这个名字可以自己起。
3、animation-duration 动画持续时间
4、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)
5、animation-delay 动画延迟（动画开始之前的延迟）
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction 动画结束后是否反向还原 normal|alternate
8、animation-play-state 动画状态 paused(停止)|running(运动)
9、animation-fill-mode 动画前后的状态 none(缺省)
forwards(结束时停留在最后一帧)
backwards(开始时停留在定义的开始帧)|both(前后都应用)
10、animation:name duration timing-function delay iteration-count direction;
同时设置多个属性 。尽量按以上顺序填写。
4、box-shadow
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。
5、弹性布局display: flex;
1、diplay:flex|inline-flex;
flex---将对象作为弹性伸缩盒显示（自动缩小以使内容放下）
inline-flex---将对象作为内联块级弹性伸缩盒显示（不缩放按原有大小放，多出页面自动添加滚动条）
2、采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。
其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。
3、容器默认存在两根主轴：
主轴：默认为水平方向，但可以设置为垂直方向
交叉轴：默认垂直方向，但主轴设为垂直方向后，交叉轴为水平方向。即交叉轴随主轴变动而变动。
水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认项目按主轴排列。
main start/main end：主轴开始位置/结束位置；
cross start/cross end：交叉轴开始位置/结束位置；
main size/cross size：单个项目占据主轴/交叉轴的空间。
属性：
1、flex-direction属性：决定主轴的方向
语法:
flex-direction: row | row-reverse | column | column-reverse;
取值:
row（默认）：主轴水平方向，起点在左端；
row-reverse：主轴水平方向，起点在右端；
column：主轴垂直方向，起点在上边沿；
column-reserve：主轴垂直方向，起点在下边沿。
2、flex-wrap属性：决定一条轴线排不下，如何换行.
语法:
flex-wrap: nowrap| wrap | wrap-reverse ;
取值:
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方
3、flex-flow属性：flex-direction属性和flex-wrap属性的简写形式
语法:
flex-flow: <flex-direction> || <flex-wrap>;
取值:
默认值为row nowrap。
4、justify-content属性:定义了项目在主轴上的对齐方式。
语法:
justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly;
取值:
1.flex-start（默认值）：左对齐
2.flex-end：右对齐
3.center： 居中
4.space-between：两端对齐，项目之间的间隔都相等。
5.space-around：每个项目两侧的间隔相等。
6. space-evenly：flex-item之间每个间隔都一样的布局。
5、align-items属性:定义了项目在交叉轴上的对齐方式。
语法:
align-items : flex-start|flex-end|center|baseline| stretch;
取值:
1.stretch(默认)：如果项目未设置高度或设为auto，将占满整个容器的高度
2.baseline：项目的第一行文字的基线对齐。
6、align-content属性:定义了多根交叉轴轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
语法:
align-content : flex-start|flex-end|center|space-between|space-around|stretch;
取值:
1.flex-start：与交叉轴的起点对齐
2.flex-end：与交叉轴的终点对齐。
3.center： 与交叉轴的中点对齐。
4.stretch(默认)：轴线占满整个交叉轴
5.space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
6.space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
4.项目的属性
1、order属性：定义项目的排列顺序,数值越小，排列越靠前，默认为0。
2、flex-grow属性：定义项目的放大比例，默认为0。即如果存在剩余空间，也不放大。
语法: flex-grow: <number>;
剩余空间 = containerWidth - itemWithSum;
注意:若没有剩余空间则不放大。
若存在，项目flex-grow之和大于1则按照比例分配剩余空间。
若存在，项目flex-grow之和小于1则按照剩余空间*对应的number
若都设置，将所有正整数相加得到分母，每个属性的数值作为分子，然后乘以剩余空间。
公式：分子/分母*剩余空间
3、 flex-shrink属性：定义了项目的缩小比例，默认为1。即如果空间不足，该项目将缩小。
语法: flex-shrink: <number>;
多余空间 = itemWithSum - containerWidth ;
注意:若没有多余空间则不缩小。
若存在，项目flex-shrink之和大于1则按照比例分配缩小空间。
若存在，项目flex-shrink之和小于1则按照多余空间*对应的number
将所有值乘以各自宽相加得到权重，
项目要减去的长度：每个属性的数值*超出的空间*自身宽/权重
4、flex-basis属性：分配多余空间之前，项目占据的主轴空间（main size）
默认值为auto，即项目的本来大小。
语法:
flex-basis: <length> | auto;
注意: content –> width –> flex-basis
5、flex属性：flex-grow, flex-shrink 和 flex-basis的简写，
默认值为 0 1 auto。后两个属性可选。
语法:
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis’> ]
该属性有两个快捷值：flex:1 flex:auto (1 1 auto) 和 none (0 0 auto)。
6、align-self属性：允许单个项目有与其他项目不一样的对齐方式，交叉轴上。 (默认auto)
将覆盖align-items属性
语法:
align-self: auto | flex-start | flex-end | center | baseline | stretch;
注意
当我们为父元素设置flex，子元素的float,clear,vertical-align属性将失效
子容器可以横向排列也可以纵向排列
总结
通过给父盒子添加flex，来控制子盒子的位置和排列方式
补充：
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
08-12
386
386
08-08
430
430
08-09
664
664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
