20200817+袁鑫

知识总结:

css 初始化{

​ margin:0；

​ padding:0;

}

元素水平垂直居中:

​ 1）position定位之后 top和left各50%然后再给margin-left和margn-top负的盒子一般的高度和宽度的值 弊端：必须知道容器的高和宽

​ 2）position定位之后 top和left各50%然后用transfrom:translate(-50%,-50%)；弊端：兼容性不好，只支持ie9+

​ 3) position定位之后 top、left、right、bottom的值都为0然后再给margin：auto；

​ 4）换成行内块，然后text-align:center; line-height等于容器的高度；弊端：有局限性，只在一些情况下可用。

​ position:

高度坍塌：如果父元素没有高度，全靠内容撑开的，那么当元素浮动以后，会发射光高度坍塌 浮动的元素的在页面中 是不占据位置的

​ 解决方案：
​ 1）父元素设置高度，弊端：不是每次都能明确知道具体高度
​ 2）父元素也设置浮动 弊端：会影响父元素后续元素
​ 3）为父元素增加overflow：hidden 弊端：如果有内容要溢出显示（弹出菜单），也会被同一隐藏，
​ 4）父元素设置 display:block 弊端：盒模型属性已经改变 会造成其他问题。
​ 5）在最后加一个没有宽高的div 添加 clear:both;属性
​ 6）使用伪元素生成 after

    块级元素里面可以放行内元素和块级元素，行内元素里面尽可能不放块级元素

opacity=0与visibility=hidden以及display=none的区别

​ opacity=0,该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区 域，也能触发点击事件
​ visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件。
​ display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。
​ float用于网页布局
​ flex多用于移动端布局

心得：

今天的学习状态不是很好，一直有打瞌睡的倾向，特别是下午的时候，可能中午没怎么休息好，然后下午第一节课都没怎么听进去，后面精神了些才自己补上来了，几次三番都想站起来,明天如果感觉还是要打瞌睡的话就一定站旁边听课!另外我还发现一个问题就是我每次任务完成之后有一点不知道怎么再下手学习，有一点无头苍蝇的模样。