前端面试试题总结 css

前端面试试题总结

css

1.垂直塌陷的问题

两个div垂直排列（不管是兄弟关系还是父子关系）会有一个的外边距被吃掉，这种现象就是垂直塌陷。
解决办法：
1>.给父盒子设置上边框
2>.给父盒子设置上内边距
2>.给父盒子设置 overflow:hiden

2.em和rem 的区别

em和rem 都是快速、方便能够控制元素整体放大缩小单位
1.em是根据使用他的元素字体大小来做转换
2.rem是根据html字体大小做转换的

3.介绍一下css模型 盒子模型的存在是为了什么

盒子模型（box model）包含了元素内容 边框 内边距 外边距等元素
css3中用box-sizing的属性解析盒子 盒子模型就是content-box
还有一种怪异盒子模型为border-box 为了在设置padding和border 的值的时候不会被撑开
css盒子模型是在网页设计中经常会用到的一种思维模型，是css的基石，主要规定了如何显示元素之间的关系的

4.css引入到页面的几种方式 知道import引用吗 和link 有什么不同

1>内联的方式 在该行加入style="
2>内嵌的方式 在head里面加入style 在里面写样式
3>外联 link
4>导入 import url=’’

外联和导入的区别
1.从属关系的区别 import是css的语法 它是加入样式表的作用 link本身就是Htm的标签 不仅加载css 还可以设置Rss和rel等属性
2.兼容性 import需要iE5以上浏览器才可以兼容 link 不存在兼容问题
3.操作Dom树 js可以通过操作dom树 引入link改变样式 因为Dom是基于文档的无法使用import加载样式
4.加载顺序 link是css被引入的同时被加载 import是页面加载完成后被加载
5.权重关系 link权重高于impot(有争议)

5.文字溢出怎么解决

单行文字溢出
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
多行文本溢出隐藏：
word-break: break-all;
display: -webkit-box;
-webkit-box-orient: vertical;
word-break: break-all;
white-space: normal;
-webkit-line-clamp: 2;
https://www.cnblogs.com/lxz-blogs/p/12932222.html

6.如何垂直居中一个浮动的元素

1.定位
先移到父元素高度和宽度的一半
再移动自身高度和宽度的一半
已知自身长宽 再挪自身长宽的一半的margin负数实现
位置元素大小 用margin:auto

2.弹性布局
display:flex;
aligh-item：center;
justify-content:center;

7.less和sass是什么

less 和sass都是属于css的预处理器 是根据css的预处理器定义的一个新的语言
解决问题：因为css不够强大 没有嵌套功能 选择器重复冗余 没有变量和合理的样式复用机制 导致难以维护
优点：提供css缺失的样式层的复用性，减少冗长的代码，大大的提高编辑效率
缺点：造成后代选择器的滥用
这两个的区别：
1>less安装环境比 sass更简单一些
2>less的处理比sass更加简单一点
3>less是基于客户端 sass是基于服务端的 所以后者会解析的慢一点
4>sass比less更加的强大一点
5>关于变量的less使用@ sass用的$

8.数组字符串的转换

数组转换成字符串：
join（）
toString()
字符串转换成数组
split()
ES6里面得扩展运算符[…arr]