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}

学习心得:

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

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1