CSS三角、文本溢出、浮动和定位连用

656 阅读5分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 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;
        }

image.png
当时学CSS三角的时候遇到的第一个问题就是,这个border-width在这个过程中起了什么作用,它有哪些功能。 然后我就一直改变它的值,发现,这个border-width其实是你对应位置的三角形的高,什么意思?看看下面这个图

image.png
这个图还是刚刚那个栗子,我们指定了border-width:100px 100px 100px 100px;,意思就是上面这个三角形的高为100px,右边的三角形高是100px......以此类推
再放几张图,进行对比
border-width: 200px 100px 100px 100px;的效果图

image.png
border-width: 200px 200px 100px 100px;的效果图

image.png

border-width: 200px 200px 0 100px;的效果图

image.png

border-width: 200px 200px 0 0;的效果图

image.png

但是呢,这样就到极限了,至少得有两个边框是有宽的,如果存在3个0,整个就会消失
所以画CSS三角一般是把你想要的三角形设置出来后,给其他几个边框的颜色设置为透明
border-color: transparent transparent yellow transparent;
border-width: 200px 200px 200px 200px;
还是最开始的案例,我们给上右左的边框颜色设置为透明,看看效果

image.png


上面大概就是用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%;
        }

代码还是刚刚的代码,在此基础上增加了一个圆角边框,看看效果图

image.png
再给其他边框的颜色设置为透明

image.png
欸嘿!扇形就出来了😄
那么,又有个问题了,你设置圆角边框50%不就是拿宽为盒子宽的一半,高为盒子高的一半的四个椭圆去切盒子吗,但我的宽和高不是为0么。其实盒子宽高确实是0,但盒子的实际大小并不是0,border-radius这个属性应该是按照盒子实际大小来的。
上面代码中,我每个三角形高都是200px,那么这就是一个400px * 400px的正方形盒子

image.png
然后我又遇到问题了,我每次给正方形盒子设置圆角边框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;
        }

image.png

多行文本溢出

            /* 多行文本溢出显示省略号代码如下: */
            overflow: hidden;
            text-overflow: ellipsis;

            /* 把盒子模型转换成弹性伸缩盒子 */
            display: -webkit-box;

            /* 限制在一个块元素显示的文本行数
            这里的3就是说,从第三行开始就可以显示省略号了 */
            -webkit-line-clamp: 3;

            /* 设置伸缩盒子中子元素的排列方式(这里是垂直居中) */
            -webkit-box-orient: vertical;

其他解决方法比如用js的或者其他骚操作我就不多说了


定位和浮动连用

定位和浮动的连用是我在做一个小案例的时候发现的,当时就好奇它们为什么可以连用,或者说连用之后的效果,网上找了一圈之后总结如下:
当需要浮动的盒子里面的子盒子需要定位时
这时候这个父盒子需要添加相对定位(子绝父相)
👉但是相对定位是不会改变浮动的属性的👈
👉而如果绝对定位absolute和浮动一起设置,那么浮动的属性就会失效,只有absolute会有效!👈

                divfloat :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;
        }

image.png

情况2 
        div {
            width: 100px;
            border: 1px solid blue;
        }
        
        .div1 {
            position: relative;
            float: left;
        }

        .div2 {
            position: relative;
            float: right;
        }

image.png

情况3
        div {
            width: 100px;
            border: 1px solid blue;
        }
        
        .div1 {
            position: absolute;
            float: left;
        }

        .div2 {
            position: absolute;
            float: right;
        }

image.png


以上,有错误的地方还请各位爷提醒提醒,多多指教指教,小的我会虚心学习~