08-flex布局

1.定位布局

- 定位流分类

1.1.静态定位

1.2.相对定位

1.3.绝对定位

1.4.固定定位

1.5.粘滞定位

1.6.z-index

- 1.1.静态定位（ Static positioning）

​ 是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中。

​ position: static;

- 1.2.什么是相对定位?（ Relative positioning ）

​ 相对定位就是相对于自己以前在标准流中的位置来移动
​ position: relative;
​ 使用top,right,bottom,left来控制

- 相对定位注意点

• 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
• 在相对定位中同一个方向上的定位属性只能使用一个
• 由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
• 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位 的元素设置margin/padding等属性的时会影响到标准流的布局

- 相对定位应用场景

• 用于对元素进行微调
• 配合后面学习的绝对定位来使用

- 1.3.什么是绝对定位?（Absolute positioning）

​ 绝对定位就是相对于body来定位
​ position: absolute;

- 绝对定位参考点

​ 1.规律
​ 默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点

​ 2.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流 的那个祖先元素作为参考点。
​ 2.1只要是这个绝对定位元素的祖先元素都可以
​ 2.2指的定位流是指绝对定位/相对定位/固定定位
​ 2.3定位流中只有静态定位不行

​ 3.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点。

-绝对定位注意点

​ 1.绝对定位的元素是脱离标准流的
​ 2.绝对定位的元素是不区分块级元素/行内元素/行内块级元素
​ 3.如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点
​ 4.一个绝对定位的元素会忽略祖先元素的padding

- 绝对定位-子绝父相

​ 相对定位弊端:
​ 相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面
​ 绝对定位弊端:
​ 默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化
​ 子绝父相
​ 子元素用绝对定位, 父元素用相对定位

-绝对定位水平居中

​ 只需要设置绝对定位元素的left:50%;
​ 然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;

- 1.4.固定定位（Fixed positioning）

​ 1.什么是固定定位?
​ position: fixed;
​ 固定定位和前面学习的背景关联方式很像, 背景定位可以让背景图片不随着滚动条的滚动而滚动, 而固定 定位可以让某个盒子不随着滚动条的滚动而滚动。

​ 注意点:
​ 1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间
2.固定定位和绝对定位一样不区分行内/块级/行内块级

- 1.5.粘滞定位（ Sticky positioning ）

​ position: sticky;

​ 结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。

​ 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

​ 设置了position: sticky的元素并不脱离文档流，仍然保留元素原本在文档流中的位置。

​ 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。

​ 亦即如果设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上

​ 移动（此时相当于fixed定位）。

​ 设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可

使用条件：

​ 父元素不能overflow:hidden或者overflow:auto属性。

​ 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位

​ 父元素的高度不能低于sticky元素的高度

​ sticky元素仅在其父元素内生效

- 1.6.z-index

​ 1.什么是z-index属性?
​ 默认情况下所有的元素都有一个默认的z-index属性, 取值是0.
​ z-index属性的作用是专门用于控制定位流元素的覆盖关系的

​ 2.默认情况下定位流的元素会盖住标准流的元素
​ 3.默认情况下定位流的元素后面编写的会盖住前面编写的
​ 4.如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面
​ 注意点:
​ 1.从父现象
​ 1.1如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上 面。
​ 1.2如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效, 也就是说 谁的父元素的z-index属性比较大谁就会显示在上面。

1.盒子背景样式 background-color 背景颜色 background-image 背景图片 background-repeat 设置背景图片平铺方式 background-size 设置背景图片尺寸大小
background-position 设置背景图片位置 bgckground-attachment 设置背景图片关联方式
简写background:color image repeat attachment position;
2.CSS布局机制 浮动：可以让块级元素水平排版 特性：脱离文档流，飘在文档流上方，原先位置不保留 高度塌陷： 父元素高度由子元素撑起，给子元素设置浮动，父元素发生高度塌陷 解决方案：
1.给父元素设置高度
2.给父元素清除浮动 使用伪元素清除浮动
::after{
display:block;
content:“”;
clear:both;
}
3.在父元素最后设置一个空的一个标签 给空标签清浮动 外边距合并：
1.兄弟元素外边距合并
原因：一个兄弟设置上外边距，另一个兄弟设置了下外边距
解决：1.只给其中一个兄弟元素设置外边距
2.给下方兄弟元素开启BFC 设置一个display:inline-block
3.给其中一个兄弟元素设置父元素 给父元素开启BFC
3.父子元素外边距合并
原因：父子元素同时设置了同一方向外边距
解决：1.给父元素设置内边距，不给子元素设置外边距
2.给父元素设置一个border属性
3.给父元素开启BFC overflow:hidden BFC(Block Formatting Context)块级格式化上下文 ************ 相当于是元素的一种属性，有了这种属性，容器就成为独立的渲染区域， 容器内的元素不会影响容器外的元素
1.触发BFC
1.html
2.float不为none
3.position为absolute和fixed
4.display:inline-block
5.overflow不为visible auto hidden
2.作用：
1.避免外边距重叠
2.清除浮动(给父元素清除浮动、给兄弟元素清(会改变兄弟元素位置))
4.两列布局(左侧定宽右侧自适应)
5.三列布局（左右定宽 中间自适应） CSS布局机制 定位position 1.脱不脱离文档流 2.参照点定位
1.静态定位 默认所有元素在浏览器都是静态定位
position:static
2.相对定位 position:relative
特点：1.不脱离文档流 2.参照自身在浏览器位置定位
3.绝对定位 position:absolute
特点:1.脱离文档流 原先位置不保留 飘在文档流上方
2.无论有没有父元素或者祖先元素 参照浏览器视口区域定位
3.给父元素或者祖先元素设置定位 参照父元素或者祖先元素定位
4.固定定位 position:fixed
特点：1.脱离文档流 原先位置不保留 飘在文档流上方
2.参照浏览器视口区域定位
5.粘滞定位 position:sticky
特点：1.不脱离文档流
2.没有达到指定阈值之前是相对定位 达到阈值后是固定定位 z-index 更改元素堆叠顺序
兄弟元素同时开启定位流 谁的z-index较大 谁的优先级高
父子元素同时开启定位流：
1.如果两个同时设置 无论父元素z-index值多大 子元素优先级高
2.只给父元素设置 无论z-index值多大 子元素优先级高
3.只给子元素设置 同时z-index<0 父元素优先级高
CSS水平垂直居中方案：
1.通过margin挤压 给子元素设置margin 左右margin=父width-子width/2
上下margin=父height-子height/2
2.通过padding挤压 给父元素设置 给父元素设置border-box
3.子绝父相 配合属性设置为0 top left bottom right 全部为0 margin:auto
4.子绝父相 top:50% left:50% margin-left:-width/2 margin-top:-height/2
代码版本控制工具 gitee 码云 个人使用：
1.初始化本地git仓库 (首次)
git init
2.新建远程仓库 (首次)
全局配置用户名和邮箱(只需要配置一次)
git config --global user.name “”
git config --global user.email “@qq.com”
3.将本地git仓库和远程仓库进行绑定(首次)
git remote add origin xxx.git
查看绑定远程仓库 git remote -v
4.git add ./git add * 跟踪文件有无修改
5.git status 查看提交状态
6.git commit -m ‘[xxxxxx]’ 将暂存区文件提交到本地仓库
7.git push origin master 将文件提交远程仓库 后续使用 git add . 提交文件到暂存区 git commit -m ‘[xxx]’ 将暂存区文件提交到本地仓库 git push origin master 将文件提交到远程仓库
邀请大家加入远程仓库
1.克隆我的远程仓库
git clone xxxx.git
2.上传到远程仓库