补充点

行内块 div 用来布局
行内 span 不能设置宽高 一般是用来包裹你想要的内容 方便操作内容
盒子居中

image.png

一、移入效果

hover
给当前属性加上hover
鼠标移入.box2的内容 背景颜色 和文字颜色 都会

image.png

二、定位 position

位置：
top：距离上面的位置
bottom：距离下面的位置
left：距离左边的位置
right: 距离右边的位置

1. 相对定位 relative 格式代码如下

   
   
   image.png

2. 绝对定位 absolute
   一般来使用就是子绝父相

   
   
   image.png

3. 固定定位 fixed
   相对于浏览器
   固定在一个位置

   
   
   image.png

三、flex布局 重点

1.前言
2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
2.何为Flex布局
”弹性布局”，用来为盒状模型提供最大的灵活性任何一个容器都可以指定为Flex布局。
3.使用flex
父盒子box 设置display: flex; 使box里面指定为 flex 布局

image.png

4.flex
设置子盒子为响应式

image.png

四、容器的属性

1. justify-content 相对x轴
   flex-start 默认
   center 移动到父盒子中间
   flex-end 移动到父盒子左边
2. align-items 相对y轴
   flex-start 移动到父盒子上方
   center 移动到父盒子中间
   flex-end 移动到父盒子下方

结合学习使用flex 进行练习

image.png

image.png

image.png