HTML&CSS

/* 取消标签默认样式 */ *{ margin: 0; padding: 0; list-style: non

``` 我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div 我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div 我是一个div我是一

* 1.只给其中一个标签设置外边距 */ /* 外边距合并规则：如果两个都是正数 会取最大的外边距进行设置 如果两个都是负数：取绝对值最大的 高

/* 父子级外边距合并 1.两者都是正数 取值大的 2.一正一负 进行相加

margin-top: 20px; /* 开启bfc属性 */ /* display: inline-block; */ /

border: 10px solid red; /* 开启bfc overflow hidden auto */ overflow: hidden;

.cube1{ width: 100px; height: 100px; background-color: red;

``` 左侧定宽 右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应 右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧 自适应右侧自适应右侧自适应右侧自适应右侧自适

<div class="left">左侧定宽</div> <div class="right">右侧定宽</div> <div class="center">中间自适应</div>

/* 相对定位 position：relative 文档流脱不脱离 参照点 特性：不脱离文档流 原先位置保留 相对于自身在浏览器中默认位置进行定位

/* 绝对定位 position：absolute 特性1：脱离文档流 原先位置不保留 飘在文档流上方 特性2：无论有没有父元素/祖先元素 相对于浏览

/* 1.1水平垂直居中 mragin 给父元素设置border属性 */ /* border: 1px solid red; */ /* 2.1通过

固定定位 position：fixed 特性：1.脱离文档流 原先位置不保留 飘在文档流上方 相对于浏览器的视口区域进行定位

/* 粘滞定位 relative + fixed 距离上方50px之前是相对定位 50px之后是固定定位 */ positio

兄弟元素 同时开启定位方案 兄弟元素堆叠顺序 谁的z-index高 谁的优先级高//

父子元素开启定位流 1.如果只给父元素设置z-index 不给子元素设置 无论父元素z-index多大 子优先级最高

开启弹性盒布局 弹性元素沿着主轴方向排列 默认主轴就是水平轴 */ display: flex; /* 更改主轴排列方向 主轴默认值row水平方向 */

父容器的宽度不足以放下所有一个弹性元素时 不会进行换行显示 而是进行等比例压缩 */ /* 设置换行显示 默认是不换行nowrap wrap换行 wrap-reverse换行

更改主轴弹性元素对齐方式 默认值flex-start 主轴起点对齐 */ /* flex-end 主轴终点对齐 center 中间对齐 */ /* j

更改交叉轴对齐方式 align-items */ /* 默认值felx-start 上对齐 flex-end 右对齐 cent