前端开发-CSS踩坑&经验集锦

文章目录

  • 1、flex两栏布局,文字溢出
    • display属性
    • 选择器
    • 2、css中的百分比

1、flex两栏布局,文字溢出

flex布局子元素宽度超出父元素问题
在flex两栏布局中,往往给定父元素宽度后,内部子元素可以通过flex属性来设置自适应。

正常情况下的元素宽度,如果设置有具体的值,那就是设置的值;
如果没有设置,那就是该元素内容区占据的宽度。

使用flex布局有一个很常见的一个误区:给子元素设置了flex属性,很自然的就认为,它会按比例分配父元素的宽度。其实并非如此。flex:1 等于flex-grow、flex-shrink和flex-basis的缩写。
前端开发-CSS踩坑&经验集锦_第1张图片
可以看出,flex:1并不是决定子元素宽度的因素,它只是规定了,如果父元素有多余空间,以怎样的比例去分配剩余空间,并不会对子元素原本就占据的空间做处理。所以,当元素原本的宽度就超过父元素宽度时,子元素内容就会超出。


display属性

display:block // Img居中时若不设置该属性无法使用margin:0, auto来居中图片。
display:inline-flex // 待更新

选择器

// 让ul最后一个li元素无边框。
.ul li {    
    border: 1px solid red;
}
.ul li:last-child {    
    border: none;  
}

// 让ul最后一个li元素无边框。
.ul li:not(:last-child) {    
    border: 1px solid red;
}

// 让最后一个元素没有伪类(这里利用伪类来做1px细线)
.box {
    position:relative;
    width:200px;
    height:200px;
    background-color:pink;
    
    &:not(:last-child):after{
        position: absolute;
        content: '';
        display: block;
        border-bottom: .5PX solid #e0e0e0;
        transform-origin: 50% 50%;
        transform: scaleY(.5);
    }
}

2、css中的百分比

许多css属性可以取百分比值,用于根据父对象来确定大小。

你可能感兴趣的:(css,css,前端)