一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第2天,点击查看活动详情。
CSS三角、文本溢出、浮动和定位连用
这一个帖子我想分享一下CSS三角,文本溢出、浮动和定位连用的一些问题。前面两个是我在网上找的字节的一面题目里看到的(不清楚保不保熟😄),那两个题目分别是用CSS画一个扇形和多行超出显示省略号。前面那个题目我在前几篇的圆角边框提到过,因为涉及了圆角边框和CSS三角这个知识点,我打算分开来讲.....
CSS三角
简单的CSS三角其实非常简单,给一个盒子,然后宽高设置为0,给个边框。我们看看以下代码
<div></div>
div {
width: 0;
height: 0;
border-color: blue red yellow green;
border-style: solid;
border-width: 100px 100px 100px 100px;
margin: 100px auto;
}
当时学CSS三角的时候遇到的第一个问题就是,这个border-width
在这个过程中起了什么作用,它有哪些功能。
然后我就一直改变它的值,发现,这个border-width
其实是你对应位置的三角形的高,什么意思?看看下面这个图
这个图还是刚刚那个栗子,我们指定了border-width:100px 100px 100px 100px;
,意思就是上面这个三角形的高为100px,右边的三角形高是100px......以此类推
再放几张图,进行对比
border-width: 200px 100px 100px 100px;
的效果图
border-width: 200px 200px 100px 100px;
的效果图
border-width: 200px 200px 0 100px;
的效果图
border-width: 200px 200px 0 0;
的效果图
但是呢,这样就到极限了,至少得有两个边框是有宽的,如果存在3个0,整个就会消失
所以画CSS三角一般是把你想要的三角形设置出来后,给其他几个边框的颜色设置为透明
border-color: transparent transparent yellow transparent;
border-width: 200px 200px 200px 200px;
还是最开始的案例,我们给上右左的边框颜色设置为透明,看看效果
上面大概就是用CSS画一个扇形所需要的前置知识
接下来我们来画一个扇形
div {
width: 0;
height: 0;
border-color: blue red yellow green;
border-style: solid;
border-width: 200px 200px 200px 200px;
margin: 100px auto;
border-radius: 50%;
}
代码还是刚刚的代码,在此基础上增加了一个圆角边框,看看效果图
再给其他边框的颜色设置为透明
欸嘿!扇形就出来了😄
那么,又有个问题了,你设置圆角边框50%不就是拿宽为盒子宽的一半,高为盒子高的一半的四个椭圆去切盒子吗,但我的宽和高不是为0么。其实盒子宽高确实是0,但盒子的实际大小并不是0,border-radius
这个属性应该是按照盒子实际大小来的。
上面代码中,我每个三角形高都是200px,那么这就是一个400px * 400px的正方形盒子
然后我又遇到问题了,我每次给正方形盒子设置圆角边框50%的时候,确实是个圆,但是为啥超过50%之后就不会变了,这个问题我还没搞明白,希望有大哥指点指点
文本溢出
单行文本溢出
<div>我起了,一枪秒了,有啥好说的。</div>
div {
width: 150px;
height: 80px;
background-color: pink;
margin: 100px auto;
/* white-space: normal;这是默认情况,指如果文字溢出,则自动换行 */
/* 1. 首先设置文字溢出,强制不换行 */
white-space: nowrap;
/* 2.溢出的部分进行隐藏 */
overflow: hidden;
/* 3.将溢出的文字用省略号代替 */
text-overflow: ellipsis;
}
多行文本溢出
/* 多行文本溢出显示省略号代码如下: */
overflow: hidden;
text-overflow: ellipsis;
/* 把盒子模型转换成弹性伸缩盒子 */
display: -webkit-box;
/* 限制在一个块元素显示的文本行数
这里的3就是说,从第三行开始就可以显示省略号了 */
-webkit-line-clamp: 3;
/* 设置伸缩盒子中子元素的排列方式(这里是垂直居中) */
-webkit-box-orient: vertical;
其他解决方法比如用js的或者其他骚操作我就不多说了
定位和浮动连用
定位和浮动的连用是我在做一个小案例的时候发现的,当时就好奇它们为什么可以连用,或者说连用之后的效果,网上找了一圈之后总结如下:
当需要浮动的盒子里面的子盒子需要定位时
这时候这个父盒子需要添加相对定位(子绝父相)
👉但是相对定位是不会改变浮动的属性的👈
👉而如果绝对定位absolute和浮动一起设置,那么浮动的属性就会失效,只有absolute会有效!👈
div{float :left;position:relative}这样是可以的
div{float :left;position:absolute}不允许,绝对定位会使浮动失效
再来一道不知道什么年代的面试题
div宽度为100px,边框为1px,div1、div2为兄弟元素,
要求分别画出以下三种情况中二者的在页面中的表现:
a) .div1{position:absolute;float:left} .div2{position:absolute;float:right}
b) .div1{postition:relative;float:left} .div2{position:relative;float:right}
c) .div1{position:absolute;float:right} .div2{position:relative;float:left}
<div class="div1">1</div>
<div class="div2">2</div>
情况1
div {
width: 100px;
border: 1px solid blue;
}
.div1 {
position: absolute;
float: right;
}
.div2 {
position: relative;
float: right;
}
情况2
div {
width: 100px;
border: 1px solid blue;
}
.div1 {
position: relative;
float: left;
}
.div2 {
position: relative;
float: right;
}
情况3
div {
width: 100px;
border: 1px solid blue;
}
.div1 {
position: absolute;
float: left;
}
.div2 {
position: absolute;
float: right;
}
以上,有错误的地方还请各位爷提醒提醒,多多指教指教,小的我会虚心学习~