Hello小伙伴们大家好,这周事情有点多,没有及时更新,就请大家原谅兔妞吧,真的是作息紊乱,还心累,,,呜呜,,,苍天啊,大地啊,兔妞是多么的想更新啊。那么今天就来给大家带来新的题目啦!今天的题目主要集中在CSS上,曾经的我以为CSS是辣样简单,现在看来真的是大错特错,CSS其实是很神奇的。捂脸ing~
1)伪元素与伪类的区别是什么?
2)transform、transition、animate的区别是什么?
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!