由于前端知识点太多就很复杂,面试的时候有很多面试官又经常问一些偏基础的技术点,故整理此文章来帮助大家更高的应对面试,也以备自己不时之需。
- div垂直水平居中的方法
1. .parnet { position: relative; width: 100%; height: 200px; background: red; } .child { position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; margin-left: -50%; margin-top: -50%; } 2. .parent { width: 100%; height: 2rem; display: flex; align-items: center; justify-content: center; background-color: yellow; } .child { width: 1.5rem; height: 1.5rem; background-color: green; } 3. .parnet { position: relative; width: 100%; height: 200px; background: red; } .child { position: absolute; width: 100px; height: 100px; left: 0; top: 0; bottom: 0; right: 0; margin: auto; } 4..parnet { position: relative; width: 100%; height: 200px; background: red; } .child { position: absolute; transform: translate(-50%, -50%); left: -50%; top: -50%; } 5. .parnet { display: table-cell; vertical-align: middle; text-align: center; } .child { width: 100px; height: 100px; }
- 清除浮动的几种方法:
-
a.父元素定义height
-
原理:父元素手动定义高度之后就解决了父元素无法自动获取高度的问题
-
优点:简单、代码少、容易掌握
-
缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父元素的高度不一致,会产生问题
-
b. 父元素设置overflow: hidden
-
原理:父元素必须设置width属性或者zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检测出浮动区域的高度
-
优点:简单、代码少、浏览器兼容性很好
-
c. 给父元素在定义一个class类名
-
.parent:after {content: '.';height:0;display:block;clear:both;}
-
该样式在父元素的最后添加了一个:after伪元素,可以清除伪元素的浮动,达到撑起父元素高度的目的。注意到该伪元素的display值为block,即,它是一个不可见的块级元素(有的地方也用table,因为table也是一个块级元素)