web期末笔记3

一、浮动float知识点

1. float:left实现元素横向排列

2. 浮动缺陷：子元素脱离标准流，父盒子高度塌陷

3. 四种清除浮动方法
   ①父盒子添加overflow:hidden
   ②末尾添加空div，设置clear:both
   ③clearfix伪类清除浮动（企业开发最优）
   ④给父盒子设置固定高度

二、弹性盒子Flex（重点大题）

1. 父容器属性（写在外层盒子）
   display:flex开启弹性布局
   justify-content：水平对齐；align-items：垂直对齐
   flex-wrap:wrap：空间不足自动换行

2. 子元素属性
   flex:1；平分父容器剩余宽度

3. 万能居中代码
   .box{
   display:flex;
   justify-content:center;
   align-items:center;
   }
   三、导航栏实操制作

4. 结构：ul > li > a 语义化列表结构

5. 清除默认样式
   list-style:none去除列表圆点；text-decoration:none去除链接下划线

6. 使用flex横向排列导航项

7. a:hover鼠标悬浮变色；a设置display:block实现整行点击