css知识点总结

1、shape-outside的神奇

div{
    width:300px;
    height:300px;
    shape-outside: circle();
    float: left;
}

不要以为是方的实际占位内容是个圆圈。

2、display:flow-root;消除浮动影响

<div class="box">
    <div class="image"></div>
    <div class="text"></div>
</div>

<style>
.box{
    display:flow-root;
}
.image{
    float:left;
}
.text{
    display:flow-root;
}
</style>

内容部分也可以设置display:flow-root;看一下效果

3、flex布局下的margin:auto神奇用法

<div class="box">
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
</div>

<style>
.box{
    display:flex;
}
.text{
    margin:auto;
    20px;
    height:20px;
}
</style>

每个模块会自动均分

4、并不是给元素设置display:block就会自动填充父元素宽度。input就是个例外，期默认宽度取决于size特性的值，也可以直接设置width

5、绝对定位和固定定位时，同事设置left和right等同于隐式地设置宽度

6、display:table实现多列等高布局

<div class="box">
    <div class="content">
        <div class="text"></div>
        <div class="text"></div>
        <div class="text"></div>
        <div class="text"></div>
    </div>
</div>

<style>
.box{
    margin-left:-30px;
    martin-right:-30px;
}
.content{
    display:table;
    width:100%;
    height:200px;
    border-spacing:30px;
}
.text{
    display:table-cell;
    background:red;
    border:1px solid;
}
</style>

其他的详见：https://juejin.im/post/5d3eca78e51d4561cb5dde12

更加全面直观