前端面试宝典（三）
Hello小伙伴们大家好，这周事情有点多，没有及时更新，就请大家原谅兔妞吧，真的是作息紊乱，还心累，，，呜呜，，，苍天啊，大地啊，兔妞是多么的想更新啊。那么今天就来给大家带来新的题目啦！今天的题目主要集中在CSS上，曾经的我以为CSS是辣样简单，现在看来真的是大错特错，CSS其实是很神奇的。捂脸ing～
1）伪元素与伪类的区别是什么？
- 伪元素：HTML中并不存在的元素。用于将特殊的效果添加到某些选择器。由：：开头。原来DOM中不存在，伪元素创建了一个容器，容器不包括在DOM结构中，但是有内容，可以通过content添加。
- 伪类：用于向某些选择器添加特殊的效果。伪类存在的意义是为了通过选择器找到那些不存在于DOM树中的信息以及不能被常规CSS选择器获取到的信息。
2）transform、transition、animate的区别是什么？
- transform是元素的静态样式，常配合后两种使用
- 触发条件不同，transition通常和hover等事件配合使用，由事件触发。Animation则立即播放
- animation可以设置循环次数
- animation可以设置每一帧的样式和时间。Transition只能设定头尾。
- 与javascript的交互，animation与js的交互不是很密切。Transition和js的结合更强大。Js设定要变化的样式，transition负责动画效果
3）position、display、overflow、float特性叠加后会怎样
4）在日常工作中，我们常常会遇到固定显示多少字，超过显示省略号，怎么实现？
（1）单行
.text-single{
width: 100px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}（2）多行
.text-multiple{
width: 100px;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;//设置弹性伸缩盒子模型
-webkit-line-clamp: 2;//设置行数
-webkit-box-orient: vertical;//设置弹性伸缩盒子模型元素排列方式
}5）如何通过CSS实现一个三角形？
.triangle{
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
}6） 三栏、二栏布局。一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化（比如浏览器为500，右边div为400，浏览器为900，右边div为800），请写出大概的css代码。
（1）
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>*{
margin: 0;
padding: 0;
}
.box{
height: 100px;
display: flex;
flex-direction: row;
align-items: center;
border: 1px solid #cccccc;
}
.left{
flex-basis: 100px;
-webkit-flex-basis: 100px;
background-color: red;
height: 100%;
}
.right{
background-color: green;
flex-grow: 1;
height: 100%;
}（2）
<div id="left">Left</div>
<div id="right">right</div>*{
margin: 0;
padding: 0;
}
#left{
float: left;
width: 100px;
height: 100px;
background-color: green;
text-align: center;
line-height: 100px;
color: #fff;
}
#right{
background-color: orange;
margin-left: 100px;
text-align: center;
height: 100px;
line-height: 100px;
}好啦，今天的更新就到这里啦，喜欢兔妞文章的小伙伴们请在看+关注哦～～兔妞去撸兔兔咯！Bye！
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-08-11，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读