####网页的布局方式Layout
####标准流：
1.定义：
标准流也叫文档流/普通流，是浏览器布局的默认方式。
2.特点：
在标准流中有水平布局和垂直布局2种方式。
块级元素垂直布局，行内块或行内元素水平布局，当浏览器宽度一行不足以容纳时换行从左到右依次排版。
####浮动流：
1.定义：
浮动流是一种“半脱离标准流”的排版方式，它只能在水平方向上排版。
为什么说是半脱离标准流？因为它脱标后元素的位置依然是遵守标准流的布局规则，即浮动元素的位置是受限于它脱标前在标准流中位置的。
2.特点：
1.在浮动流中是不区分块级元素/行内元素/行内块级元素的，都可以水平排版
2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
3.综上所述, 浮动流中的元素和标准流中的行内块级元素很像
3.注意点：
1.浮动流中没有居中对齐, 也就是没有center这个取值
2.在浮动流中不可以使用margin: 0 auto;
4.浮动特性：
1.浮动元素的脱标：
当一个元素设置浮动后，就会脱离标准流，不在标准流中占据位置，标准流中后面的元素就要往前补位，此时浮动元素就会盖住标准流中的元素。
2.浮动元素排序规则：
1.相同方向上的浮动元素，先浮动的在前面，后浮动的在后面
2.不同方向上的浮动元素，左浮动找左浮，右浮动找右浮
3.浮动元素浮动后的位置，由它之前在标准流中的位置确定。
3.浮动元素的贴靠现象：
1.如果浮动元素的父元素宽度足以容纳所有浮动元素，浮动元素会并排显示
2.如果浮动元素的父元素宽度不能容纳所有浮动元素，那么就会从最后一个可以容纳的浮动元素边界处进行贴靠
3.如果贴靠前面的浮动元素依然不能显示，最终贴靠到父元素的左侧或是右侧边界。
4.浮动元素的字围现象：
浮动元素不会遮盖到标准流中元素的文字，标准流中元素的文字会给浮动元素让位置，贴靠到它的周围，这就是字围现象。
5.清除浮动：
1.为什么要清除浮动？
1.当子元素浮动后，不能撑起父元素的高度，父元素高度塌陷
2.当前面元素浮动后，脱标导致后面元素向前补位。
2.怎么清除浮动？
本质：开启元素的BFC:block formatting context
盒子是css布局的对象和基本单位，直观的说，整个网页都是由一个个盒子组成的。 元素的类型和display属性决定了这个盒子的类型。不同类型的盒子有不同的FC。FC是一个决定如何渲染盒子及它内部元素的容器。
FC分为：BFC和IFC，行内元素使用IFC规则，块级元素使用BFC规则
我们主要使用BFC，IFC很少使用
BFC：它是一块独立的渲染区域，内部只有block-level-box参与其中，并且与它外部毫不相干。
布局规则：
1.内部盒子在垂直方向放置，每个独占一行，和标准流相同
2.内部子盒子之间的间距由margin控制，垂直方向会重叠，和标准流相同
3.计算BFC高度时，浮动元素也参与计算
4.BFC区域不会与浮动元素重叠
5.BFC区域内部如何布局不会影响外部，反之亦然。
默认BFC不开启，怎么开启元素的BFC？
1.html 根标签自带BFC，形成标准流
2.浮动元素，属性不为none;
3.定位元素，绝对定位/固定定位；
4.overflow:hidden/auto/scroll; 即不为none的元素
5.display:inline-block;的元素
3.清除浮动的六种方式:
1.直接给父元素设置高宽。（在开发中，高度尽量不写）
2.给当前要清除浮动的子元素设置clear:both;属性，可以使它不受前面浮动兄弟元素影响，可以撑起高度。但设置了clear属性后，弊端：不能使用该元素的margin-top属性了
3.外墙法：在两个有浮动子元素的盒子之间添加一个额外的块级元素然后为这个块级元素设置clear:both;设置这个div的宽高可以模拟盒子的margin效果，但它创建了冗余的结构，不利于维护
4.内墙法：在上一个浮动元素的后面添加一个额外的块级元素然后为这个块级元素设置clear:both;内墙法使第二个盒子的margin-top属性生效，但同样它创建了冗余的结构，不利于维护
5.为浮动元素设置overflow:hidden;它可以撑起父元素高度，也可以使用margin属性，优点：不用添加额外的标签又可以撑起父元素的高度；缺陷：和定位一起用时会产生冲突。在ie8及以下浏览器中，不支持overflow属性，所以用*zoom = 1; 来兼容。 *是hack标识符，只有ie8及以下版本可以识别到。
6.为要清除浮动的元素设置.clearfix类
.clearfix::before,.clearfix::after{
content:"";
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix{
*zoom:1;
}
这样设置是最优解法，撑起了元素高度，可以使用margin属性
####position定位流：
position:relative/absolute/fixed/*static*;
relative:
1.定义：
相对定位是参照元素本身在标准流中的位置来移动。
2.注意点：
1.相对定位的元素不脱离标准流，仍然在标准流中占据位置
2.相对定位的元素在某个方向上的定位属性只能用一个
3.由于相对定位的元素不脱离标准流，所以区分块级/行内块/行内元素，给它设置margin/padding,依然会对标准流产生影响。
absolute:
注意点：
1.相对于离它最近的祖先元素进行定位，如果没有一直找到初始包含块
2.绝对定位元素脱离了标准流，因此它不区分行内/行内块/块级元素，设置它的padding/margin属性也不会影响到标准流中的布局。
3.默认情况下，绝对定位是以初始包含块为参照进行定位的。
4.绝对定位元素会忽略它定位参照物的padding。
5.子绝父相：
因为relative会占据标准流的位置，不利于布局，而absolute默认参照初始包含块定位，会随着网页滚动而滚动。因此大多数场景下我们使用子绝父相。比如，图片的层叠。
6.绝对定位元素不在标准流中，不能再使用margin:0 auto;的居中方案，此时要用：
1.left:50%; margin-left:负的自身宽度的一半
2.left:50%; transform:(translateX(-50%));
fixed:
注意点：
1.固定定位参照于视口左上角。
2.固定定位脱离标准流，因此它不区分行内/行内块/块级元素，设置它的margin/padding也不会影响到标准流的布局
3.固定定位元素和position-attachment:fixed，效果很像，即不会随着滚动条滚动而滚动。
4.IE6不支持固定定位，且移动端开发中，经常使用绝对定位来模拟固定定位。
z-index属性：
1.作用：
z-index属性是专门用于控制定位元素的覆盖关系的。
2.注意点：
1.默认情况下所有元素都有z-index属性，默认值为0.
2.默认情况下，定位流覆盖标准流，后面的定位元素覆盖前面的定位元素，而设置了z-index后，谁的值越大，谁显示在前面。
3.相对定位元素也可以设置层级。
3.z-index的从父现象：
如果2个元素的父元素没有设置z-index,则谁的高，谁显示在前。
如果2个元素的父元素有设置z-index,则谁的父元素层级高，谁显示在前。
3.应用场景：设置后面的定位元素不能覆盖前面的导航条等
####flex 伸缩布局
1.定义：
伸缩布局是一种新的布局方案。设置display:flex；的元素是container, 里面的子元素成为 items, 有主轴 main axis, 从轴 cross axis
2.属性：
1. flex-deriction: *row*/column/row-reverse/column-reverse;
注意：默认main cross为x轴，原点在container左上角
2.justify-content items在主轴上的对齐方式：
取值：
*flex-start*;
flex-end;
center;
space-between;
space-around;
3.align-items items在侧轴上的对齐方式：
取值：
*flex-start*;
flex-end;
center;
baseline;
stretch; items拉伸对齐。使用此参数注意items不能设置宽度或高度，否则stretch失效。因为固定了高度/宽度，此时无法拉伸了
4.align-self 单个item在侧轴上的对齐方式：
取值：
*flex-start*;
flex-end;
center;
baseline;
stretch;
注意点：
1.align-self要写在item的css中，它是项目属性。
/items换行与换行对齐/
5.flex-wrap 主轴宽度不足以容纳所有items时，items的排列方式(等比压缩或换行显示)
取值：
*nowrap*; 默认等比压缩伸缩项，不换行
wrap; 伸缩项换行显示，不压缩
wrap-reverse; 伸缩项换行，并以行为单位进行反序排列
6.align-content 当items在主轴换行时，items在侧轴的对齐方式
取值：
*flex-start*;
flex-end;
center;
space-between;
space-around;
*stretch*;
注意点：
stretch: 以行为单位进行拉伸, 拉伸的部分以空白填充, 保证拉伸之后所有的行加起来能够填满侧轴
默认情况下换行就是就是拉伸对齐
一定要注意: 在换行中的拉伸对齐是指, 所有行的高度总和要和伸缩容器的高度一样
所以会将多余的空间平分之后添加给每一行
7.order 伸缩项在主轴中排序
默认为0，值大的在后，值小的在前。
8.flex-grow 伸缩项的拉伸因子
在主轴上当items的没有填满容器时，可以设置宽度或高度按设定比列拉伸，使items填满容器。
注意点：
1. flex-grow默认值为：0，即不拉伸
2.本质上就是将主轴富余空间分为几份,按照设置的比例添加到各个items中
3.计算公式：
1.计算剩余的空间
伸缩容器宽度 - 所有伸缩项的宽度
400 - 300 = 100
2.计算每份剩余空间的宽度
剩余空间 / 需要的份数
100 / 6 = 16.66 //给items分配的flex-grow总和为6
3计算每个伸缩项最终的宽度
伸缩项的宽度 + 需要的份数 * 每份的宽度
9.flex-shrink 伸缩项的收缩因子
当所有伸缩项宽度的总和比伸缩容器宽度大的时, 我们可以通过flex-shrink让系统调整伸缩项的宽度,
以便于让所有伸缩项的宽度的总和等于伸缩容器的宽度。
注意点：
1.flex-shrink默认值为1，即不压缩。
2.本质上就是根据设置给各个item的收缩因子计算需要收缩的量最终使items刚好在充满容器主轴
3.计算公式：
1.计算溢出的宽度
伸缩容器的宽度 - 所有伸缩项的宽度总和
400 - 600 = -200
2.计算总权重
每个伸缩项需要的份数 * 每个伸缩项的宽度
1 * 200 + 2 * 200 + 3 * 200 = 1200
3.计算每个伸缩项需要压缩的宽度
溢出的宽度 * 需要的份数 * 每个伸缩项的宽度 / 总权重
-200 * 1 * 200 / 1200 = -33.33 //item1
-200 * 1 * 200 / 1200 = -33.33 //item2
-200 * 1 * 200 / 1200 = -33.33 //item3
10.flex-basis 伸缩项的专用宽度
注意点：
1.如果设置了flex-basis，那么伸缩项的width就会失效，
2.如果2者共存，其中一个值为auto,那么会采用具体的px值。
11.flex连写
1.格式
flex:flex-grow flex-shrink flex-basis;
2.注意点：
1.通常可以把flex-shrink，flex-basis省略掉，只写flex:1;就是让伸缩项在容器内等比扩充填满容器。
####圣杯布局
1.什么是圣杯布局？
要求三列布局，两边宽度固定，中间宽度自适应。
2.圣杯布局步骤：
1.搞一个容器，里面放置三个盒子,注意中间盒子放最上面
2.给2边的盒子固定宽度，中间盒子设置width:100%;
3.设置两边的盒子都左浮动
4.设置第一个盒子左右2边各有一个宽度等于下面2个盒子的padding
5.左边盒子margin-left:-100%,右边盒子margin-left:-自身宽度；
6.左右2个盒子开启相对定位，平移各自长度到左右侧即可。
注意：圣杯布局要给body设置一个最小宽度，否则超出最小宽度会变形
####双飞翼布局
1.什么是双飞翼布局？
同圣杯布局一样的需求
2.双飞翼布局的步骤：
1.搞一个容器，里面放置三个盒子,注意中间盒子放最上面
2.给2边的盒子固定宽度，中间盒子设置width:100%;
3.设置两边的盒子都左浮动
4.给中间盒子里面嵌套一个子盒子，然后给子盒子设置左右等于左右盒子的margin
5.左边盒子margin-left:-100%,右边盒子margin-left:-自身宽度；
----
#### transition 过渡
1.过渡三要素：
1.必须要有属性发生变化；
2.必须有变化的属性名称；
3.必须要有持续时间；
2.属性：
transition-property:css可动画属性； 多个属性时，用逗号隔开
transition-duration:s/ms;
transition-timing-function:*ease*/ease-in/ease-in-out/ease-out/linear/step[*start*,end];
transition-delay:s/ms; 多个时定义一个列表
3.连写：
transition: all/css可动画属性名 过渡时长 运动速度 延迟时长；
4.注意点：
1.和分开写一样, 如果想给多个属性添加过渡效果也是用逗号隔开即可
2.连写的时可以省略后面的两个参数,因为只要编写了前面的两个参数就已经满足了过渡的三要素
3.如果多个属性运动的速度,延迟的时间,持续时间都一样，那么可以简写为transition:all 0s;
4.哪个元素要执行过渡动画，那么过渡属性就加给谁。
5.编写过渡套路
1.不要管过渡, 先编写基本界面
1.修改我们认为需要修改的属性
1.再回过头去给被修改属性的那个元素添加过渡即可
----
#### transform2D 2D变形
1.transform:rotate(ndeg);
2.transform:translate(offsetX,offsetY);
3.transform:scale(x,y);
注意点:
只要父元素被拉伸了,子元素也会被拉伸
4.transform-origin(offsetX,offsetY);
1.取值：
x方位关键字 y方位关键字 center/top/bottom/left/right
x% y%;
xpx ypx;
2.注意点：
默认情况下所有的元素都是以自己的中心点作为参考来旋转的，我们可以通过形变中心点属性来修改它的参考点。
5.perspective 景深:
1.什么是景深？
近大远小
2.注意点
一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面
6.transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);
注意点：
1.如果需要进行多个转换, 那么用空格隔开
2.2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的
#### transform3D 3D变形
1.什么是2D和3D
2D就是一个平面, 只有宽度和高度, 没有厚度
3D就是一个立体, 有宽度和高度, 还有厚度
默认情况下所有的元素都是呈2D展现的
2.如何让某个元素呈3D展现
和透视一样, 想看到某个元素的3d效果, 只需要给他的父元素添加一个transform-style属性, 然后设置为preserve-3d即可
3.怎么画一个正方体？
准备一个ul>li*6,先平移再旋转。
4.怎么画一个长方体？
先画出来正方体，再给四个面transform：scale(offsetX,offsetY);
5.transform-style: preserve-3d; 能让2D元素呈现出3D效果。
6.拓展：
1. position:absolute; left:50%,transform:translateX(-50%);水平居中
2. position:absolute; top:50%, transform:translateY(-50%);垂直居中
#### animation 动画
1.animation-name:自定义动画名;
@keyframes 自定义动画名{
from{
css声明；
}
to{
css声明；
}
}
2.animation-duration:ms/s;
3.animation-timing-function:*ease*/ease-in/ease-out/ease-in-out/linear/step[*start*/end];
4.animation-iteration-count:infinite;
5.animation-direction:normal/alternate;
6.animation-fill-mode:*none*/forwards/backwards/both;
7.animation-play-state:*running*/paused;
8.动画模块连写格式
animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;
动画模块连写格式的简写
animation:动画名称 动画时长;
3.注意点：
1.过渡和动画之间的异同
不同点
过渡必须人为的触发才会执行动画
动画不需要人为的触发就可以执行动画
2.相同点
过渡和动画都是用来给元素添加动画的
过渡和动画都是系统新增的一些属性
过渡和动画都需要满足三要素才会有动画效果
3.动画中如果有和默认样式中同名的属性, 会覆盖默认样式中同名的属性
4.在编写动画的时候, 固定不变的值写在前面, 需要变化的值写在后面