补充点
行内块 div 用来布局
行内 span 不能设置宽高 一般是用来包裹你想要的内容 方便操作内容
盒子居中
image.png
一、移入效果
hover
给当前属性加上hover
鼠标移入.box2的内容 背景颜色 和文字颜色 都会
image.png
二、定位 position
位置：
top：距离上面的位置
bottom：距离下面的位置
left：距离左边的位置
right: 距离右边的位置
-
相对定位 relative 格式代码如下
image.png -
绝对定位 absolute
一般来使用就是子绝父相
image.png -
固定定位 fixed
相对于浏览器
固定在一个位置
image.png
三、flex布局 重点
1.前言
2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
2.何为Flex布局
”弹性布局”，用来为盒状模型提供最大的灵活性任何一个容器都可以指定为Flex布局。
3.使用flex
父盒子box 设置display: flex; 使box里面指定为 flex 布局
image.png
4.flex
设置子盒子为响应式
image.png
四、容器的属性
- justify-content 相对x轴
flex-start 默认
center 移动到父盒子中间
flex-end 移动到父盒子左边 - align-items 相对y轴
flex-start 移动到父盒子上方
center 移动到父盒子中间
flex-end 移动到父盒子下方
结合学习使用flex 进行练习
image.png
image.png
image.png
