20、特殊盒模型

盒模型的设置:
    box-sizing:
        标准盒模型:content-box
            盒子的宽:border + padding + width
            盒子的高:border + padding + height
        怪异模型:border-box
            盒子的宽:就是设置的width,会包含border + padding
            盒子的高:就是设置的height,会包含border + padding
弹性盒模型:
    意义:
        可以营造和浮动相同的效果,并且对于盒模型内部的样式排列更加方便,但是现在w3c并未公布标准,需要添加浏览器内核前缀,并不是所有浏览器都支持。

    使用方法(父级):如果想要搭建弹性盒模型,首先要在父级建立弹性盒模型的空间。
        修改为弹性盒模型显示
            display: -webkit-box; 
        排列方式有两种,垂直或水平方向,使用的比较少
            -webkit-box-orient:vertical;/horizontal;
        子级的排列位置,在父级加上以下代码:
            -webkit-box-pack:center;
                参数:
                    start   从左到右 (默认值)
                    center  居中
                    end     从右到左 (但是和float的从右到左刚好相反)
                    justify 根据父级的宽度等分
        
    使用方法(子级):
        -webkit-box-flex:具体正数数值(代表占父级宽度的份数)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容