20200817_陈宇_

学习总结：

​ 面试题：如果父元素没有高度，全是靠内容撑开的，那么当元素浮动以后，会发生高度坍塌，浮动的元素在页面中是不占据位置的
​ 块级元素里面可以有块级元素和行内元素，但是行内元素里面尽可能不要有块级元素
​ 隐藏：opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的；
​ visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但不会触发该元素已经绑定的事件
​ display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样

​ 隐藏后占据空间：visibility:hidden; opacity:0;

​ 影藏后不占据空间：display:none; input[type="hidden"]

​ float：多用于网页布局 属于css3的新特性
​ flex：多用于移动端布局

​ 相对定位不脱离文档流 relative多用于充当绝对定位的已定位祖先元素或自身元素位置的微调

​ 绝对定位会脱离文档流 绝对定位的元素都将变成块级元素

​ 固定定位：脱离文档流，不占据页面空间，会变为块级元素，将元素固定在页面某个位置

​ float：1：元素在页面不占空间；2：后续元素上前补位；3：元素不设置宽度，脱离文档流后，宽度以内容为准；4：元素脱离文档流，变为块级元素

高度坍塌问题：如果没有设置高的块级元素，内部的所有子元素都浮动，这个块级元素认为自己内部没有元素，所以就没有高了，这种现象叫做高度坍塌

    解决高度坍塌问题的方法：1. 父元素设置高度，弊端：不是每次都能明确知道具体高度；2. 父元素设置浮动，弊端：会影响父元素后续元素；3. 为父元素设置overflow属性，弊端：如果有内容要溢出显示(弹出菜单)，也会被一同隐藏,，取值：hidden/auto；4. 父元素设置display:table，弊端：盒模型属性已经改变，会造成其他问题；5. 在父元素中追加一个空的，没有宽高的div，设置clear：both；6. 使用内容生成的方式清除浮动（.clear:after{
                                            content:"";
                                            display:block;
                                            clear:both;

​ }）

​ 元素堆叠顺序：只有已定位的元素，才有丢叠顺序 默认顺序是0

​ 浮动和定位不是体系，不能比较，浮动永远只在一层，不能设置，而定位可以设置堆叠顺序

​ opacity，元素内部只要跟颜色相关的样式，都会变透明 rgba，只会改变被设置颜色的透明度

​ 元素垂直居中的方法：1.先定位，top：50%； left：50%； transform：translate（-50%，-50%）

​ 2.行内块元素：text-align：center； line-height：等于容器高度

​ 3.先定位，top：50%； left：50%； margin-left：-50%容器的宽度 margin-top：-50%容器的高度

​ 4.先定位：top，left，bottom，right四个方向设置为0， margin：auto

​ css初始化：*{margin：0；padding：0} ul{list-style-type：none}

学习心得：

​ 通过今天的练习，发现自己很多基础还是不够扎实，经常会遇到一些简单问题会想很久而无法解决，并且有很多布局还不是很了解它的内部结构，弹性布局和浮动布局相较前面的内容来说我感觉还是比较难一些，希望通过练习能够很快掌握它们的原理和用法。