发表于： 2019-09-02 18:48:05
1 899
今天完成的事情：
完成了任务十三，开始了任务十四之后发现基础的一些东西掌握的不够，重新回去看之前的深度思考，把缺少的基础补上
明天计划的事情：
接着看之前的基础知识，并且每个问题点写出自己demo加深记忆，准备js基础知识
遇到的问题：
昨天任务十三剩第一个页面的左侧隐藏列表的地方卡壳了，需要的效果是点击按钮让列表显示出来，刚开始的思路是
首先将input和label关联将图片有input的控件效果然后通过input的：checkbox选择器，尝试将按钮与列表关联起来，
后来发现我的按钮是右侧div的子级，列表的级数高于它，无法控制，所以把input单独拿出来让他和列表处于同级，然后
控制其样式的变化，这里我有两种方法做到显示隐藏：
1、使用浮动和display：none属性，利用浮动处于一行，同时控制右边的宽度变化来达到效果
2、使用display：none和flex，右边设置flex=1，自动填充剩余空间；
收获：
关于今天遇到的问题收获了伪类的用法效果
需要给某个元素设置hover 效果则必须在其父级或者同级设置，
若是不相邻但是有相同的父级采用~号连接
2、高度计算的一些问题
父元素的高度，默认被子元素撑开，如果box2（子）多高，box1（父）就多高。此时如果子元素设置浮动，则会导致其完全脱离文档流，子元素脱离文档流将无法撑开父元素， 导致父元素的高度丢失，这也就是高度塌陷问题。
父元素一旦高度塌陷，则它下边的元素会向上移动， 导致整个页面的布局混乱 。
浮动是BFC形成的一种条件，其他的BFC条件定位、inline-block、overflow（除visible）
float:left; 虽然可以撑开父元素 会导致父元素宽度丢失了而且使用这种方式导致下边的元素上移。
display:inlink-block;布局好了，但是宽度又没有了。
关于定位后高度的计算
<body>元素默认宽度有效，默认高度无效
默认定位（static）div的父级为body时候，高设置100%无效果，如果没有内容只设置边框背景都没效果
当<div>的定位方式为绝对定位或固定定位，即position属性值为absolute或fixed时，父元素为<body>时高设置100%，设置有效，默认为当前窗口的高度。
当元素absolute定位后，如果不写width, height，他们的值都默认为0；设置百分数他们会会继承自它相对于定位的那个祖先元素，它本身的margin，padding仍然是有效的
返回列表
评论