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;    width:20px;    height:20px;
}
</style>

每个模块会自动均分

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

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

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

更加全面直观

 

来源：https://www.cnblogs.com/chao202426/p/11325199.html