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

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

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

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

使用flex布局有一个很常见的一个误区：给子元素设置了flex属性，很自然的就认为，它会按比例分配父元素的宽度。其实并非如此。flex：1 等于flex-grow、flex-shrink和flex-basis的缩写。

可以看出，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属性可以取百分比值，用于根据父对象来确定大小。