10月21日

1、今日目标

（1）完整实现左右滑动页面（80%）

（2）（PC端）导航栏的显示

（3）深入学习盒子模型（实践操作）

（4）CSS知识细节巩固

2、左右页面滑动关键知识点

构想：使用div设计两个盒子，然后

 <style> input:checked+label+div{
            display:block;
        }
</style>

input选中时显示对应的div，这样就可以实现两个不同页面的显示

3、position

absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位(left\right\top\bottom)

fixed 生成绝对定位的元素，相对于浏览器窗口进行定位(left\right\top\bottom)。

relative 相对于其正常位置进行定位（left:20）

static 默认值（忽略 top, bottom, left, right 或者 z-index 声明）

inherit 从父元素中继承

4、弹性盒子布局  Flexbox

它被专门设计出来用于创建横向或是纵向的一维页面布局。

要使用flexbox，你只需要在想要进行flex布局的父元素上应用display: flex ，所有直接子元素都将会按照flex进行布局。（设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效）

5、网格布局 

用于横向和纵向布局，Grid布局则被设计用于同时在两个维度上把元素按行和列排列整齐。

Grid布局  采用grid布局的元素，被称为grid容器(grid container)，简称“容器”。

其所有直接子元素（直接子元素的子元素不包含在内）自动成为容器成员，称为grid项目(grid item)，简称“项目”

6、浮动布局

把一个元素“浮动”(float)起来，会改变该元素本身和在正常布局流（normal flow）中跟随它的其他元素的行为。

这一元素会浮动到左侧或右侧，并且从正常布局流(normal flow)中移除，这时候其他的周围内容就会在这个被设置浮动(float)的元素周围环绕。（left / lright / inherit / none)

7、ID选择器与class类选择器的区别

ID选择器：要给添加样式标签添加一个id属性

特点：id属性的值是唯一的

css中id选择器以#号来定义

class类选择器

类选择器：给要添加样式得元素添加一个属性叫class

在css中类选择器以"."开头

class和id选择器得区别：class选择器的值不是唯一的，可以在多个标签共用一个class

8、overflow:hidden;

隐藏溢出，清除浮动（解决子类边距过大而覆盖父类某些属性）

9、background-attachment:fixed

设置背景图像是否固定或随页面的其他部分滚动而滚动

scroll 背景图片随页面的滚动而滚动
fixed 背景图片不会随着页面的滚动而滚动。
local 背景图片会随着元素内容的滚动而滚动。
initial 默认值。
inherit 继承

今日总结：

1、今天感觉被骗了，我昨晚睡觉的时候突发奇想去搜索那个实现页面切换的视频，感觉我就快成功了，然后我学了两个视频，把它的代码都写下来操作，然后就都没有我想要有的效果，就离谱，我还以为是我自己粗心，写错代码了，然后我去核对了好几遍，结果就是不一样，根本没有他演示的时候的那种效果，不知道哪里出了问题。

2、然后我还有一个问题就是ID选择器不是只能设置一个属性吗？为什么它在.css文件中可以设置长度、宽度、颜色啥的，还是说假设ID选择器只指向一个图片或者一个超链接的时候，在.css文件中就可以设置图片的大小、位置或超链接的位置，这样来理解。

3、我感觉今天没发挥好，小老弟 你咋肥事儿呀，我没有最大化利用时间，然后没有看那个导航栏的设计，明天一定要做的更好！！！高效利用时间，也可以多运用零碎时间去随便看看那种比较杂的知识点。