web前端开发面试题(附答案)-3

Posted 2022-12-04 meijiang

1、用纯css创建一个三角形的原理：

.demo
width:0;
height: 0;
border: 5px solid transparent;
border-left-color: red;

2、为什么要初始化css样式

不同的浏览器堆标签的默认值是不同的，如果没有对css初始化往往会出现浏览器之间的页面显示差异。
不建议使用*padding：0；margin：0；

3、解释为何要清除浮动？清除浮动的方式

1）、给父级div定义高度
2）、常规使用class
.clearfix::before, .clearfix::after
content:"";
display:table;

.clearfix::after
clear:both;

.clearfix
*zoom:1; //ie浏览器的专有属性，设置或者检索对象的缩放比例

3）、sass编译的时候，浮动元素的父级div定义伪类:after
&::after, &::before
content: "";
visibility: hidden;
display:block; //使生成的元素以块级元素显示，占满剩余空间
height:0;
clear:both; //避免生成内容破坏原有布局高度

4、display:none和visiblity：hidden的区别

display：none会让元素完全从渲染树消失，渲染的时候不占据任何空间；visibility：hidden不会让元素从渲染树消失，渲染时元素继续占据空间，内容不可见。